今回のポイント
前回の記事で、３つの方法を用いてCSSを記述する方法を解説してきました。
３つの方法については以下の３記事を参考にして下さい。
今回は、HTMLの要素によってCSSが与える装飾が異なることを解説していきたいと思います。
ブロック要素とインライン要素
HTML要素は大きく、ブロック要素とインライン要素に分けることが出来ます。
ではそれぞれの要素とそれにCSSが与える装飾の違いについて解説していきます。
ブロック要素とは
ブロックレベル（ブロック）要素とは、見出し・段落・表など、文書を構成する基本となる要素です。
これらは一つのブロック（かたまり）として認識されます。
ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。
ブロック要素の種類
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
ブロック要素にCSSを記述する
それではいつものように、HTMLで記述したHTMLファイルを準備しておきました。
そして今回は外部のCSSファイルを使用してCSSを記述していくので、リンク指定しています。
こちらの方法は、以下の記事を参考にしてみて下さい。
準備したHTMLソースはこちらです。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには３つの方法があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
この記事を事前に、ブラウザで確認しておきましょう。
それではブロック要素であるPタグに対して、CSSを記述してみます。
ちなみに今回は背景の色を装飾する『background-color』を使用します。
p {
background-color: yellow;
}
これをブラウザで確認すると、以下のようになります。
この状態をよく覚えておいて下さい。
そして次に解説していく、インライン要素との違いを比べていきましょう。
インライン要素とは
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。
例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。
一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
インライン要素の種類
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
インライン要素にCSSを記述する
今回のHTMLで書いた記事の中には、インライン要素はありません。
そこで今回は『span要素』をこの記事の中に記述します。
span要素については少し説明が必要ですね。
span要素は自身に特に何の意味を持たない要素です。
主に今回のようにスタイルシート（CSS）を用いる場合などに使用される要素になります。
同様な要素にdiv要素がありますが、こちらはブロック要素として使用される素となります。
そこで今回はインライン要素として『span要素』を使用する事とします。
それではHTMLの記事に、このspan要素を記述してみます。
記述した例は以下の通りです。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p>CSSを使うには<span>３つの方法</span>があります。</p>
<h2>stye属性を使ってCSSを書く</h2>
<p>これまで学んだHTMLのスキルを応用して記述する方法になります。</p>
<h2>header内にCSSを書く</h2>
<p>この方法はheader要素内にCSSを記述していく方法になります。</p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</p>
</body>
</html>
そしてこの『span要素』に対して、CSSを記述します。
span {
background-color: yellow;
}
それでは、ブラウザで確認してみましょう。
いかがでしょうか。
ブロック要素とインライン要素に対してのCSSの装飾の違いは分かりましたか？
次に実験的ではありますが、P要素全てに『span要素』を記述したらどうなるか試してみましょう。
結果は想像できますか？
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<h1>CSSを学ぶ。シリーズ</h1>
<p><span>CSSを使うには３つの方法があります。</span></p>
<h2>stye属性を使ってCSSを書く</h2>
<p><span>これまで学んだHTMLのスキルを応用して記述する方法になります。</span></p>
<h2>header内にCSSを書く</h2>
<p><span>この方法はheader要素内にCSSを記述していく方法になります。</span></p>
<h2>外部にCSSファイルを作成してCSSを書く</h2>
<p><span>この方法は外部にCSSファイルを作成してCSSを記述する方法になります。</span></p>
</body>
</html>
結果は以下のようになります。
文字の部分だけが、黄色に装飾されました。
想像通りの結果だったでしょうか。
ブロック要素とインライン要素の装飾の違い
それでは最後にブロック要素とインライン要素とでは、どのようにCSSで装飾した結果に違いがあったか確認しましょう。
- ブロック要素にCSSを記述した場合は、ブロック全体が塗りつぶされる。
- インライン要素にCSSを記述した場合は、対象の段落のみが塗りつぶされる。
この違いは今後、CSSを扱う上で非常に重要な意味を持ちます。
必ず覚えておくようにしましょう。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
