これまでの回では環境構築、html,cssに関する基本的な書き方について説明していきました。
[blogcard url="http://gadgegy.com/studyhtml1/"]
[blogcard url="http://gadgegy.com/studyhtml2/"]
そして今回はdivという領域設定について紹介していきたいと思います。
divは初心者の方はつまづきやすい部分の1つなので実例を交えながら解説していきます。
divって
divとは特に意味を持たない汎用的な領域の要素のことを指します。
言葉で伝わりずらかった方のためにイメージで表すと...
上画像のようにそれぞれの領域がdivで、それを組み合わせてwebぺージを構成ししていくようになります。
div領域の中には文字や画像などのコンテンツを掲載します。
このdivを多用することでより複雑な構成のサイトを作成することができます。
またdivにも使い分けが存在します。
例：sectionタグやarticleタグなど...
しかし、今回はdivが使えるようにすることを主眼としているため、使い分け方についてはここでは省略いたします。
※divと使い方はほとんど同じなので特に心配無用です。
※どうしても知りたいという方は以下で分かりやすく書かれていたので参考にしてみてください。
「divとsectionとarticle要素それぞれの特徴と使い分け」
HTML,CSSを書いてみる
divの使い方を説明していきなり書けと言われても少し難しいと思うので...
今回はプログラムの例を先に紹介してから、そのあと解説を添えたいと思います。
では早速、以下のぺージを実際に作成してみましょう。
※今回はわかりやすく色分けをしています。
以下にHTML,CSSを掲載します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <link rel="stylesheet" href="index.css"> </head> <body> <div class="wrapper"> <div class="header1"> <h1>ヘッダー部分</h1> </div> <div class="main1"> <h1>メイン部分</h1> <p>コンテンツがここに記載されます。</p> </div> <div class="sidebar1"> <h2>サイドバー</h2> <p>side</p> </div> <div class="footer1"> <h2>フッター</h2> <p>footer</p> </div> </div> </body> </html>
h1 {
color: red;
}
h2 {
color: blue;
}
h3 {
color: green;
background-color: gray;
}
.wrapper{
width:900px;
height:800px;
margin: 0 auto
}
.header1{
width:900px;
height:100px;
margin: 0 auto;
background-color: #eee;
}
.main1{
width:650px;
height:600px;
background-color: #eea;
float:left;
}
.sidebar1{
width:250px;
height:600px;
background-color: #aee;
float:left;
}
.footer1{
width:900px;
height:100px;
background-color: #aae;
clear: both;
}
こちらのプログラムを入力して実行すると、先ほど示したぺージが表示されると思います。
※コピペすると早いです。
プログラムの解説
htmlの解説
8行目までは前回と同じなので省略します。
9行目以降について
<div class="wrapper">
こちらがdiv要素の表し方です。
右側にclass=...と書かれている部分がありますが、これはdivの名前付けというイメージです。
なお、class=と書かなくても、id=でもいけますし、何もつけなくてもdiv自体は使用できます。
※classとidは実際には使い分けがありますが、詳しくない方はclass=で構いません。
※以下でわかりやすく解説されているので興味のある方は確認してみてください。
「divとsectionとarticle要素それぞれの特徴と使い分け」
ここでなぜclass=として名前付けをするかというと、cssで各divに対してそれぞれ別の設定をするためです。
名前があれば特定のdivを指定して設定ができるようになります。
同じ名前をつければcssで1度設定を記述するだけで同名のdivをまとめて設定できるためいろいろな工夫ができます。
今回は5個のdiv要素（かたまり）を使用してぺージを構成しました。
divのタグ内に文字や写真を入れるとその中にコンテンツとして文章や写真を掲載することができます。
divの配置や設計についてはcssで行うので次はそちらを見てみましょう！
CSSの解説
divはhtmlで書く分にはそんなに難しいことはありません。
しかしCSSになるとdivの配置の仕方について少し苦手意識を持たれる方がいらっしゃるのでそちらを見ていきます。
12行目までは前回とほとんど同じなので省略します。
13行目以降について
class=...で名前付けしたdivの設計を行っています。
指定するときは「.名前{ }」で{ }内に記述していきます。
「width= 」は幅を決めることができます。
「height= 」は高さを決めることができます。
どちらも今回はpx（ピクセル）で指定しました。
他にも単位が「em」や「%」などありますが今回はpx指定でいきます。
※他単位の使い分けは以下にわかりやすい記事があったのでそちらを見てみてください。
「CSSの単位の使い分けについて(em,%,px,remの使い分け)」
次に「margin:0 auto;」についてです。
marginは簡単に言えば余白のことで、
上のケースの場合は、上下方向の余白は0にして、左右方向については均等にそろえるという意味があります。
divを中央揃えにしたい場合は上記のように記述すればＯＫです。
さいごに「floatとclear」についてです。
div領域は何も指定しなければ下に追加されていきます。
しかし横方向に並べたいという場合も多くあると思います。
そんなときに使えるのがfloatとclearです。
float:leftと記述すれば左詰めに並べていき、左詰めをやめる場合はclear:bothを指定すれば花序されます。
意外と簡単ですが、慣れないうちは違和感があるかもしれません。
以下にイメージを載せておくと...
という感じになります。
※floatを使用する際は必ずclearもセットで使うようにしましょう。
忘れると配置が崩れる可能性があります。
他にもさまざまな指定方法がありますが比較的簡単な記述法について紹介しました。
まとめ
今回はdivの実際の使い方に触れてdivの使い方をイメージできるようにしました。
次回はdivを使っていろいろな厚生のぺージを作ってみましょう。
読んでいただきありがとうございました。