このページでは、CSSレイアウトのデザイン例と簡単なデザインテクニックをご紹介します。
画像をクリックすると、サンプルページが別ウィンドウで開きます。
※デザイン例で使用している画像は、素材サイトさんよりお借りしています。
画像をご利用の際は、各ページにある素材サイトさんのリンク先にて利用規約をご確認ください。
- デザイン２
- デザイン３
- デザイン４
サイドメニュータイプのレイアウトです。
背景画像に合わせてトップにマージンを取っています。
デザインのポイントは、borderの使い方と、タブを付けたコンテンツです。
こちらもサイドメニューのレイアウトです。
背景画像の指定がちょっと無理やりですが・・・2種類使っています。
デザインのポイントは、サイドメニューのborderの使い方と、コンテンツタイトルのアイコンの配置です。
positionプロパティを駆使したデザインです。
完全に固定サイズで見ないとデザインが崩れてしまうので、
実際のところあまり実用的ではありません。
デザインのポイントは、positionプロパティの使い方と、レース風のボーダーです。