シンプルな3カラムテンプレート「leaves」

2018-11-14 2018-12-09

「leaves」は白背景のシンプルなテンプレートです。31作目です。

白い余白に植物を添えたデザイン

PCでは3カラム、タブレットでは2カラム、スマホでは1カラムになるレスポンシブデザインです。

スマホでのみ画面上部に補助的なメニュー（ページ内リンク）が表示されます。

※ご利用の際は利用規約の独自ライセンスの項目をご一読ください。

どんな端末から見てもバランスがよく見えるように、背景画像の位置を調整しました。

とはいえ管理人の「なんとなく」の感覚なので、どうぞお好きなように動かしてください！

画像によって最適なバランスは違うと思います。画像を他のものに差し替える場合はbackground-positionで位置を調整してみてください。

transform: rotate()で回転させてもいいかもしれません。

一見分かりにくいですが、実はサイト名とその下の説明文に「白い縁取り」がしてあります。背景画像と被っても読みにくくならないための工夫です。

必要があれば更新履歴のあたりまで範囲を広げてもいいかもしれません。

色をつけても面白いかも！　いつかまた使ってみたいスタイルシートです。

今回の作品展示例は実際の使用に近いよう、いろいろと織り交ぜてみました。

ジャンルごとに縦線が表示されるので雑多な中にもまとまりがあります。

複数ジャンルを取り扱うよろずサイトさんにとっては特にイメージのわきやすいテンプレートになったかと思います。

サイト作りに慣れていなければ「HTMLテンプレートを使ったサイト制作の流れ」をご覧ください。