グリッドレイアウトを実際にページにレイアウトするとき、例えば要素を中央に配置するにはどうしたら良いだろう？

従来の方法で中央に配置できないときは、CSS Gridを使って中央に表示させる方法がある。中央に配置したい要素を以下のCSSで囲んであげよう。

.container-center {
  display: grid;
  place-items: center;
}

イメージの上に複数のテキストを配置したい場合、グリッドレイアウトを如何に使うかが問題だ。このページの1stのレイアウトをここで再検証してみよう。まず、グリッドレイアウトのモックアップに取り掛かろう。大体の配置を決めるために頭の中か、もしくは紙にこんな具合の作図を配置してグリッドのラインを決定する。

下図は、グリッドを表示したものだ。このグリッドはテキストを塩梅良く配置するためにある。全範囲を使って背景にイメージを配置し、その上にテキストを配置できるようにした。このエリアは最後に微妙に調節ができるように、「position: absolute;」を使っている。

Chromeデベロッパーツールを利用すると(上の図をクリックして詳細を表示)、チェックが簡単。例えば、grid layout で間違った記述を行っていると取り消し線が表示される。また、html にてグリッドが設定された <section class="rock"> をクリックすると、グリッドラインの表示が現れる。記述が間違っていると、分割されたラインが異なる不具合を確認できる。だから、Chromeデベロッパーツールと睨めっこしながら、いろいろな書き方にチャレンジして、グリッドレイアウトの指定を覚えることに集中することが出来る。これがグリッドレイアウトに慣れ親しむポイントだ。

サイズの指定の単位は px, %, em, vh, vw, mm, cm, in, pt, pc, ch, rem, vmin, vmax など、widthに使えるような長さの単位が使える。

次のページでは、もうひとつ練習してみた。グリッドレイアウトはこんな具合にいくつか作って慣れ親しむことが上達の秘訣だ。

本スライダーは Slider Pro をコンテンツスライダーとして使っている。今回は前回のページからより多角的な角度から使い回してみた。

コンテンツの高さについての設定が不確かだった。 Slider Pro は、元来イメージスライダーであるからイメージの納まりについては言うことが無いのだが。

<div class="content-height">を付けたり、data-heightを付けたりして、高さを設定して試してみた。各スラーダーのページが独自の高さを持つと、他の全てのページの高さに悪影響を及ぼすようなので、この方法は除外した。

Slider Pro のオプションの中で高さについての設定は以下指定ができる。

「autoHeight: true,」や「height: 500,」、「responsive: true,」である。これを付けたり外したりして挙動を確認した。結論は以下のようなオプションに落ち着いた。

<script type="text/javascript">
 $( document ).ready(function( $ ) {
  $( '#example1' ).sliderPro({
   width: 960,
   height: 500,
   autoHeight: true,
   updateHash: true,
   startSlide: 0,
   fadeCaption: true,
   fade: true,
   fadeOutPreviousSlide: true,
   captionFadeDuration: 8000,  
   loop: true,
   orientation: 'horizontal',
   arrows: true,
   buttons: false,
   waitForLayers: true,
   thumbnailsPosition: 'top',
   thumbnailWidth: 200,
   thumbnailHeight: 50,
   thumbnailPointer: true,
   //thumbnailArrows: true,
   autoplay: false,
   autoScaleLayers: false,
   breakpoints: {
    600: {
     orientation: 'horizontal',
     thumbnailsPosition: 'top',
     thumbnailPointer: true,
     thumbnailWidth: 120,
     thumbnailHeight: 50
    }
   }
  });
 });
</script>

アコーディオン

手間取ったのが、アコーディオンを設置したときである。Slider Pro はアコーディオンが閉じた状態での高さをカウントするので、そのままでは高さが足りない部分が非表示になる。解決策は、アコーディオンを設置した下に必要な高さを足すことで取り敢えず何とかなる。しかし、複数のアコーディオンの設置には不向きである。

「Word Break」

「wbr」とは「Word Break」の略で、改行をしてもよい箇所を指定するタグだ。自動的に次の行に文章や英単語、固有名詞などを改行させたくない場合にこのタグを使用する。本篇ではイメージをバックにした題字に使った。