罫線を使った簡単なボックスデザイン【その①】

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回はコンテンツを囲むデザインの設定例を
ご紹介させて頂きます。

画像を使わずに気軽に出来るデザインなので
是非マスターして頂ければと思います。

htmlの書き方

CSSの書き方

cssファイルに「box1」という
セレクタ名を付けて設定しています。

htmlファイルに

と記述して、
その中に

タグでテキスト文章を入れている形です。

cssの設定では、

・横幅を600pxに設定（width:600px;）
・marginで左右は自動、上のスペースは０で下に30pxのスペースを設定
　（margin:0 auto 30px auto;）
・paddingはボックスの内側に左右上下それぞれ10pxのスペースを設定
　（padding:10px;）
・罫線の太さを5pxに設定（border-width:5px;）
・罫線のスタイルを1本線で表示に設定（border-style:solid;）
・罫線の色を水色に設定（border-color:#0084ff;）

上記の設定を行うと下記のような表示になります。

これを元にして、罫線の太さを調整したり、
罫線の色を変更するだけで少し違う印象のボックス表示も
行えます。

また、ボックス内の背景色を色みのあるものに変更すると
より強調されたボックス表示になります。

こちらに見本ファイルをアップしましたので
ソースを確認して頂けると分かると思います。
【簡単なボックスデザインサンプル表示】

テキストなどを囲むだけで、
ちょっとしたアクセントになりますので、
是非覚えて頂ければと思います。

今回は簡単なボックスデザインの一例を
ご紹介させて頂きました。

今後、また他のデザイン方法なども
ご紹介していきたいと思います。

では、また来週お会いしましょう。