divタグを使ったレイアウト(3)

前回まではdivタグを使って段落を作り、CSSを使って左右に配置できることをご紹介しましたが、今回はCSSでどのような設定をすることにより、そのようなレイアウトが実現されるのかを説明したいと思います。

その前に人気ブログランキングをご覧下さい。

(3)
.my_box {
width: 100px;
border:solid 1px;
}

まず全体を一つの段落として定義していたdivタグの中で使われていたmy_boxについて説明します。

まず最初に{ 〜 }で囲まれている1行目をご覧下さい。CSSの基本は全て属性:値;という記法が用いられます。

1行目では段落の幅(width)を属性として、その値を定義しています。この例では100pxの幅となるよう指示しているわけですね。例えば幅を倍にしたければ100pxのところを200pxに書き換えれば良いことになります。

次に2行目ですが、ここでは段落周囲の枠線(border)を定義している箇所となります。その値を見てみるとsolid 1pxとなっていますが、これは複数の値を半角スペース区切りで与えているのです。

まずsolidというのが1本線を意味しています。他にも下記の通り、色々と枠線の種類があります。

none表示しない
hidden表示しない
double2本線
groove凹んでいるように表示する
ridge飛び出して見えるように表示する
inset枠の内側が凹んでいるように表示する
outset枠の外側が飛び出しているように表示する
dashed破線
dotted点線

枠線の種類を決めたら、その太さも指定しておいた方が良いでしょう。今回の例では1番細い1pxにしてみました。

今回の例では上下左右の値を一括で指定するタイプになっていますが、次のように個別に指定することもできます。

枠線種類
border-type:(上下左右);
border-type:(上下) (左右);
border-type:(上) (左右) (下)
border-type:(上) (右) (下) (左)

枠線太さ
border-width:(上下左右);
border-width:(上下) (左右);
border-width:(上) (左右) (下)
border-width:(上) (右) (下) (左)

これ以外にも次のように属性に値の一部を含めることもできます。

border-left-type:(値)
border-right-type:(値)
border-top-type:(値)
border-bottom-type:(値)

上手に使い分けると次のようなCSSとタグでちょっとしたメニュータイトル風の表示が可能になります。

CSS
.my_menutitle {
border:solid #ff0098;
padding: 5px;
border-left-width:25px;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:1px;
}

html
<div class="my_menutitle">メニュータイトル</div>

表示
メニュータイトル

色々と利用方法があると思いませんか? 次回は左右に配置するためのCSSの設定について解説したいと思います。

posted by ひっそり | Comment(0) | TrackBack(0) | div
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/15472331
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。