ワードプレスをやろう!と決めてから何日も過ぎている・・・

ようやく初めてログインできても全く進まない・・・

なんとかブログの投稿を始めたが全然稼げない・・・

これ以上時間を無駄にしたくない・・・

そんなあなたには下記の書籍がおすすめです!

書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

HTMLブロックとインライン要素の違いとは?WPカスタマイズの必須知識

ワードプレスは管理画面のテーマカスタマイザーである程度のデザイン設定ができますが、カスタムCSSを使いこなせると表現できる幅が大きく広がります。

この記事では、カスタムCSS初心者の方向けに、ぜひとも知っておきたいHTMLの知識としてブロック要素とインライン要素について解説していきます。

この記事でわかること

・HTMLのブロック要素インライン要素の違い
divspanで知るブロック要素とインライン要素の使い分け
・ブロック要素とインライン要素の代表的なHTMLタグ
displayプロパティ他の要素に変換する方法

なお、カスタムCSSについては次の記事がおすすめです。

HTMLと代表的なHTMLタグのおさらい

カスタムCSSの解説記事でも紹介しましたが、少しHTMLそのものについて簡単に解説しておきましょう。

Webサイトのページは、HTMLという言語で内容が記述されています。

文章も画像・動画といったコンテンツも、それぞれを表すHTMLタグというもので表現(マークアップといいます)されていて、基本的なものとして次のものがあります。

例えば、この記事のタイトルならば見出しのh1タグを使って、

<h1>ブロック要素とインライン要素の違いとは?WPカスタマイズの必須知識</h1>

というように記述しているわけなんですね。

このように、
 ・見出しなら<h1>~<h6>タグ
 ・段落ならば<p>タグ
 ・画像ならば<img>タグ
というように、HTMLタグそれぞれに意味があって、どんな種類のコンテンツなのかがわかるようになっています

そうすることでGoogleの検索エンジンにWebページの内容を正しく伝える役割を果たすのです。

しかし上の表の中のdivspanを見ると、それぞれ範囲指定(ブロック要素)範囲指定(インライン要素)と記載があるものの、特にタグそのものは意味を持たないことがわかります。

しかしdivとspanはブロック要素とインライン要素を示す大切なタグなんです。
この後の説明でその重要度が理解できるようになります。

ブロック要素とインライン要素

divspanは、それぞれブロック要素インライン要素と呼ばれています

ブロック要素とは

divタグで範囲を指定することで、ブロックと呼ばれるエリアを形成することができます。これをブロック要素と呼びます。

ブロック要素で覚えておくべき特徴は次の2つです。

  • ブロックの範囲は行単位となり、親要素の左右いっぱいに広がるエリアとなる
  • ブロックは大きさ(サイズ)を指定できる

ブロックは行単位で範囲指定となる

例えばこの記事エリアの中に<div>あああ</div>と記述して、CSSでブロック範囲を黄色にしてみました。

あああ

文字の範囲にかかわらず、左右いっぱいにブロックが広がっているのがわかります。

ここでいう左右いっぱいというのは、divの入っている親要素の中で左右いっぱいに広がる、という意味です。この<div>の親要素は記事エリアですので、記事エリアの中で左右いっぱいに広がったわけですね。

では、今度はブロックを2つ作成してみましょう。

<div>あああ</div><div>いいい</div>とブロックを2つ並べて記述してみます。
1つ目は黄色、2つ目はシアン色でブロック範囲をCSSで着色しました。

あああ
いいい

2つのブロックを横に並べて記述したにもかかわらず、ブロックは自動的に改行されていることがわかります。

これが、ブロックの範囲は行単位であるという意味です。

ブロックにはサイズを指定できる

ブロックのサイズは初期値として、横方向は横幅いっぱい、縦方向は中に入れたコンテンツに合わせて自動的に広がるようになっています。

これをCSSで記述すると、

width: 100%;
height: auto;

になっていることになります。横幅は親要素に合わせて100%広げる高さは自動に可変、という意味です。

このCSSの値を操作することで、ブロックの大きさは変更することができます。
先ほどの2つのブロックのそれぞれの大きさを変更してみましょう。

1つ目(黄色)の横幅を80%、高さを2文字分、
2つ目(シアン)の横幅を40%、高さを4文字分

で指定すると次のようになります。

HTML

<div style="line-height:1; width: 80%; height: 2em; font-weight: bold; background-color:yellow;">
  あああ
</div>
<div style="line-height:1; width: 40%; height: 4em; font-weight: bold; background-color:#0ff;">
  いいい
</div>

web表示

あああ
いいい

※ブロックに限らずHTMLはすべて左上から詰めて記述することが定められているので、ブロックも左詰めとなります。

ブロック化しておくと便利なのは、それぞれのブロックに背景色を設定できるだけでなく、ブロックごとにレイアウトができるということです。

例としてCSSを使って、1つ目のブロックはそのまま、2つ目のブロックのみセンター配置(文字もセンター)としてみました。ブロックの間も2文字分だけ離してみましょう

HTML

<div style="line-height:1; width: 80%; height: 2em; font-weight: bold; background-color:yellow;">
   あああ
</div>
<div style="margin: 2em auto; text-align: center; line-height:4em; width: 40%; height: 4em; font-weight: bold; background-color:#0ff;">
  いいい
</div>

web表示

あああ
いいい

このようにdivタグそのものは意味を持ちませんが、ブロックを形成することで、いろいろとレイアウトを作り出すことができる、というわけです。

インライン要素とは

spanタグインラインで範囲指定することができ、インライン要素と呼ばれています。

インライン要素の特徴は、ブロック要素の特徴の逆となります。

  • 範囲指定されたコンテンツ分だけ(文字ならばその文字だけ)が指定エリアとなる。
  • サイズを指定できない

コンテンツ分だけの範囲が指定エリアとなる

divの場合と同じく例をあげて説明しましょう。

<span>あああ</span><span>いいい</span>2つ並べて記述してみます。
CSSを使って、1つ目は黄色、2つ目はシアン色で着色しておきましょう。

あああいいい

divで囲んだ場合と違って、それぞれのエリアは文字の部分のみとなり、かつ、自動改行されずに横に並びます

このように、横に並ぶレイアウトとなることからインライン要素と呼ばれているようです。

spanタグは文字装飾によく使われる

このように横に並ぶという特徴を生かして、spanタグは文字の装飾によく使われます

例えば次のように段落要素<p>タグの中にテキストがあったとします。
わかりやすいように段落全体にシアン色をつけておきます。

HTML

<p style="background-color: #0ff;">
  ワードプレスは、世界で最もポピュラーなCMSである
</p>

web表示

ワードプレスは、世界で最もポピュラーなCMSである

これに装飾として、HTMLにspanタグと赤字にするCSSを追加してみましょう。

HTML

<p style="background-color: #0ff;">
  ワードプレスは、
  <span style="color: red;>"世界で最もポピュラーなCMS</span>
  である
</p>

web表示

ワードプレスは、 世界で最もポピュラーなCMS である

このようにspanタグは、文字装飾に非常によく使われます。

コンテンツのまま横に並ぶ”というインライン要素の特徴を活かして、spanタグは文字装飾によく使われる

インライン要素はサイズ指定できない

インライン要素は、ブロック要素と違ってCSSでサイズ指定することができません。仮にwidthやheightプロパティを使ってサイズ指定をしても無視されますので注意しましょう。

どうしてもサイズ指定したい場合は、後述するようにdisplayプロパティでインラインブロック要素に変換する必要があります。

ブロック要素とインライン要素の組み合わせルール

次のルールがあります。

  • ブロック要素の中に別のブロック要素やインライン要素を配置することができる
  • インライン要素の中に別のインライン要素を配置はできるがブロック要素は配置できない

一見ややこしいようですが、普通の使い方をしていれば自然とこうなります。

インライン要素の中にブロック要素を置きたくなるケースなぞほとんどないからです。

基本的なHTMLタグをブロック要素とインライン要素に分類する

以上でdivはブロック要素、spanはインライン要素ということがわかりましたが、他のHTMLタグもどちらかに分類されます。

ブロック要素

 div
 h1h6(見出し)
 p(段落)
 ul,ol,li(リスト)
 hr(水平線)

※表を作成するtable,tr,th,tdもブロック要素に分類されますが、CSS的にはdisplay:table;およびdisplay: table-cell;で表される特別なタグとなります(displayプロパティの働きは後述します)

インライン要素

 span
 a(ハイパーリンク)
 img(画像)
 br(改行)
テキストそのもの

※上記以外にも<b>,<i>,<strong>など文字の装飾に使用されるタグもインライン要素となります。

このように、HTMLタグはブロック要素またはインライン要素のどちらかに分類されます

また、HTMLタグではありませんが、テキスト(文章)そのものもインライン要素である、ということができます。

もし、あれ?このタグってどっちだっけな?と迷ったときは、HTMLタグを2つ並べて記述して表示させればわかりますよね。

自動改行されればブロック要素、2つ横並びになればインライン要素

CSSのdisplayプロパティでブロック要素にもインライン要素にも変換できる

ブロック要素とインライン要素のどちらかに分類されるHTMLタグですが、実はCSSのdisplayプロパティでどちらにも変換が可能です。

CSSのdisplayプロパティで、初期値として次のように定義されているのです。

  • ブロック要素は、display:block; と定義されている
  • インライン要素は、display:inline; と定義されている

なので、それぞれdisplayプロパティを書き換えれば、ブロック要素にもインライン要素にも変換できちゃうんです。

インライン要素→ブロック要素に変換したい場合

インライン要素はCSSでサイズ指定できない、と説明しましたが、インライン要素であってもサイズ指定しなくなるときがあります。

例えば<a>タグは、ハイパーリンクを指定するのに使いますが、同時にボタンナビゲーションメニューのアイテムとして使用することがあります。

そうするとサイズを指定したくなりますよね。

そんなときは、CSSのdisplayプロパティを使ってブロック要素に変換することが可能なんです。

  • display: inline; ・・・インライン要素の初期値
  • display: inline-block; ・・・インラインブロック要素に変換
  • display: block; ・・・ブロック要素に変換

インラインブロック要素とは、インライン要素の特徴コンテンツのまま横に並ぶ)のまま、サイズはブロック要素と同様に指定できる、とインラインとブロックの両方の特徴を備えている要素です。

インラインブロックとするかブロックとするかは、横に並べたいか改行したいか、で決めることが多いですね。

例えばヘッダーナビなんかだと横並びにすることが普通なので、インラインブロックにしておきます。
(実際最近はdisplay:flex; でフレックスボックスにすることが多いのですが・・・。)

あと、text-alignプロパティのようなインライン要素に適用するCSSを使いたい場合もインラインブロックにしたりします。ブロック要素にしてしまうとtext-alignが効かなくなるからです。

ブロック要素→インライン要素に変換したい場合

逆にブロック要素をインライン要素やインラインブロック要素にしたくなることもあります。

例えば、見出しタグ<h1>~<h6>はブロック要素なので、親要素の横幅いっぱいに広がりますが、見出しの装飾によっては横幅いっぱいでなく、文字の部分だけが装飾されて表示されて欲しい、なんてことがあります。

そんなときはdisplay:inline-block;でインラインブロック化すればよいんですね。

このように、インライン要素やブロック要素を他の要素に変換する、なんてことは、ワードプレスでも装飾系レイアウトでは非常によく使うので、覚えておくとよいでしょう。

displayプロパティを使って、インライン要素やブロック要素を他の要素に変換することは、装飾レイアウトでよく使う

まとめ

ブロック要素とインライン要素、そしてその両方の特徴をもったインラインブロック要素についても解説をしてきました。

ブロック要素とインライン要素の違いの理解なしに、Webページのレイアウトを理解することはできません。

それぞれの特徴をよく覚えておきましょう。

  • ブロック要素のエリア範囲は行単位、インライン要素はコンテンツ分だけ
  • ブロック要素は大きさ(サイズ)を指定できるがインライン要素はできない
  • CSSのdisplayプロパティで他の要素へ変換できる
書籍『アラフォー世代~60代までの男女44人が100分でブログを立ち上げたワードプレス習得法!!副業にも応用可能!』

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる