ブロックレベル要素とインライン要素
HTMLの要素をインライン要素とブロックレベル要素に分けることができます。
インライン要素（<a>、 <span>、 <button>、 <input>、 <img>など）
インライン要素は横方向に配置されていきます。親要素の幅（もしくはページ幅）に到達すると改行され、また行の先頭から追加されて行きます。
インライン要素の配置例
ブロックレベル要素（<h1>、<h2>、<p>、<div>、<ol>、<ul>、<li>など）
矩形としての領域を確保し、縦方向に追加されて行きます。
ブロックレベルの配置例
ページをレイアウトする時は、まずブロックレベル要素を使って大まかなレイアウトを整え、その中にインライン要素を流し込んでいきます。
ページレイアウトの例
こちらは１番目のブロック要素です
下のボタン達はこのブロック要素のインライン要素です
こちらは2番目のブロック要素です
下のボタン達はこのブロック要素のインライン要素です
こちらは3番目のブロック要素です。
以上です。
ページを作成してみると[スタイルを指定してのに、思ったような場所やサイズに配置されない]という状況に何度も遭遇するはずです。その多くはインライン要素とブロックレベル要素をよく間違えることがその原因です。
例えば、span要素に高さや幅を指定しても有効になりません。これは、インライン要素に高さや幅を指定しても無視されるからです。一方、pやdivみたいなブロックレベル要素に幅や高さを指定したら有効になります。
次の例を見てみましょう。インライン要素の<span>要素に高さ要素を付与してみました。
<!DOCTYPE html> <html> <body> こちらの文書はインライン要素に高さを指定します。 <span style="background-color:yellow; height:100px">高さを指定しましたが、反映されません</span> </body> </html>
次の例はブロックレベル要素の<p>要素に高さ要素を付与してみました。
<!DOCTYPE html> <html> <body> こちらの文書はブロックレベルの要素に高さを指定します。 <p style="background-color:yellow; height:100px">高さが反映されました。</p> </body> </html>
どの要素がブロックレベルで、どの要素がインラインなのかを覚えるかは大変です。そこで、簡単に覚えるコツが一つあります。それは、ブロックレベルは子要素を含む要素ということです。例えば以下の要素のようなものが、その特徴に当てはまりますね。
- p要素=子要素として主にテキストを含む場合
- div要素=子要素として色々な要素を含む場合
という二つの要素を使えば覚えやすいと思います。
ボックスモデル
HTMLでのレイアウトの基本は「ボックス」という矩形です。文書内の全ての要素はボックスと呼ばれる矩形を形成してます。このボックスモデルでのスタイル指定できるのは基本的にはブロックレベル要素となってます。
ボックスモデルには、margin（マージン）、border（枠線）、padding（余白）、height（縦サイズ）、width（横サイズ）などの色々スタイルを指定することができます。
ボックスモデルのスタイル
マージンは他の要素との距離を調整するものなので、背景色は透明となります。margin、border、paddingは上下左右別々の値を指定することが可能です。
paddingの設定例
|
スタイル例 |
説明 |
| padding: 20px | 上下左右のパディングを一括指定 |
| padding: 10px 20px 30px 40px | 上、右、下、左のパディングを個別に指定 |
| padding-top: 10px | 上のパディングを指定 |
| padding-bottom: 30px | 下のパディングを指定 |
| padding-left: 40px | 左のパディングを指定 |
| padding-right: 20px | 右のパディングを指定 |
marginの設定例
| スタイル例 | 説明 |
| margin: 10px | 上下左右のマージンを一括指定 |
| margin: 10px 20px 30px 40px | 上、右、下、左のマージンを個別に指定 |
| margin-top: 10px | 上のマージンを指定 |
| margin-bottom: 30px | 下のマージンを指定 |
| margin-left: 40px | 左のマージンを指定 |
| margin-right: 20px | 右のマージンを指定 |
border設定例
| スタイル例 | 説明 |
| border-width: 2px; | ボーダー幅 |
| border-style: solid; | ボーダースタイル、solid、dotted、dashedなど |
| border-color:red; | ボーダー色 |
| border: 2px solid blue; |
幅、スタイル、色をまとめて指定。 border-top-style, border-left-colorなどの個別指定も可能 |
以下の例でボックスモデルを意識してSteins:Gateの鈴音ちゃんの手紙にスタイルを指定してみました。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
p {
width: 200px;
height: 100px;
margin: 50px;
padding: 20px;
background-color: aliceblue;
overflow: hidden;
border: 10px solid blue;
}
</style>
<body>
こちらの文書は鈴音ちゃんのネタです。
<p>失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した失敗した</p>
スタイリング完了
</body>
</html>
これで鈴音ちゃんの手紙も綺麗になりましたね＾＾
因みに「overflow: hidden;」は、はみ出した領域を非表示にする指定です。
ボックスの位置指定
ブロックレベル要素のtopとleftはボックスの位置を調整するのに使われます。その際、topとleftは親要素からの距離を指定します。
ただし、topとleftを使用する際には、「position:relative;」（相対的な配置であって、親要素からのtopやleftなとの指定ができます。)や「position:absolute;」 （絶対的な配置であって、ページからのtopやleftなとの指定ができます。) というスタイルを指定する必要があうことに注意してください。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
position: absolute;
/*すべてのdivをtopとleftで絶対位置を指定*/
}
#panel {
/*質問用パネルの大きさと位置を指定*/
left: 100px;
top: 50px;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.button {
/*パネル上のボタンに共通のスタイルを指定*/
width: 50px;
height: 25px;
color: white;
background-color: blue;
border: 5px solid yellow;
text-align: center;
font-size: 24px;
}
.yes {
/* Yesボタンのスタイル指定*/
top: 20px;
left: 70px;
}
.no {
/* Noボタンのスタイル指定*/
top: 20px;
left: 200px;
}
</style>
</head>
<body>
<div id="panel">
<div class="button yes">
Yes
</div>
<div class="button no">
No
</div>
</div>
</body>
</html>
ここで覚えて欲しいことがありますが、クラスの属性の値は、「class=”button yes”」（この場合はbuttonクラスとyesクラスを指定しています。）のように空白で区切ることで複数の値を指定することができます。これからも大事に覚えておいてください。
このように、「position:absolute;」を指定すると、top、left、width、heightを使って好きなようにブロックレベルの要素を配置することができます。
皆さんも頑張ってありがとうございます！次のコースのJavascriptが解禁されました！これからも自分のホームページのため頑張って行きましょう！
Web開発-初めてのCSS
- 初めてのCSS-(1)-初めてのCSS
- 初めてのCSS-(2)-CSSの基本原理
- 初めてのCSS-(3)-style要素内にCSSを記述
- 初めてのCSS-(4)-link要素でcssファイル読み込み
- 初めてのCSS-(5)-ページレイアウト(完)
- 初めてのJavascript-(1)-プログラミン言語