HTML入門 CSSでレイアウトボックス作成
スポンサーリンク
さて、久々になってしまいました。CSSの覚書。レイアウトの方法についてって所でしょうか。
レイアウトはページ上に"箱(以降、ボックス)"の様な物を作成し、そこにそれぞれの記載したい物を配置していく方法をとりたいと思ってます。思ってますというよりは、現在のCSSではその方法がベストな模様。CSS3は知りませんｗまだ勉強してませんし。
ではそのレイアウト方法です。
基本的には"罫線"を利用してその罫線を見えなくすると枠組みが出来るといったところでしょうか。
上下左右の罫線を引く所から始まります。
最初に枠組みのサイズを指定しましょう。
「width」と「height」の二つを使用します。
「width」が幅の指定、「height」が高さの指定となります。
書式の仕方は
[width : 幅 背景色 ;]
[height : 高さ 背景色 ;]
となります。
さて、幅や高さの指定ですが3つあります。
・pxで指定 px(ピクセル)で指定するので液晶など画面サイズに関係なく固定されます。
・%で指定 ブラウザのサイズに対しその%で大きさが変更されます。ボックスの中にボックスを作成する場合は親にあたるボックスサイズにより変更されます。
・autoで指定 指定なしと同じで、勝手に内容物によりサイズが変わってきてしまいます。
使い方で色々と表示がおかしくなるので、親となるボックスはしっかりとサイズを指定した方がいいかもしれません。
例)
with : 200px;
height : 500px;
今回、色の指定は省きました。これで「幅200px」「高さ500px」という指定となっています。
次に、ボックスの表示方法を指定します。
「border」を使用します。上下左右それぞれの指定が必要となります。その指定は以下となります。
border-top → 上
border-bottom → 下
border-right → 右
border-left → 左
これで上下左右それぞれの罫線の種類、色、太さを決める事で枠組みを作成します。
記載の仕方は
[border-hoge : 線の種類 太さ 色 ;]
となります。
例)
border-top : solid 1px black;
border-bottom : dotted 5px #FF0000;
border-right : dashed 10px #0000FF;
border-left : double 15px rgb(40,255,0);
色の指定はいくつか方法があります。個人的にはカラーコードが一番楽かとおもいますが、色によっては指定名称がありますし、RGBという形式でも指定が可能となっています。一応参考までに。
これで枠組みの外部分が出来ました。実際に記述してみて表示させてみましょう。
index.html
-----------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ボックステスト</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">
</head>
<body>
<div id="main">
ここに文章とか入れます。
</div>
</body>
</html>
-----------------------------------------
idタグを使用してmainという形でボックスを作成してます。
今後、フッターやヘッダー、メニューなどもこうやって作成していきます。
stylesheet
-----------------------------------------
/* === main要素 === */
#main {
width : 200px;
height : 500px;
border-top : solid 1px black;
border-bottom : dotted 5px #FF0000;
border-right : dashed 10px #0000FF;
border-left : double 15px rgb(40,255,0);
}
-----------------------------------------
上記通り、mainの要素としてCSS作成しています。
参考までに。
サンプルリンク
どうでしょうか。
罫線にも色々種類がありますし、色も多色あります。
全体のレイアウトには線の種類を指定せず、0pxで指定しておけば見えなくなりますので、そういう活用方法をしてレイアウトしていきます。
同様に、見出しやclassなどにボックス枠を指定する事で文章を囲い、タイトルなど強調する事も可能となりますのでそういう使い方になるのがふつうかもしれませんね。
