CSSを学ぶ。ブロック要素とインライン要素にCSSを書く。

CSSを学ぶ。ブロック要素とインライン要素にCSSを書く。

今回のポイント

前回の記事で、3つの方法を用いてCSSを記述する方法を解説してきました。
3つの方法については以下の3記事を参考にして下さい。

今回は、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を使うには3つの方法があります。</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>3つの方法</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を使うには3つの方法があります。</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を学ぶ。シリーズはこちら

CSSカテゴリの最新記事