こんにちは。雪国生まれ雪国育ちのヨシミです。
ウォーターサーバの水替えとCSSのコーディングで、スマホサイトを美しくするのが主な仕事です。

これからefoナビで入力フォームだけでなく、サイト全体をキレイにするお話ができればと思います。

それは、新米の私がまだ稲の中にいて、新米になる直前だった頃のこと。

CSSでページをデザイン中「なんだコレ…、全然言うことを聞かんぞ!」という場合、多くは要素のdisplay(表示)形式が原因でした。

それぞれの表示形式の違いと特徴

例えば、「この上に余白をつけたい。よし、margin-topを入れてみよう」とコードを書いてみても、思うようにいかず上に余白ができない。

それは<span>で囲まれたインライン要素だったことが原因でした。当時(今も時々ですが)はこういったことで度々悩み、時間を取られていました。

要素の表示形式は大きく分けて2つあります。
「ブロックレベル要素」と「インライン要素」です。この仕組みと違いを理解した時、やっと玄米になれた気がしました。

それではまず2つの特徴から。

・ブロックレベル要素

見出しや段落など改行を伴う要素です。特に何も指定しなければ、画面の幅一杯が領域となります。ブロックレベル要素の中には別のブロックレベル要素とインライン要素を含むことができます。

要素例)
div , table , ul , p , form , h1-h6 などです。

・インライン要素

主にブロックレベル要素内の特定の部分に、何らかの役割や機能を持たせる要素です。インライン要素の中に別のインライン要素を含むことはできますが、ブロックレベル要素を含むことはできません。タグで囲まれた部分が領域となります。

要素例)
a , b , strong , span , label , small などがそれにあたります。

それでは下図に2つの要素の違いを記載しておりますのでご覧ください。

インライン要素 ブロックレベル要素
margin 左右は効く、上下は効かない 上下左右効く
padding 左右は効く、上下はボーダーの位置に影響 上下左右効く
width 効かない 効く
height 効かない 効く
改行 しない する

便利な表示形式

実は「ブロックレベル要素」と「インライン要素」の良い所を合わせたような、便利な表示形式もあるんです。そう、インラインブロック要素(置換インライン要素)です。

ブロックレベル要素のように幅・高さが指定でき、それでいてインライン要素のように要素を横並びにもできたりするんです。横並びのグローバルメニューなどを作る時に便利な表示形式です。

要素例)
img , input , select , button

先ほど紹介した図に「インラインブロック要素(置換インライン要素)」を追記しましたのでご覧ください。

インライン要素 ブロックレベル要素 インラインブロック要素
margin 左右は効く、上下は効かない 上下左右効く 上下左右効く
padding 左右は効く、上下はボーダーの位置に影響 上下左右効く 上下左右効く
width 効かない 効く 効く
height 効かない 効く 効く
改行 しない する しない

数ある要素を使いこなして、晴れて新米に

各要素には、あらかじめ決められたデフォルトの表示形式があります。これらを理解し、表現したいレイアウトに合わせてdisplayプロパティの値を変えられるようになってから、さらにコーディングがスムーズにできるようになりました。

「行き詰ったらdisplayの値を確認」というのは、この仕事に就いて自分なりに見つけた教訓です。籾(もみ)だった私もこの教訓を見つけてから、やっと新米になれたような気がします。

まだまだ新米ですが、炊き立ての「つや姫」のように美しいコードでサイトをデザインしようと鋭意努力中です。

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Jeremy Keith