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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

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

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

htmlの書き方

CSSの書き方

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;)

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

box1

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

box2

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

box3

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

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

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

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

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

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ