スポンサードリンク

ブロックレベル要素とインライン要素の違いは?基礎的な画像や文章を思い通りにする方法

ブロックレベル要素とインライン要素の違いは?基礎的な画像や文章を思い通りにする方法
変なところで改行される
内容がはみ出したり、おかしな所に色がついてしまったりする。

困りますね。ほっとくと、閲覧者に迷惑がかかります。
きちん伝えられないと、ホームページとして意味がなくなってしまいます。

業者に依頼する前に、自分でなんとかできないものか?
そう考えませんか?

ちょっとした基礎を抑えることで、もしかしたら、意外に簡単に修正できるかもしれません。

デザインが崩れる理由

ブロックレベル要素とインライン要素の違いは?基礎的な画像や文章を思い通りにする方法ホームページを制作する上で、この概念を抑えておかないと、何故壊れてしまうのかわかりづらくなります。
htmlの要素と呼ばれるタグには、2種類あります。

それが、
ブロックレベル要素とインライン要素です。

ブロックレベル要素は、その名の通り、四角で囲まれる要素という意味です。
インライン要素は、その名の通り、文中にある要素という意味です。

例えばこんな感じです。

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

オレンジで表現されているブロックレベルの要素の中に、ブルーで表現されているインライン要素が含まれています。

ブロックレベル要素の例

インライン要素の例

見たことがあるタグがあるかもしれません。
覚えるのが大変!と感じるかもしれません。ブロックレベル要素の方が多いので、そちらをまずは、覚えてしまいましょう。

ブロックレベル要素の中にブロックレベル要素を配置したり、インライン要素の中に、インライン要素を配置したりすることもできます。

ブロックレベル要素の中に、ブロックレベル要素を配置する例

インライン要素の中に、インライン要素を配置する例

ブロックレベル要素は、情報を一つのかたまりとしてまとめます。
ホームページを制作するということは、情報を整理するということです。
どのようにブロックレベルを構成するのか?をまず最初に考える必要があります。

要素の種類を変更できるCSS

ブロックレベル要素とインライン要素の違いは?基礎的な画像や文章を思い通りにする方法

ここからが少し厄介になるかもしれません。
実は、CSSを使うと、ブロックレベル要素をインライン要素に、インライン要素をブロックレベル要素に変化させることができます。

おかしな所で改行がされる。というのは、ほとんどの理由は、この部分にあると思っていいかもしれません。
インライン要素にブロックレベル要素への変換のCSSが設定されていると、横幅いっぱいに要素が広がり、次のテキストが自動的に改行されてしまいます。

先ほどの例です。

この部分にブロックレベル要素に変化させる設定を加えます。

この部分に、display:block;を記載します。

するとこうなりますね。

表示はこのように変化します。

サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル

水色のサンプルの文字が、ブロックレベル要素に変換されます。そのため、勝手に改行されてしまうように見えますね。

CSSにて、要素を変化させる設定は、displayを使用します。

ここでは、あまり難しい設定を覚えようとすると混乱するので、下記3つのみ覚えておいて下さい。

CSSをきちんと覚えると、デザインの修正が非常に楽になります。すべてのページを一つの設定でコントロールできるからです。
これまで書き溜めた内容を一瞬にしてさらに読みやすく設定し直すことも可能になります。きちんと伝えるため、このCSS設定の概念を押させておくと良いでしょう。
Pocket
LinkedIn にシェア


スポンサードリンク