Dressを使って「目指せ、装飾王への道・2」。ナビゲーションと共に。

CSSとDressの関係性を理解して装飾王(Dressマスター)にあなたは成れるか。シリーズ2作目。1作目を踏まえてナビゲーションを攻略したいと思います。

11428

シリーズ2作目。前回はCSSとDressの本質の解説でしたが、
今回はそれを踏まえてよくあるお問い合わせに対する解決と解説を行います。

それでは早速、今回のゴールはこちら。

  • モーションメニュー(ラインチェイサー、ラバランプ、ドロップダウン・バルーン)を中央寄せする

Before

11428_10

After

11428_11

通常ラインチェイサーの配置は左寄せ(左画像)。Dressで中央寄せにしたものが右画像。ラバランプ、ドロップダウン・バルーンはデフォルトで左寄せのメニューしかない。

非常によくお問い合わせ頂いております・・・。

結論

結論からいうとこの2(3)箇所で解決します。

11428_01
画像はラインチェイサー。ラバランプ、ドロップダウン・バルーン(要調整)も同様に設定ができます。

意外と簡単です。

各設定項目について

それでは詳しく解説します。

  • 文字揃え/ヨコ位置:center
  • 表示(display):center
  • フロート(float):none

文字揃え/ヨコ位置:center

これは読んで字のごとくです。文字を中央寄せ(center)にします。編集画面の中央寄せと同じです。

11428_02

では、なぜ編集画面の中央寄せでメニューが中央に寄らなかったかというと理由は2つあり、
1つは下記のフロート、もう1つはHTML要素の性質にあります。


表示(display)

「表示」となっていますが、実際にはHTML要素の性質を設定する項目になります。
今回のキーワード。詳しくは下記で解説。


フロート(float):none

これもある意味文字揃えのようなものです。(厳密には違います
centerはありませんが、leftとrightがあり、モーションメニューでは標準でleftになっており(そのため左寄せになっている)、ここではその設定を打ち消すようにしています。
なぜ打ち消す必要があるのか詳しくは下記で解説。

HTML要素の性質(表示:display)について

HTMLの要素は大きく分けて2つの性質があります。

  • inline要素:いわゆる文字の要素。改行しないと縦に積み重なることはない。
  • block要素:いわゆる箱の要素。中身に関係なく横いっぱいに広がるので2つ目以降は勝手に縦に積み重なる。

言葉だけだと分かりにくいと思いますので、見た目で確認。
同じ本文で設定を変えてみました。違いをわかりやすくするためにボーダー(下:グレー)を設定しています。

inline要素

11428_04
「a」、「span」など
inline要素が2つ以上続くと、図の通り、通常の文字のように要素同士が続けて横並びになります。

block要素

11428_03
「div」、「h1〜」、「p」、「ul・li」など
block要素が2つ以上続くと、1つの要素で横幅いっぱいに使ってしまうため、2つ目以降は下にズレる形になる。

2つの性質の中間。inline-block要素

11428_05

今回の設定はこちら、字のごとくinline要素とblock要素の2つの性質を持ちます。
要素は1つのまとまりであり、かつ連続すると文字のように横並びになります。


ここの設定だけで見た目が随分変化するものです。

ナビゲーションの構造と中央寄せ

以上を踏まえてナビゲーションの話に戻ると、「block要素そのものは中央に寄せることができない」ということです。
block要素は横幅いっぱい使っているのだから、右も左も中央もないのは当然といえば当然です。
なのでただの文字揃えではナビゲーションも変化しません。

文字揃えとは

そもそも「文字揃え」とはどこに適用されるのか?
これを把握することも解決への糸口の1つでもあります。

ではその適用範囲ですが、設定した要素の中身を揃えることができます。

11428_06
中身の要素を文字揃えしたいときは、それを囲む親要素に設定する必要がある。block要素は幅いっぱいなので動きようがないが、inlineまたはinline-block要素は文字揃えの影響を受ける

ナビゲーションの構造

ナビゲーションは複数の要素で複雑に構成されています。
通常だとナビゲーションの1つ1つ(li)はblock要素なので、ナビゲーション(ul)に文字揃えを設定しても思ったような動作にはなりませんが、
ナビゲーションの1つ1つ(li)をinline-block要素にすることで、文字揃えの設定が反映され、解決できるということです。

11428_07
斜線部はinlineまたはinline-block要素

フロート(float)の存在

最後にフロートについて。
今回こちらの設定を打ち消していますが、その理由は「文字揃え」の影響が無視されてしまうからです。
というより「文字揃え」は適用した中身に影響があるのに対し、こちらは適応した要素そのものに影響があります。

下図は、block要素でかつfloat:leftの状態です。

11428_09
block要素なのに、見た目はinline-block要素のようになる(でも「文字揃え」は効かない)

検証モードを利用する

シリーズ1回目でブラウザの検証モードについて触れましたが、これを利用すると、今要素にどんな設定が適用されているのかわかるようになります。
わざわざフロートの設定を上書きしたのも、ここでフロートの存在を発見していたからです。
11428_08
画像のブラウザはChrome。

まとめ

前回に続き濃く・長い内容となりました。
内容がなんだかよくわからなかった、という方も多いかと思いますが、その時は序盤の設定だけやっていただければと思います。

  • モーションメニューのカスタマイズはDressで行う
  • Dressをマスターするには、HTML要素の性質を理解する
  • ブラウザの検証モードでHTML構造と設定を確認

関連記事