definition-verified-gridlayout

INTRODUCTION

Intersection Observer

Menu を sticky して Smooth Scrolling

scroll-behavior は CSS のプロパティで、ナビゲーションや CSSOM(CSS Object Model) のスクローリング API によってスクロールするボックスにスクロールが発生した際の、そのスクロールの振る舞いを設定する。以下はルート要素に指定した例である。

html {
  scroll-behavior: smooth;
}

このプロパティがルート要素(<html> は HTML 要素で、 HTML 文書においてルート (基点) となる要素 (最上位要素) であり、ルート要素とも呼ばれる。)に指定された場合は、代わりにビューポートに適用される。このプロパティが body 要素に指定された場合は、ビューポートには適用されない。他のすべての要素は、この要素の子孫として配置しなければならない。

これからの定義語句・説明

定義句や文の文脈の中で定義している用語を示すために用いられる。<dfn> の直近の祖先である <p> 要素、 <dt>/<dd> の組み合わせ、 <section> 要素が用語の定義とみなさる。

そこで、以下のようなデザイン・レイアウトを施してみた。

Are U experienced?

これは、私のウェブ制作者としての Portfolio (ポートフォリオ)のタイトルです。
クリエイターとして実用的アイデアや必要不可欠のスキルを駆使したライブラリーです。

<dl style="display: -webkit-flex; display: -moz-flex; display: flex;flex-wrap: wrap; align-items: stretch; width: 100%; border: 3px solid #3371c1; border-radius: 6px; background-color: #f7f7f7;">
<!-- dlタグ直下にdivタグが使用できる -->
  <dt style="margin: 0; padding: .5em 1em; font-weight: bold; background-color: #c9dfec; border-top-left-radius: 3px;">
  <dfn style="display: block; font-style: normal;">Are U experienced?
  </dfn>
  </dt>
  <dd style="margin: 0; padding: 0; padding-top: .5em; padding-bottom: .5em;">
    <ul style="list-style: circle; padding:0 16px;">
      <li>これは、私の ウェブ制作者としての Portfolio (ポートフォリオ)のタイトルです。</li>
      <li>クリエイターとして実用的アイデアや必要不可欠のスキルを駆使したライブラリーです。</li>
    </ul>
  </dd>
</dl>

略語と定義の両方を使用した書き方

The IAEA

<p>The <dfn><abbr title="International Atomic Energy Agency">IAEA</abbr></dfn>

HATWG HTML では、<dl> 要素内でそれそれの名前と値のグループを、<div> 要素でまとめることができる。これはスタイルを設定するために大いに役立つ。

〈Type A〉

Firefox
Mozilla Firefox: Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。

read more ...

<dl class="definition-list">
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dd>
    <div class="div1">A free, open source, cross-platform,
graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.
    </div>
    <div class="div2">read more ...
    </div>
  </dd>
</dl>

〈Type B〉display: inline-grid; を使った例

Firefox
Mozilla-Firefox: Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。

<dl style="display: inline-grid; grid-template-columns: 3fr 7fr; grid-auto-rows: auto; width: 100%; margin: 0 auto; padding: 0;">
  <div style="padding: 12px; margin: 3px; font-size: 16px; background-color: #daf5b8;">  
    <dt style="font-size: 16px; background-color: #daf5b8; padding: 0; margin: 0;">Firefox</dt>
    <dt style="font-size: 16px; background-color: #daf5b8; padding: 0; margin: 0;">Mozilla-Firefox</dt>
  </div>
  <div style="padding: 6px; margin: 3px; font-size: 16px; background-color: #f7f7f7;">
    <dd>
    Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。
    </dd>
  </div>
</dl>

用語 <dt> (definition term)と説明 <dd> (definition description)を<dl>(definition list) で囲んで、説明リストを表す。

CSS グリッドレイアウト

grid-template-columns および grid-template-rows、grid-template-areas でつくられたグリッドセルが明示的なグリッドセル（グリッド格子）と呼ばれる。

.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 100%;
}

暗黙的グリッドを追加

制作の過程でグリッドアイテムを追加する。このとき、暗黙のグリッドで自動的に作成される行の既定値は、大きさが自動になっている。しかし、以下のように grid-auto-rows プロパティを事前に定義しておくと、新しく生成される行の高さや既存の行の高さを制御することができる。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: 15%;
  height: 100%;
}

この関数は CSS グリッドのプロパティである grid-template-columns と grid-template-rows の中で使うことができる。

次の例では、はじめに 20px のトラックを持ち、続けて 6 つの 1fr トラックのセクション、最後に 20px のトラックを持つグリッドを作成する。

repeat()

.wrapper {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr) 20px;
}

繰り返し記法はトラック列挙も取るので、トラック列挙の繰り返しパターンの作成にも利用できる。この次の例で、グリッドは10 のトラックで構成されており、それは1fr トラックに 2fr トラックが続くパターンを5回繰り返したものだ。

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

auto-fit

一列に並ぶ数を限定せず、画面の幅に合わせてボックスを折り返して次の行に表示させていきたい。そんな時は繰り返しの数値の部分を「auto-fit」にする。auto-fit を使えばボックスを折り返しながら親要素の余ったスペースを埋めていくことができる。親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められる。

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

関連ページ
グリッドレイアウトを極める２

アイテムを配置する方法は二通りある。ライン番号で指定する方法とエリアに名前を付けて指定する。

ライン番号で指定

/* コンテナ */
#container {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 150px 1fr;
}
/* アイテム */
  #item {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

エリアで指定

/* コンテナ */
#container {
  display: grid;
  grid-template-areas:
    "areaA areaB"
    "areaA areaC";
}
/* アイテム */
#itemA {
  grid-area: areaA;
  background: #fecb2f;;
}

関連ページ
グリッドレイアウトを極める３

文章は中央に固定幅、画像は幅いっぱいに表示するフルブリードレイアウトをグリッドレイアウトで実装するテクニック。利用可能なスペースを占める柔軟な単位であるfrを左右に配置する

フルブリード DEMO

.wrapper {
  display: grid;
  grid-template-columns:
    1fr
    min(40ch, 100%)
    1fr;
}

グリッドレイアウトでレスポンシブを考えると、テキストの扱いが一番問題になる。特にモバイルを想定すると、テキストが収まりきらずに溢れてしまう現象に遭遇する。だから、極端にモバイルだけは、グリッドレイアウト自体を別のレイアウトで組むことがある。以下のサンプルがそうだ。

ここでひとつの解決策となるキーワードがある。「min-content」は大きさのキーワードで、「width: min-content;」というふうに使うことができ、コンテンツの内在的な最小幅を表す。テキストコンテンツの場合は、コンテンツがすべてのソフトラッピングの機会を使用した場合に、最も長い単語と同じくらい小さくなることを意味する。

グリッドレイアウトを極めるサンプル

height: min-content;

フォントサイズが最小10pxのせいで、レイアウトが簡単に崩れてしまい、モバイルだけ違うレイアウトにしたという経験があるだろう。しかし、10px以下のフォントサイズが表示できないChromeでもCSSで対応できる方法がある。 transform を使って縮小できる。以下は補足説明である。

online

off

6.5(水)～6.23(日)

10,800円(税込)以上の購入で

scale()関数では、2つの数値で 2D 縮尺比率を指定する。 1つ目の数値はX方向、2つ目の数値はY方向の比率。 2つ目の数値は省略することができる。→transform: scale(0.8,0.8);

.tiny{
  display:block;
  font-size: 10px;
  transform: scale(0.8);
  transform-origin:0 0;
}

グリッドレイアウトを極める１６

グリッドレイアウトでは縦方向と横方向の比率が問題になる。分かりやすいのは正方形のグリッドラインが背面にあれば位置決定の強烈な手助けになる。

グリッドアイテムに aspect-ratio: 1 / 1; を設定することで、正方形のグリッドアイテムが出来上がる。

#item {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  aspect-ratio: 1 / 1;
}

関連情報: グリッドレイアウトを極める１３

minmax() を使用したサイズの指定

コンテンツの最低限の高さを設定する例

minmax() を grid-auto-rows の値に使用すると、最小サイズでありながら、コンテンツの高さに合わせて成長する行を作成することができる。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

幅の下限と上限を設定した例

minmax()を使用して、幅が200pxから300pxまでの限度のサイズを指定する。

.grid {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr 1fr;
}

パーセンテージの例

グリッドの最大50％を占めるが、300pxより小さくならないようにしたい場合。

.grid {
  display: grid;
  grid-template-columns: minmax(300px, 50%) 1fr 1fr;
}

minmax()

minmax()を使用するのが便利なレイアウトがたくさんある。その中で Media Queries 無しでレスポンシブデザインができるというのがある。

.grid {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

関連情報: Media Queries無しでレスポンシブデザイン

repeat()

repeat() 記法は CSS の関数で、トラック列挙のすべてまたは一部を繰り返し、列や行の繰り返しをよりコンパクトに書くことができる。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: 1fr 1fr 1fr; と同義 */
}

auto-fit

例えば、「子要素が200px以上になることを前提に、入るだけ横に並べる」を実現できる。

.grid: repeat(auto-fit, minmax(200px, 1fr));

fr を上手く使うワザ

「grid-template-rows」に「fr」を定義すると、グリッドの高さが変化すると行も変化し、グリッドの応答性が向上する。

ページの全レイアウトに「grid-template-rows: min-content 1fr min-content;」を定義してみる。

「height: 100vh」より「min-content」と「min-content」のコンテンツ内容の高さを引いたサイズが「1fr」に割り当てられる。「min-content」+「min-content」+「1fr」の合計が「100vh」のとき、実際のコンテンツの高さに依存することなく、この割り当てられたサイズを保つ。このときフッターは画面下部に張り付くように配置される。割り当てられたサイズを越えて「100vh」を越えるとき「overflow: auto;」を定義すれば、高さはコンテンツのサイズへ伸張する。

grid-template-rows: min-content 1fr min-content;

フレックスボックスのプロパティ

コンテナにて定義する

Flexboxレイアウトの基本的な書き方は、Flexコンテナと呼ばれる親要素の中に、Flexアイテムと呼ばれる子要素を入れる。親要素に「display: flex;」を入れると完了である。

このように、要素を簡単に横並びにしたいときに使われることが多い。要素と要素の空白、配置を定義するプロパティを加えてバランスを調整していく。

<div style="display: flex;">
  <div class="cercle">1</div>
  <div class="cercle">2</div>
  <div class="cercle">3</div>
  <div class="cercle">4</div>
  <div class="cercle">5</div>
</div>

gap は CSS のプロパティで、行や列の間のすき間 (溝) を定義する。これは row-gap および column-gap の一括指定である。このプロパティは <"row-gap"> の値と、任意で <"column-gap"> の値を続けて指定します。 <"column-gap"> が省略された場合、 <"row-gap"> と同じ値が設定される。フレックスレイアウトの場合、以下のように使う。

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

(例) .container { justify-content: flex-end; }

flex-start(初期値)

flex-end

center

space-between

space-around


  /*justify-content: center;      アイテムを中央に寄せる */
  /*justify-content: start;       アイテムを先頭に寄せる */
  /*justify-content: end;         アイテムを末尾に寄せる */
  /*justify-content: flex-start;  フレックスアイテムを先頭に寄せる */
  /*justify-content: flex-end;    フレックスアイテムを末尾に寄せる */
  /*justify-content: left;        アイテムを左端に寄せる */
  /*justify-content: right;       アイテムを右端に寄せる */
  /* 均等配置 */
  /*justify-content: space-between;  各アイテムを均等に配置し
                                     最初のアイテムは先頭に寄せ、
                                     最後のアイテムは末尾に寄せる */
  /*justify-content: space-around;   各アイテムを均等に配置し
                                     各アイテムの両側に半分の大きさの
                                     間隔を置く */
  /*justify-content: space-evenly;   各アイテムを均等に配置し
                                     各アイテムの周りに同じ大きさの間隔を置く */
  /*justify-content: stretch;        各アイテムを均等に配置し
                                     サイズが 'auto' であるアイテムは、
                                     コンテナーに合わせて引き伸ばす */

align-content と justify-content の一括指定。最初の値は align-content プロパティの値で、2 番目の値は justify-content の値である。

(例) .container { place-content: center start; }

center start


  /* 位置による配置 */
  /* align-content は left および right の値を取らない 
  place-content: center start;
  place-content: start center;
  place-content: end left;
  place-content: flex-start center;
  place-content: flex-end center; */

  /* ベースラインによる配置 */
  /* justify-content は baseline の値を取らない
  place-content: baseline center;
  place-content: first baseline space-evenly;
  place-content: last baseline right;*/

  /* 均等配置 */
  /*place-content: space-between space-evenly;
  place-content: space-around space-evenly;
  place-content: space-evenly stretch;
  place-content: stretch space-evenly; */

アイテムにて定義する

flex プロパティは、フレックスアイテムの幅をまとめて指定するショートハンドである。フレックスアイテムをフレックスコンテナの領域に収めるために、 [flex-grow]、[flex-shrink]、[flex-basis] をまとめて指定する。

flex-grow:
伸び率
デフォルト 0

フレックスコンテナの主軸の幅に余白がある場合の、フレックスアイテムの伸び率を指定する。

flex-shrink:
縮み率
デフォルト 1

すべてのフレックスアイテムの幅の合計がフレックスコンテナの主軸の幅よりも大きい場合の、フレックスアイテムの縮み率を指定する。

flex-basis:
基本の幅
デフォルト auto

フレックスアイテムの基本の幅を指定する。

(例) .item-1 { flex: 0 1 30%; }

(例) .item1 { align-self: flex-end; }

(例) .item-1 { align-self: auto; } .item-2 { align-self: auto; } .item-3 { align-self: auto; }

(例) .item-3 { align-self: flex-start; }

(例) .item-3 { align-self: center; }

(例) .item-2 { align-self: stretch; }

(例) .item-2 { align-self: baseline; }

上述の 3つのプロパティの値を指定する代わりに、以下のキーワードを指定することも可能である。

initial

「0 1 auto」と同じ。主軸の幅に余白があってもフレックスアイテムの幅は伸びない。主軸の幅が小さいときは縮む。

auto

「1 1 auto」と同じ。主軸の幅に余白があるとき、フレックスアイテムの幅は伸びる。主軸の幅が小さいときは縮む。

none

0 0 auto」と同じ。フレックスアイテムの幅は伸縮しない。


/* 単位がない数値を 1 つ指定: flex-grow
flex: 2;  */

/* 幅または高さを 1 つ指定: flex-basis 
flex: 10em;
flex: 30%;
flex: min-content; */

/* 値を 2 つ指定: flex-grow | flex-basis 
flex: 1 30px; */

/* 値を 2 つ指定: flex-grow | flex-shrink 
flex: 2 2; */

/* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis
flex: 2 2 10%; */

フレックスレイアウト使用例

このセクションでは、まず「説明リスト」を記述する。この説明リストをフレックスボックスを使ってレイアウトしてみる。

<dl>
  <dt>用語</dt>
  <dd>用語に対する説明</dd>
</dl>

上の html を参考にして用語と説明を記述する。各領域を分かりやすく背景色を付けてみよう。

Firefox: Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。

上のレイアウトをフレックスボックスを使って横並びにする。説明リストを包括する <dl> にコンテナを指定して、<dt> と <dd> をアイテムとする。アイテムに flex: <number>(幅の割合) を指定する。

Firefox: Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。

<dl style="display: flex; flex-direction: row; ">
  <dt style=" flex: 1; margin: 4px; background: #daf5b8; padding: 16px;">
  Firefox
  </dt>
  <dd style="flex: 4; margin: 4px; background: #f5f5f5; padding: 16px;">
  Mozilla Corporation と数百人のボランティアによって開発された、無料のオープンソース、クロスプラットフォームのグラフィカル Web ブラウザー。
  </dd>
</dl>

flex-direction は CSS のプロパティで、主軸の方向や向き (通常または逆方向) を定義することにより、フレックスコンテナー内でフレックスアイテムを配置する方法を設定する。

テキストを覆う <div> に display: flex; flex-direction: row-reverse; を設定すると右寄せが実行される。

div#flex-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

このセクションでは、PC では横に並ぶ段落がモバイルでは縦一列に並ぶ、というのはお馴染みの手法である。これをフレックスボックスレイアウトでやる。PC でブラウザを開いている場合は、ブラウザの幅を狭めると確かめることができる。モバイルでは横と縦の表示で確認できる。

メディアクエリーを使って、「flex-direction: row;」を「flex-direction: column;」へ変更するだけである。

.main-column {
  display: flex;
  flex-directhion: row;     /* デフォルト */
}

@media screen and (max-width: 700px) {
  .main-column {
    flex-direction: column; /* モバイル */
  }
}

各カードの中身の量が異なる場合、カードはグリッド領域やフレックスコンテナーの高さに引き伸ばされる。そして、カードの内部では通常のブロックレイアウトが用いられる。つまり、中身の量が少ないカードでは、カードのフッターはカードの下端に張り付くのではなく、フッターが下端から浮き上がってしまう。

フレックスボックスはこれを解決できる。カード自身もフレックスコンテナにして、flex-direction: column を指定する。そしてカードの本文領域に flex: 1 を指定する。これは flex: 1 1 0 の一括指定だ。アイテムは 0 の flex-basis をもとに伸縮します。引き伸ばせるフレックスアイテムが本文領域だけの場合、本文領域はフレックスコンテナ内の空間をすべて取り込み、フッターを下端に張り付かせる。 flex プロパティを削除すると、フッターが本文の真下に移動するのを確認できる。

This card doesn't have much content.

This card has a lot more content which means that it defines the height of the container the cards are in. I've laid the cards out using grid layout, so the cards themselves will stretch to the same height.

<div class="card">
  <div class="content">
    <p>This card has … to the same height.</p>
  </div>
  <footer style="background-color: #ddeeb3; border-top: #dfdfdf 1px solid; padding: 10px;">Card footer</footer>
</div>

.card {
  display: flex;
  flex-direction: column;
}

.card .content {
  flex: 1 1 0;
  padding: 10px;
}

viewport

Googleは、現時点でこちらの記述を推奨している。

<head>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
</head>

応急措置として、下記のように特定の幅に設定する方法もある。表示がうまくいかない時などには有効ですが、こちらはGoogle非推奨の方法である。

<head>
<meta name="viewport" content="width=320">
</head>

モバイルデバイスでは、viewport 指定を省略した場合、デフォルトの width 値内に収まるように表示される。デフォルトのwidth値）は 980px である。

Intersection Observer でビューポートを検知し、Sticky を使った索引項目が連動。Modal で詳細な解説を表示する Navi

INTRODUCTION

Intersection Observer

Menu を sticky して Smooth Scrolling

これからの定義語句・説明

CSS グリッドレイアウト

minmax() を使用したサイズの指定

fr を上手く使うワザ

フレックスボックスのプロパティ

コンテナにて定義する

アイテムにて定義する

フレックスレイアウト使用例

Links

Intersection Observer でビューポートを検知し、Sticky を使った索引項目が連動。Modal で詳細な解説を表示する Navi

INTRODUCTION

Intersection Observer

Menu を sticky して Smooth Scrolling

モーダルのフルスクリーンにて解説する

これからの定義語句・説明

CSS グリッドレイアウト

minmax() を使用したサイズの指定

fr を上手く使うワザ

フレックスボックスのプロパティ

コンテナにて定義する

アイテムにて定義する

フレックスレイアウト使用例

Links