WebサイトのコーディングはもうHTML5とCSS3で行うようになってから随分と装飾やレイアウトが楽になってきました。
よほど無茶ぶりがなければある程度はスムーズに構築できるようになってきましたね。
今回対応するときに悩んだCSSを一つ紹介します。
良くあるのはナビゲーションで1行と2行のメニュー名があり、中央揃えにして見え方をすっきりさせたいとのこと。
確かにテキストは何もしなければ1行と2行は頭が揃った状態で、2行の高さ分段差が出来て見え方はあまり良く見えないですよね。
昔からある方法としてはheightを設定し、displayでtableとtable-cellを使い、vertical-alignでmiddleを設定して中央揃えにするという方法が多かったと思います。
CSS3が出てきてからはdisplayでflexに設定し、様々な方法で楽に中央揃えできるようになりました。この場合、heightを設定しなくても、一番高さがあるグリッドを基準としてその他のグリッドも中央揃えするという良さがありました。
今回のお話は、headerタグ内に入力したテキストがレスポンシブにより行数が変化しても中央揃えにしたいというお話です。
背景などを設定した場合は、そのデザインのサイズに合わせるようheightを合わせることがあると思います。そうすると、2行になった場合、デザインから下にはみ出てしまうことが良くありました。
displayでtableやgirdを設定して中央揃え仕様にする場合、親と子の仕組みが必要となります。これを採用する場合、headerタグの内外に何かしらのタグを入れて親子関係のコーディングをする必要があります。
headerタグ一つで出来ないものなのか？と調べてみました。
すると、以下の設定で行えました。
display: grid;
place-items: center start;ポイントは「place-items」でした。
グリッドは子要素を揃えるものだそうで、例えばheaderにdisplay:gridを与えると、テキストは子要素として認識され、place-itemsでその子要素と認識されたテキストの表示位置を指定できるようになるという事らしいです。
place-itemsの値は第1が縦位置、第2が横位置なんだそう。
つまり、今回はcenterとstartで縦中央揃え、横左揃えという設定になります。
headerにheight設定は必要となりますが、これによりレスポンシブで長めのタイトルが2行になっても縦中央揃えでheaderからはみ出にくくなるという仕様になります。とても便利！