1. Grid Layout(1)

◆ グリッドレイアウトとは

水平線と垂直線が交差した格子(グリッド)に対し、
アイテムの配置や結合でレイアウトを設定する CSS の機能です。

● グリッドレイアウトの構成

・グリッドライン：番号が振られた垂直および水平の線
・トラック：グリッドの行および列。隣接する 2 本のラインの間を示す。
・セル：グリッドラインで囲まれた、アイテムを配置できる最小の単位
・エリア：複数のセルが結合してできるセルの集まり

● グリッドコンテナとグリッドアイテム

グリッドレイアウトでは、コンテナを親要素、アイテムを
子要素として記述します。この親子関係を記述した後、コンテナの
CSS にdisplay: grid;を指定すると、グリッドレイアウトを配置出来ます。

演習 1

下記のコードを記述し、結果を確認しましょう。
※ コピー&ペースト OKです
> CodePen

<div class="container">
  <div class="box1">1</div>
  <div class="box2">2</div>
  <div class="box3">3</div>
  <div class="box4">4</div>
  <div class="box5">5</div>
</div>

.container {
  background-color: lightgray;
}
.box1 {
  background-color: tomato;
}
.box2 {
  background-color: orange;
}
.box3 {
  background-color: skyblue;
}
.box4 {
  background-color: lime;
}
.box5 {
  background-color: pink;
}

.container {
  display: grid;
}

● グリッドトラック

grid-template-columns と grid-template-rows を
設定し、各アイテムの配置を調整します。

grid-template-columns：横方向のアイテムサイズと個数を指定
grid-template-rows：縦方向のアイテムサイズと個数を指定

grid-auto-columns：横方向のアイテムサイズを指定
grid-auot-rows：縦方向のアイテムサイズを指定

演習 2

下記のコードを記述し、結果を確認しましょう。
それぞれを確認したら、プロパティ値を変更した際の結果を表示させましょう。

.container {
  display: grid;
  /* ↓ ここから下を追加で記述する */
  /*100pxのトラックが 3列、50pxのトラックが 2列*/
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

.container {
  display: grid;
  /* ↓ ここから下を編集する */
  /*100pxのトラックが 2列、100pxのトラック固定*/
  grid-template-columns: 100px 100px;
  grid-auto-rows: 100px;
}

●fr 単位

上記演習では、アイテムを px で設定しました。
ここにfr(fractions)という単位を指定すると、
画面に合わせてアイテムを均等に分割できます。

演習 3

下記のコードを記述し、結果を確認しましょう。

.container {
  display: grid;
  /* ↓ ここから下を編集する */
  /*トラック(列)を 2:1:1に配置*/
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 100px 50px;
}

また上記コードは、以下の記述で書き換えが可能です。
(repeat 表記は、fr 以外の単位も使用可能です)

.container {
  display: grid;
  /* 同じ単位を repeat(数,単位) で指定 */
  grid-template-columns: 2fr repeat(2, 1fr);
}

● グリッドラインとアイテムの配置

以下のプロパティ値に対してグリッドラインの番号を指定し、
そのセルまたはエリアの範囲にアイテムを設置できます。

grid-column-start：横向きの開始ラインの指定
grid-column-end：横向きの終了ラインの指定

grid-row-start：縦向きの開始ラインの指定
grid-row-end：縦向きの終了ラインの指定

grid-area：各ライン位置を一括で指定
(順番は row-start, column-start, row-end, column-end)

演習 4

下記のコードを記述し、結果を確認しましょう。
※ 出来るだけコードは手打ちしましょう。また、grid layoutは Emmet無いです。

.container {
  display: grid;
  /* ↓ ここから下を編集する */
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
.box1 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 4;
}
.box2 {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
}
.box3 {
  grid-area: 2 / 2 / 3 / 4;
}

2. Grid Layout(2)

◆Web サイトのレイアウト

この章では、Web サイトでよく見かけるレイアウトを
作成し、Grid Layout の記述方法に慣れて行きましょう。

●3 カラムレイアウト

よく見かける Web ページに、3 カラムレイアウトがあります。
ページの両端にメニューや広告、中央にコンテンツを配置する
形となっています。今回はこのレイアウトを作成しましょう。

●HTML と CSS の準備

演習 1

以下のコードを htmlエリアと CSSエリアに記述しましょう。
※ html Emmet： .container, header.header{header} ...etc
css Emmet：c-white, fz30, bgc-〇〇 ...etc

<div class="container">
  <header class="header">header</header>
  <main class="main">main</main>
  <aside class="aside">aside</aside>
  <nav class="nav">nav</nav>
  <footer class="footer">footer</footer>
</div>

.container {
  color: white;
  font-size: 30px;
}
.header {
  background-color: lightgreen;
}
.main {
  background-color: skyblue;
}
.aside {
  background-color: orange;
}
.nav {
  background-color: tomato;
}
.footer {
  background-color: purple;
}

● グリッドラインの指定

3 カラムのレイアウトは、3×3 のグリッドとみなす事が
できるため、column と row を 3 つずつ指定します。

演習 2

以下のコードを CSSエリアに記述しましょう。

.container {
  display: grid;
  /*トラック(列)の幅を指定*/
  grid-template-columns: 2fr 6fr 1.5fr;
  /*トラック(行)の幅を指定*/
  grid-template-rows: 40px 500px 70px;
}

● グリッドエリアの指定

それでは、各コンテンツの配置を指定して行きましょう。

header：1 行目全てのエリア
aside：2 行目から 3 行目、1 列目のエリア
main：2 行目から 3 行目、2 列目のエリア
nav：2 行目から 3 行目、3 列目のエリア
footer：3 行目全てのエリア

演習 3

以下のコードを CSSエリアに記述しましょう。

.header {
  grid-row: 1 / 2;
  grid-column: 1 / 4;
}
.aside {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
}
.main {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
.nav {
  grid-row: 2 / 3;
  grid-column: 3 / 4;
}
.footer {
  grid-row: 3 / 4;
  grid-column: 1 / 4;
}

Grid Layout を利用したページレイアウトを学習しました。
レイアウトは他にも種類があるため、以下のサイトなどを
参考にするとよいと思います。

> サイトの目的に合ったデザイン構成とは
 > レイアウトまとめ

3. jQuery(1)

◆jQuery とは

短い記述で HTML 要素に動作を指定できる JavaScript のライブラリです。
※ライブラリ：使いやすい機能をまとめたファイル。

● 使い方

通常は公式サイトからファイルをダウンロードするか、
CDN(コンテンツデリバリネットワーク)を利用します。
CDN とは、外部のサーバからファイルを呼び出す方法で、
サーバの URL を HTML ファイルに指定する必要があります。

jQuery CDN

●CodePen での設定

CodePen ではファイルのダウンロードや CDN の指定は不要ですが、
以下の手順で設定を変更する必要があります。

→CodePen
(1) JS の左側にある歯車マークをクリック
(2) 「Pen Setting」の「Add External Scripts/Pens」の検索ボックスで
> 「jquery」を入力
(3) 「jquery」を選択後、右上の「Close」で保存 ※画像は Save&Close になっています。

◆ 基本構造

jQuery は、$('セレクタ').メソッド(); が基本構造となります。

セレクタ：対象となる HTML 要素を指定(CSS と同様)
メソッド：処理する内容を記述

また、この時に指定される対象を
DOM(document object model)と言います。
JavaScript で操作できる HTML 等の構造と覚えておきましょう。

演習 1

次のコードを記述し、結果を確認しましょう。
※ 今回は css()メソッドを指定しています。

<!--HTML-->
<p>text</p>

//JavaScript
//セレクタに p、cssメソッドのカラープロパティに redを指定
$("p").css("color", "red");

● 属性(id,class)の指定

CSS と同じく、id = #, class = . で指定する事ができます。
また { }で囲み、プロパティ:値を, で区切ると、
複数のプロパティを指定可能です。

//JavaScript
$("属性").css({ プロパティ: "値", プロパティ: "値" });

● メソッドチェーン

. を間に挟んでメソッドの記述を続ける事と、
複数のメソッドを指定する事ができます。
この記述方法をメソッドチェーンと言います。

//JavaScript
$("属性").メソッドA().メソッドB();

演習 2

次のコードを記述し、結果を確認しましょう。
※ Emmetは、p#sample01{text01} と p.sample02{text02} と p.sample03{text03} です。
※ fadeOutメソッド：対象を非常時にするメソッドで、() 内の単位はミリ秒です。

<!--HTML-->
<p id="sample01">text01</p>
<p class="sample02">text02</p>
<p class="sample03">text03</p>

//JavaScript
$("#sample01").css("color", "tomato");
$(".sample02").css({ color: "orange", "font-size": "50px" });
//青文字になり、5秒後に消える
$(".sample03").css("color", "blue").fadeOut(5000);

●CSS クラスの指定

jQuery で CSS を指定する場合、上記ではプロパティを
1 つずつ記述していました。この方法以外に、複数の
プロパティを指定できる addClass メソッドがあります。

/*CSS*/
.クラス {
    プロパティ：値;
    プロパティ：値;
    プロパティ：値;
}

$("セレクタ").addClass("クラス");

まず CSS でクラスと各プロパティを記述し、次に jQuery で
クラスを対象のセレクタを指定します。その結果、
クラス内のプロパティが指定された HTML 要素に反映されます。

また、removeClass メソッドを使うと、指定された CSS クラスを削除できます。

演習 3

次のコードを記述して、結果を確認しましょう。
(addClassの結果を見てから、removeClassの // を削除する)
※ Emmetは、 fz30, bd3-solid-pink, m20, p20, tac

[HTML]

<p class="sample04">text04</p>

[CSS]

.testStyle {
  font-size: 30px;
  border: 3px solid pink;
  margin: 20px;
  padding: 20px;
  text-align: center;
}

[JavaScript]

$(".sample04").addClass("testStyle");
//$('.sample04').removeClass('testStyle');

● コンテンツの操作

以下のメソッドでコンテンツやタグを操作可能です。

・text：コンテンツを書き換え
・html：タグの書き換え
・remove:コンテンツを削除

演習 4

次のコードを記述し、結果を確認しましょう。

[HTML]

<p class="text">書き換え前</p>
<p class="click">変化前</p>
<p class="remove">消えます</p>

[JavaScript]

//テキストを書き換える
$(".text").text("書き換え後!").css("color", "green");
//pタグから aタグに書き換える
$(".click").html('<a href="">クリック</a>');
//属性を指定して削除する
$(".remove").remove();

● 要素の追加

上記ではタグやタグの中身を操作しましたが、
HTML 要素を追加する事も可能です。

before：要素の前に追加
after：要素の後に追加
prepend：子要素の先頭に追加
append ：子要素の末尾に追加

次の演習でメソッドの効果を確認しましょう。

演習 5

次のコードを記述し、結果を確認しましょう。
※ Emmetは、ul>li.li${$}*5です。

[HTML]

<ul>
  <li class="li1">1</li>
  <li class="li2">2</li>
  <li class="li3">3</li>
  <li class="li4">4</li>
  <li class="li5">5</li>
</ul>

[CSS]

ul {
  color: blue;
}
li {
  color: orange;
  font-size: 20px;
  margin: 10px;
}

[JavaScript]

$(".li1").before("「before」");
$(".li2").after("「after」");
$(".li3").prepend("「prepend」");
$(".li4").append("「append」");

4. jQuery(2)

◆ アニメーション

● エフェクト

要素に対し、表示/非表示を指定する事ができます。
主なメソッドは以下の通りです。

・hide：対象を非表示にする
・show：対象を表示する
・fadeOut：対象をフェードアウトさせる
・fadeIn：対象をフェードインさせる
・toggle：表示中なら消え、非表示なら現れる

演習 1

次のコードを記述し、結果を確認しましょう。
※ Emmetは、html -> .box$*3、 css -> w100, h100, bgc-red etc... です。

[HTML]

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

[CSS]

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}
.box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.box3 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

[JavaScript]

$('.box1').hide('slow');
$('.box1').show('slow');

$('.box2').fadeOut('slow');
$('.box2').fadeIn('slow');

$('.box3').toggle('slow');
$('.box3').toggle('slow');

● イベント

クリックなどをトリガーにするメソッドについて
学習しましょう。

・mouseover：マウスカーソルが通過する時に実行される
・mouseout：マウスカーソルが外れた時に実行される
・click：クリックした際に実行される

またこれらのメソッドは、関数を渡す事ができます
代表的な関数に、callback 関数があります。

メソッドの()内に function()を指定し、
その後ろに実行したい jquery メソッドを記述します。

この時、$()の中に thisを指定する事で、
HTML 要素に対して目的の実行処理を実行できます。

$('セレクタ').メソッド(function() {
      $(this).メソッド();
});

構造が複雑なため、次の演習で感覚を掴みましょう。

演習 2

次のコードを記述し、結果を確認しましょう。

[HTML]

<div class="box1"></div>

[CSS]

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

[JavaScript]

//マウスを通過させると色が青と緑に交互に変化
//mouseoverと mouseoutをメソッドチェーンで結合
$('.box1').mouseover(function() {
      $(this).css('background', 'blue');
}).mouseout(function() {
    $(this).css('background', 'green');
});

//クリックすると、clickのメッセージが表示される
$('.box1').click(function() {
    alert("click!");
});

◆ 総合演習

総合演習 1

次の Webサイトにアクセスし、Grid layoutの問題 Lv.1～Lv.10 を解きましょう。
※ テキスト範囲外のマイナス値指定と、span指定が出題されます。
GRID GARDEN

総合演習 2

jQueryを用いて、[テキストの表示を変化させる]ボタンを作成しましょう。
手順は以下を参考にして下さい。

(1) pタグで「テキスト」を表示させる
(2) inputタグでボタンを作成
(3) 任意のフォントサイズ、背景色、枠線を指定した CSSを作成
(4) addClass で (3)のCSSを指定する。
(5) click プロパティを使用し、(4)のaddClassをクリック動作と連携させる。
(6) ボタンをクリックして、CSSのロパティを反映させる。

ヒント 1

・p タグは class 属性を指定する
・input タグは type、class、value の 3 属性を指定する
・type はフォームの種類(button)、class は任意の値、value は "ボタン" を記述
・input button 参照 ※ name 属性は今回は不要

ヒント 2

・input タグの class 属性に対して click メソッドを連携させる
・click メソッドの実行処理(function()以下)で、addClass を指定する
・addClass はテキストの属性に対し、CSS のセレクタを反映させる

ヒント 3

HTML 部分は以下の様に記述する。

<p class="text">text</p>
><input type="button" class="click" value="ボタン">

jQuery 部分の基本構造は以下の様に記述する。

$('input タグの class 属性').click(function() {
>$('変更させたいコンテンツの class 属性').addClass('css のクラス名');
});

◆ 演習 1 の回答

Lv.1：grid-column-start: 3;
Lv.2：grid-column-start: 5;
Lv.3：grid-column-end: 4;
Lv.4：grid-column-end: 2;
Lv.5：grid-column-end: -2;
Lv.6：grid-column-start:-3;
Lv.7：grid-column-end: span 2;
Lv.8：grid-column-end: span 5;
Lv.9：grid-column-start: span 3;
Lv.10：grid-column: 4 / 6;

◆ 演習 2 の回答例

[HTML]

<p class="text">text</p>
<input type="button" class="click" value="ボタン" />

[css]

.changed {
  font-size: 50px;
  background-color: lightblue;
  border: 3px solid crimson;
}

[JavaScrip]

$('.click').click(function() {
  $('.text').addClass('changed');
});

今回はここまでです。お疲れ様でした！

HTML/CSS 学習テキスト(5)へ