DD_log / HTML,CSS,Javascript,Wordpressの解説や雑感サイト

display:grid (グリッドレイアウト)

displayプロパティの値にgridを指定することで行と列によるレイアウトが実装できます。（テーブルをCSSで作成するイメージ）
グリッド上の２本の線の間の空間をトラックと呼びます。（テーブルで言うところのセル）

grid-template-columns : 幅(列の数だけ値を記述する)

列トラックのサイズを定義できるプロパティ

htmlの記述

<div class="wrap">
 <p class="box box1">ボックス１</p>
 <p class="box box2">ボックス２</p>
 <p class="box box3">ボックス３</p>
 <p class="box box4">ボックス４</p>
 <p class="box box5">ボックス５</p>
 </div>

cssの記述

*{
 margin:0;
 padding:0;
 /*初期余白リセット*/
 }
 .wrap{
 width:450px;
 display:grid;
 background:#ccc;
 grid-template-columns: 150px 150px 150px
 }
 .box{
 border:1px #333 solid
 }

デモ

fr (伸縮可能な単位)

グリッド全体は親要素に対して目一杯の範囲を持ち、指定した値の分数で列数やトラックの幅を表す。

・grid-template-columns: 1fr 1fr 1fr
1 + 1 + 1 =  3が列数になり、それぞれのトラックの幅は1/3となる

・grid-template-columns: 2fr 1fr 1fr
2 + 1 + 1 =  4が列数になり、それぞれのトラックの幅は最初の列が2/4、後の２列は1/4となる

repeat記法 (列の数が多くなる場合に使用)

・grid-template-columns: 1fr 1fr 1fr 1fr 1fr
は
・grid-template-columns: repeat(5,1fr)で表すことができる

grid-auto-rows : 値

トラックの高さを指定

htmlの記述

<div class="wrap">
 <p class="box box1">ボックス１</p>
 <p class="box box2">ボックス２</p>
 <p class="box box3">ボックス３</p>
 <p class="box box4">ボックス４</p>
 <p class="box box5">ボックス５</p>
 </div>

cssの記述

*{
 margin:0;
 padding:0;
 /*初期余白リセット*/
 }
 .wrap{
 width:450px;
 display:grid;
 background:#ccc;
 grid-template-columns: 150px 150px 150px;
 grid-auto-rows: 200px
 }
 .box{
 border:1px #333 solid
 }

デモ

トラックの領域

グリッドによるトラックの領域は列と行を線の位置で指定することができる

1のトラックの範囲は列の線の開始位置が1・終了位置が2、行の線の開始位置が1・終了位置が2と言う状態（初期の状態）

htmlの記述

<div class="wrap">
 <p class="box box1">ボックス１</p>
 <p class="box box2">ボックス２</p>
 <p class="box box3">ボックス３</p>
 <p class="box box4">ボックス４</p>
 <p class="box box5">ボックス５</p>
 <p class="box box6">ボックス６</p>
 <p class="box box7">ボックス７</p>
 <p class="box box8">ボックス８</p>
 <p class="box box9">ボックス９</p>
 <p class="box box10">ボックス１０</p>
 </div>

cssの記述

*{
margin:0;
padding:0;
/*初期余白リセット*/
}
.wrap{
width:800px;
display:grid;
background:#ccc;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 150px
}
.box{
border:1px #333 dashed
}
.box1{
background: #f00;
}

デモ

下記の記述で上の図のように列の線の開始位置が1・終了位置が2、行の線の開始位置が1・終了位置が3と言う状態に変更することができる

htmlの記述

<div class="wrap">
<p class="box box1">ボックス１</p>
<p class="box box2">ボックス２</p>
<p class="box box3">ボックス３</p>
<p class="box box4">ボックス４</p>
<p class="box box5">ボックス５</p>
<p class="box box6">ボックス６</p>
<p class="box box7">ボックス７</p>
<p class="box box8">ボックス８</p>
<p class="box box9">ボックス９</p>
<p class="box box10">ボックス１０</p>
</div>

cssの記述

*{
margin:0;
padding:0;
/*初期余白リセット*/
}
.wrap{
width:800px;
display:grid;
background:#ccc;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 150px
}
.box{
border:1px #333 dashed
}
.box1{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
background: #f00;
}

デモ

grid-column-start: 数値

列の開始位置（線の位置）を指定

grid-column-end: 数値

列の終了位置（線の位置）を指定

grid-row-start: 数値

行の開始位置（線の位置）を指定

grid-row-end: 3

行の終了位置（線の位置）を指定

animation: アニメーションの設定をまとめて記述

animation-name、 animation-duration、 animation-timing-function、 animation-delay、 animation-iteration-count、 animation-direction、animation-fill-modeを、組み合わせて指定することができる

animation-name ：キーワード（任意）

アニメーションの名前を決める、後述の@keyframes（具体的な実行内容を指定する記述）で指定されるため必須

animation-duration：数値（単位をs / 秒で指定）

アニメーションが行われる時間を指定する

animation-timing-function：キーワード

アニメーションの速度変化を指定する

• ease　開始と完了を滑らかにする（初期値）
• linear　一定に動かす、機械的に動く
• ease-in　ゆっくり始まる、加速がかかる
• ease-out　ゆっくり終わる、減速がかかる
• ease-in-out　ゆっくり始まってゆっくり終わる、加速・等速・減速がかかるため自然に動く

animation-delay：数値（単位をs / 秒で指定）

アニメーションを開始する時間を設定する

animation-iteration-count：数値またはキーワード

アニメーションを実行する回数

• infinite　無限に再生を繰り返す
• 数値　再生回数を指定（初期値は1）

animation-direction

アニメーションを複数回繰り返す場合、方向を交互に反転再生させるかどうかを指定する
（例：背景を白から黒までアニメーションさせた後、黒から白へと反転させるかどうか）

• normal　普通方向にアニメーションを繰り返し再生する（初期値）
• alternate　アニメーションの方向を交互に反転再生させる

animation-fill-mode : キーワード

アニメーション終了後の状態を設定する（アニメーション実行回数が無限の場合無効）

• none　アニメーション終了後にcssは適用されなくなる（初期値）
• forwards　アニメーション終了後は最後に指定したcssが適用
• backwards　アニメーション終了後は最初に指定したcssが適用

例)

h1{
  animation: bgChg 10s ease 2s infinite alternate;
}

上記の実行内容：

アニメーションの名前：bgChg

アニメーションする時間：10秒間
アニメーションの速度変化：開始と完了を滑らかにする
アニメーションをいつ開始するか：読み込んでから2秒
アニメーションの繰り返し数：無限
アニメーションの方向：交互に反転再生させる

@keyframesの記述

具体的なアニメーションの実行内容を指定する（キーフレームアニメーションを作成）

@keyframes アニメーションの名前{
0%{プロパティ: 値;プロパティ:値;プロパティ:値;}
50%{プロパティ: 値;プロパティ:値;プロパティ:値;}
100%{プロパティ: 値;プロパティ:値;プロパティ:値;}
}

@keyframesの後にアニメーションの名前を指定（あらかじめanimationプロパティで設定した名前）し、%によるアニメーションの指定を行う。各位置ごとにCSSのプロパティと値を記述（複数指定可）し、それぞれの位置の変化をアニメーションする

例)

@keyframes bgChg{
0%{background-color: #f00;color:#ff0}
50%{background-color: #0f0;color:#000}
100%{background-color: #ff0;color:#f00}
}

指定するアニメーションの名前：bgChg

　0%の指定：背景を赤、文字色を黄色
　50%の指定：背景を緑、文字色を黒
100%の指定：背景を黄色、文字色を赤

Webページのヘッダー部分などに良くみられる、ページ下へのスクロールを促すためのサンプルと解説になります。
線が上から下にアニメーションをするシンプルな内容です。

svgやjs（jQuery ）などは使用せず、CSS3のanimationプロパティのみで作成をします。

サンプルのコピー＆ペーストのみで実装ができます。

記述例（html / css）：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
	<style>
		#test{
			background-color: #ccc;
			height: 150px;
			overflow: hidden
		}

		#test:after{
			content:"";
			display: block;
			width: 1px;
			border-left:1px #000 solid;
			animation:scroll 2s ease 0s infinite normal;
			margin: 0 auto 0;
		}

		@keyframes scroll{
			0%{
				height: 0;
			}
			50%{
				height: 150px;
				margin-top: 0;
			}
			100%{
				margin-top: 150px;
				height: 150px;
			}
		}
	</style>
</head>

<body>
	<p id="test"></p>
</body>
</html>

実際の動きはデモからご覧いただけます。

解説：

・HTMLの記述はp（id名test）のみとなります。

・CSSで#testに対しheightを指定し、overflow:hiddenで子要素がはみ出した場合の処理を隠すようにします。（背景色は領域確認用なので削除して構いません）

・#test内に:afterの記述で要素を作成、content:”” で内容は空としborder-leftでアニメーションさせる線を表現します。

・キーフレームの記述で0%時点で高さを0に、50%で高さを150pxにすることで上から下に線が描画されます。

・また50%時点でmargin-topを0に、100%でmargin-topを150pxにすることで線の上の位置を移動させるアニメーションを実装します。

要素名::beforeと要素名::afterによる擬似要素の作成

CSSのセレクタ 部分に要素名::before（または要素名::after）と指定することで、要素の直前（または直後）に内容を挿入することができます。

この記事の続きを読む

レスポンシブWebデザインについて

大きさの異なるデバイス毎（PC、タブレット、スマートフォンなど）に、Webページのレイアウトを可変させるデザインをレスポンシブWebデザインと言います。
一つのHTMLファイルに対してCSSでデバイスごとのレイアウトを指示するものとなります。

この記事の続きを読む