初めてのCSS-(5)-ページレイアウト(完)

Web開発/プログラミング/初めてのCSS/初めてのWeb基本//

ブロックレベル要素とインライン要素

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となります。
こちらのボックスるの縦の長さは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を50pxずつ指定したブロック
topとleftを30pxずつ指定したブロック

ただし、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

プログラミングメイン

プログラミング
このサイトを運営しながら勉強したものです。どなたでもいいですので役に立ってたら幸いです。Web開発 プログラミング初心者にもおすすめできるWeb開発の講座です。 初めてのWeb開発の基本初めてのHTML初めてのCSS初めてのJavaScriptJSP入門JSPWebゲーム開発canvasの...