CSSレイアウト

CSSレイアウト「教えてマリオ」

ホーム>>教えてマリオトップ>>CSSレイアウト

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。難しい言葉を使わず（使えない）噛み砕いた言葉で書いていくので、参考になればと思います。
＊勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

CSSレイアウト

2012年4月7日
CSS,html

今回は今までの復習もかねてごく一般的なレイアウトを枠組みだけですがCSSで作ってみたいと思います。

CSSで枠組みをレイアウトし、JAVASCRIPTでボタンをロールオーバーしてみたいと思います。

レイアウトコンテナ（div）の数を決める。
HTMLを書いていく
CSSで整える
ロールオーバーを適用

1.レイアウトコンテナ（div）の数を決める。

まずは完成見本を見てみます。

レイアウトコンテナ（div）にID名をつけてレイアウトしていきます。全体像

上記の感じで作成していきます。上の画像では書ききれなかったのですが全体を囲むdivも作成します。ID名はwrapとします。

なので今回のサンプルの枠組みで使うレイアウトコンテナは

全体を囲むdiv(wrap)
頭の部分にあたるdiv(header)
ナビゲーションボタンを入れるdiv(navi)
左側のコンテナにあたるdiv(left)
右側のコンテナにあたるdiv(rignt)
最後に下・足の部分にあたる（footer）
の６個です。ID名はみなさんのお好きな名前でいいですが、なるべく配置する場所と関係のある名前が覚えやすく、ほかの人が見たときにもわかりやすいと思います。

たとえばwrapではなくallだったりheaderではなくtopだったりでもOKです。
今回は上記ID名で進めていきます。

画像はheader部分とボタンの部分にだけ使います。

全体の横幅は660pxでheader画像のサイズは横幅が660pxで高さが300px、ボタンのサイズは横幅120px高さ50pxで作成しています。
では作成していきましょう。

今回作るホームページの名前をcsslayoutとし必要なものを１つのフォルダにいれて（ホームページは１つのフォルダの中で管理しなければならない）もとになるindex.htmlファイル（必要最低限の記述がしてある）と画像（前回のJAVASCRIPTのロールオーバーを使うので画像の名前を拡張子の前は_offと_onにしています）とcssフォルダとjsフォルダを準備していますので下記からダウンロードしてください。

こちらからダウンロード

▲目次へ戻る

2.HTMLを書いていく。

人によっていろいろ作り方は違いますが、上から完璧に作っていく人、全体を少しづつ作っていく人などいろいろありますが、今回は全体をレイアウトした後に中身（中身はほとんどありませんが）を作る流れで進めていきます。

まずはダウンロードしてもらったcsslayoutのフォルダ構成を見てみます。全体はcsslayoutという名前のフォルダ１つで管理されていてその中は.htmlファイル以外はわかりやすくフォルダで分けています。index.htmlには必要最低限のものしか書いていません。cssフォルダの中にはstyle.cssファイルを入れていますが、中身は何も書いていません。jsファイルには前回紹介したロールオーバーの.jsファイルが入っています。imgフォルダにはheaderに使う画像とボタンに使う画像が入っています。

次にindex.htmlファイルを見てみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>


</body>
</html>

こんな感じです。必要最低限のものしか書いていません。
では作っていきます。まずはタイトルと必要なdiv６個を書いてみましょう。タイトル名はCSSレイアウトの練習で行きましょう。divは<body>と</body>の中に書きましょう。

こんな感じになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssレイアウトの練習</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="wrap">
    <div id="header"></div><!--header_end-->
    <div id="navi"></div><!--navi_end-->
    <div id="left"></div><!--left_end-->
    <div id="right"></div><!--right_end-->
    <div id="footer"></div><!--footer_end-->
</div><!--wrap_end-->
</body>
</html>

タイトルは必ず初めに入れる癖をつけておきましょう。コメントアウトも初めから書いておかないと後でわからなくなることがあるので、こちらも忘れずに。入れ子になっているものは（wrapの中にほかの５つのdivが入っている）インデント（スペース）を入れてわかりやすくしておきましょう。

今の状態でブラウザで確認しても中身を何も書いていませんので何もうつりません。次にheaderの中に画像を入れます。
画像はimgフォルダの中にある画像header.pngを使うのでパスは相対パスで
img/header.pngです。こんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssレイアウトの練習</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="wrap">
    <div id="header">
    	<img src="img/header.png" alt="教えてマリオ"　alt="教えてマリオ"/>
    </div>
    <!--header_end-->
    <div id="navi"></div><!--navi_end-->
    <div id="left"></div><!--left_end-->
    <div id="right"></div><!--right_end-->
    <div id="footer"></div><!--footer_end-->
</div><!--wrap_end-->
</body>
</html>

12行目にimgタグが追加されました。 title属性は好みで入れても入れなくてもいいと思いますがalt属性は必ず入れるようにしましょう。

次にボタンの画像を入れたいと思います。画像のボタンは順不同（ul）のリスト（li）を作成しその中に入れていきます。ボタンの画像はimgフォルダの中に入っているbtn01_off.pngからbtn05_off.pngまで左から順番に入れていきます。_onの画像はロールオーバー用なのでつかいません。
あとfooterにコピーライトを入れておきましょう。

こんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssレイアウトの練習</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<div id="wrap">
    <div id="header">
    	<img src="img/header.png" alt="教えてマリオ"　alt="教えてマリオ"/>
    </div>
    <!--header_end-->
    <div id="navi">
    	<ul>
            <li><img src="img/btn01_off.png" alt="TOP"　alt="TOP"/></li>
            <li><img src="img/btn02_off.png" alt="HTML"　alt="HTML"/></li>
            <li><img src="img/btn03_off.png" alt="CSS"　alt="CSS"/></li>
            <li><img src="img/btn04_off.png" alt="JAVASCRIPT"　alt="JAVASCRIPT"/></li>
            <li><img src="img/btn05_off.png" alt="SEO"　alt="SEO"/></li>
        </ul>
    </div><!--navi_end-->
    <div id="left"></div>
    <!--left_end-->
    <div id="right"></div><!--right_end-->
    <div id="footer">Copyright © 2012 MARIO DESIGN. All Rights Reserved.</div><!--footer_end-->
</div><!--wrap_end-->
</body>
</html>

ブラウザでみるとこんな感じです。ブラウザでの表示

まだおかしいですが、大丈夫です。HTMLは基本（すべてではありません）何もしなければ横にタグは並びません（ブロック要素とインライン要素で検索してください）。基本横並びにするときはcssのfloatを使います。ですのでまだcssでfloatを指示していないのでボタンの画像が縦に並んでいます。今からCSSできれいにレイアウトしていきます。

▲目次へ戻る

3.CSSで整える。

ではCSSで指示していきましょう。まずcssはcssフォルダに入っているstyle.cssに書いていくのでindex.htmlファイルでstyle.cssを読み込まなければいけませんね。
index.htmlの<head>と</head>のなかに以前勉強した読み込むコードを書きます。

<link rel="stylesheet" href="css/style.css" type="text/css" />

「cssフォルダの中にあるstyle.cssを読み込んでね」という意味です。

これでcssをかく準備ができたのでstyle.cssを開いて書いていきましょう。
まずはブラウザで見てもらうとわかると思いますがheaderの画像は左と上にくっついていません。これはbodyに初期値の余白があるからです。まずはこの余白を取ってみましょう。

こんな感じです。

@charset "utf-8";
body{
	
	margin:0;
	padding:0;
	
}

ブラウザで見ると画像がぴったりくっついたと思います。

次に全体の横幅を指定して画面の中央に配置されるようにします。全体の横幅はwrapに660pxを指定します。中央に配置するのはwrapのmarginの左右にautoを指定すると中央に配置されます。注意点として横幅を指定することを忘れないようにしてください。

こんな感じです。

@charset "utf-8";

body{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}

ブラウザで見てもらうと、中央に配置されたと思います。

次はnaviの中のulとliにcssを指示していきます。ここでは子孫セレクタというCSSの指示方法で指示していきます。

子孫セレクタとは○○の中にある○○といったように指示できます。今回は＃naviの中にあるulといったように指示していきます。これはID名やクラス名をたくさんつけなくてよいので非常に便利です。指示の仕方は半角スペースで区切るだけです。

では指示していきます。ulにはもともとbodyのように余白が入っているので取ります。そしてブラウザで見てもらうとわかると思いますが、ボタンの画像の左側に黒い点（リストマーク）があります。これもliにもともとついているものなので消します。

こんな感じです。

@charset "utf-8";

body{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}

#navi ul{
	
	margin:0;
	padding:0;
	
}

#navi li{
	
	list-style:none;
	
}

#navi liの指示list-style:none;が黒い点（リストマーク）を消す指示になります。これで余白が取れてボタンの画像が左にぴったりとくっついたと思います。

ここで再度cssをみてもらいたいのですがbodyの指示と#navi ulの指示は両方とも同じ指示ですね。こういった場合はまとめて書くことができます。まとめて書くことをグループセレクタといいます。書き方は,（カンマ）で区切るだけです。

こんな感じです。

@charset "utf-8";

body,#navi ul{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}

#navi li{
	
	list-style:none;
	
}

グループセレクタを使うと重複した指示をまとめることができ、すっきりしてみやすいですね。

次はボタンの画像を横並びにしたいと思います。タグを横並びにする場合はfloat(回り込み)を使います。floatは初めのうちはレイアウトが崩れたりして難しいとされています。しかしきっちりと約束事を守っておけば難しくありません。

約束事とは
①対象物（横に並べたいもの）に横幅を入れる
②対象物（横に並べたいもの）すべてにfloatを指示する
③floatを指示したら解除の指示もする
解除の仕方はfloatを指示している次のタグにclear:bothを入れるかfloatを指示している次のタグがない場合はfloatを指示しているタグを囲っているタグ（１つ上の階層に）にclearfixを適用するです。＊clearfixは検索するとたくさん出てくるので好きなものを使ってください。

絶対ではないですがこの３つを守っておけば基本大丈夫です。

今回ボタンの画像は#naviの中にあるliに入っているのでこのliにfloatを指示します。 floatにはleftとrightがありますが慣れるまではleftだけ覚えておけばいいと思います。横幅は画像が120pxですので120pxにします。#naviの中にあるliに追加で書きます。

こんな感じです。

@charset "utf-8";

body,#navi ul{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}

#navi li{
	
	list-style:none;
	float:left;
	width:120px;
	
}

これでボタンが横に並びました。あとは解除しないといけませんね。先ほど解除の方法を２つ書きましたがここではfloatを指示した次の要素がないのでclearfixで解除します。 cssにclearfixを追加します。

こんな感じです。

@charset "utf-8";

body,#navi ul{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}

#navi li{
	
	list-style:none;
	float:left;
	width:120px;
	
}
.clearfix:after {
  content: ".";  
  display: block;  
  clear: both;
  height: 0;
  visibility: hidden;
  
}

.clearfix {
  min-height: 1px;
  
}

* html .clearfix {
  height: 1px;

}

clearfixは毎回コピーして使ってください。
次にclearfixはfloatを指示しているタグを囲っているタグ（１つ上の階層に）に指示しないといけないのでここでは#naviにあたります。ですので.htmlファイルの＃naviの部分にクラスclearfixを適用します。

こんな感じです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cssレイアウトの練習</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div id="wrap">
    <div id="header">
    	<img src="img/header.png" alt="教えてマリオ"　alt="教えてマリオ"/>
    </div>
    <!--header_end-->
    <div id="navi" class="clearfix">
    	<ul>
            <li><img src="img/btn01_off.png" alt="TOP"　alt="TOP"/></li>
            <li><img src="img/btn02_off.png" alt="HTML"　alt="HTML"/></li>
            <li><img src="img/btn03_off.png" alt="CSS"　alt="CSS"/></li>
            <li><img src="img/btn04_off.png" alt="JAVASCRIPT"　alt="JAVASCRIPT"/></li>
            <li><img src="img/btn05_off.png" alt="SEO"　alt="SEO"/></li>
        </ul>
    </div><!--navi_end-->
    <div id="left"></div>
    <!--left_end-->
    <div id="right"></div><!--right_end-->
    <div id="footer">Copyright © 2012 MARIO DESIGN. All Rights Reserved.</div><!--footer_end-->
</div><!--wrap_end-->
</body>
</html>

少し見ずらいですが１６行目の部分ですclass=”clearfix”が追加されています。これでfloatは解除されました。

あとはボタンの画像がくっついているので少し余白をいれたいと思います。

こんな感じです。

@charset "utf-8";

body,#navi ul{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}
#navi{
	
	padding:10px 5px;
	
}

#navi li{
	
	list-style:none;
	float:left;
	width:120px;
	margin:0 5px;
	
}

.clearfix:after {
  content: ".";  
  display: block;  
  clear: both;
  height: 0;
  visibility: hidden;
  
}

.clearfix {
  min-height: 1px;
  
}

* html .clearfix {
  height: 1px;

}

１６行目に#naviの指示を追加して上下に10px左右に5pxの余白をいれました。
２７行目は#navi liにmarginを左右に5px追加しました。
この余白はみなさんのお好きなように入れられてください。

次はleftとrightを横に並べます。横に並べるのは先ほどと同じようにfloatを使います。解除は今回はfloatを指示している次の要素（footer）があるのでfooterにclear:both;を入れたいと思います。
leftにfloatと横幅400px高さを500pxと背景を#E1133Dに
rightにfloatと横幅200px高さを500pxとleftにくっつかないように左方向にmarginを10ｐｘと背景を#E1133Dに
footerにclear:both;padding上下に5pxと文字を中央配置にすると背景を#E1133D
と指示します。

こんな感じです。

@charset "utf-8";

body,#navi ul{
	
	margin:0;
	padding:0;
	
}

#wrap{
	
	width:660px;
	margin:0 auto;
	
}
#navi{
	
	padding:10px 5px;
	
}

#navi li{
	
	list-style:none;
	float:left;
	width:120px;
	margin:0 5px;
	
}

#left{
	
	float:left;
	width:400px;
	height:500px;
	background:#E1133D;
	
}

#right{
	
	float:left;
	width:250px;
	height:500px;
	margin:0 0 0 10px;
	background:#E1133D;
	
}

#footer{
	
	clear:both;
	padding:5px 0;
	background:#E1133D;
	text-align:center;
	
}

.clearfix:after {
  content: ".";  
  display: block;  
  clear: both;
  height: 0;
  visibility: hidden;
  
}

.clearfix {
  min-height: 1px;
  
}

* html .clearfix {
  height: 1px;

}

これで一般的なレイアウトをCSSでレイアウトできました。あとは中身を充実させてあげると完成ですね。ちなみに今回は中身がないのでleftとrightに高さ（height）を入れましたが、高さ（height）を入れてしまうと固定されてしまいますので高さ（height）を指定せずに中身の量が増えたら自動的に大きくなるように高さ（height）を指定しないことが多いです。

▲目次へ戻る

3.ロールオーバーを適用。

最後にロールオーバーを適用して終わりたいと思います。前回の復習になります。今回はすでに画像の名前を_offと_onにしていますのでsmartRollover.jsファイルをindex.htmlに読み込むだけで完成です。

index.htmlの<head>と<head>の間に前回勉強した読み込みコードを入れます。

<script src="js/smartRollover.js" type="text/javascript"></script>

これで完成です。みなさん完成できましたでしょうか？

もし途中でわからなくなったという方は完成見本を用意しておきますので、違いを見比べてみてください。

完成見本はこちら

▲目次へ戻る

コメントを残すコメントをキャンセル

TRACKBACK_URL

カテゴリー
- CSS
- html
- javascript
- photoshop
- php
- seo
- technique
- wordpress
- スマートフォン
- 会社
アーカイブ
最近の投稿
人気記事？？ランキング

CSSレイアウト「教えてマリオ」

ホーム>>教えてマリオトップ>>CSSレイアウト

CSSレイアウト

1.レイアウトコンテナ（div）の数を決める。

2.HTMLを書いていく。

3.CSSで整える。

3.ロールオーバーを適用。

コメントを残す コメントをキャンセル

カテゴリー

アーカイブ

最近の投稿

人気記事？？ランキング

コメントを残すコメントをキャンセル