
こんにちは。
シーサイドレーベルweb担当の飯野です。
今回はコンテンツを囲むデザインの設定例を
ご紹介させて頂きます。
画像を使わずに気軽に出来るデザインなので
是非マスターして頂ければと思います。
htmlの書き方
1 2 3 4 |
<div class="box1"> <p>簡単なボックスデザインの見本です。</p> <p>罫線の設定でデザインされています。簡単に設定出来ます。罫線の設定でデザインされています。簡単に設定出来ます。罫線の設定でデザインされています。簡単に設定出来ます。</p> </div> |
CSSの書き方
1 2 3 4 5 6 7 8 |
.box1 { width:600px; margin:0 auto 30px auto; padding:10px; border-width:5px; border-style:solid; border-color:#0084ff; } |
cssファイルに「box1」という
セレクタ名を付けて設定しています。
htmlファイルに
と記述して、
その中に
タグでテキスト文章を入れている形です。
cssの設定では、
・横幅を600pxに設定(width:600px;)
・marginで左右は自動、上のスペースは0で下に30pxのスペースを設定
(margin:0 auto 30px auto;)
・paddingはボックスの内側に左右上下それぞれ10pxのスペースを設定
(padding:10px;)
・罫線の太さを5pxに設定(border-width:5px;)
・罫線のスタイルを1本線で表示に設定(border-style:solid;)
・罫線の色を水色に設定(border-color:#0084ff;)
上記の設定を行うと下記のような表示になります。
これを元にして、罫線の太さを調整したり、
罫線の色を変更するだけで少し違う印象のボックス表示も
行えます。
また、ボックス内の背景色を色みのあるものに変更すると
より強調されたボックス表示になります。
こちらに見本ファイルをアップしましたので
ソースを確認して頂けると分かると思います。
【簡単なボックスデザインサンプル表示】
テキストなどを囲むだけで、
ちょっとしたアクセントになりますので、
是非覚えて頂ければと思います。
今回は簡単なボックスデザインの一例を
ご紹介させて頂きました。
今後、また他のデザイン方法なども
ご紹介していきたいと思います。
では、また来週お会いしましょう。