グリッドカラムページ

写真を並べたようなページ

グリッドレイアウトページを見てみよう

https://www.itskn.jp/ ←こんなページ
https://www.itskn.jp/ ←参考サイト集
グリッドレイアウトの作り方はいろいろあるようです。
もりの学校の単元ページは、リストで、グリッドレイアウトのようになっています。
そては又後ですることにして今回は、CSSを使って別の方法で作ります。

まず一番簡単なHTMLを準備

ヘッダーとかフッターのあるページの本体部分にこれを作れば良いけれど。これはヘッダーもフッターもないページに作っていきます。
他にあるHTMLの間に作っても良いでしょう。
準備
index.htmlとして下のファイルを保存しましょう。もちろん他の名前でも良いです。

 $<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel= "stylesheet" href="a31-a.css">
    <title>カード型のページを作る</title>
</head>
<body>
    <h1>カード型のページ</h1>
</body>
</html>$

まずは、これだけ。

並べるためのテキストをつくる

次にカード上に並べるテキストを作っていきます。
作る場所は、</h1>の下です。
まず、<section class="listA"></sectin>で箱を作ります．
その中にカード（これも箱ですが）がたくさんある、そんなイメージでページを作ります。

<section class="listA><section>として大きな入れ物を作ったら、
その中に<div class="=container"><div>とカードにあたる箱を作ります。

 $<section class="listA">
        <div class="=container">
        <div>
    </section>$

その中に並べるカードに当たる箱を書きます。

 $<section class="listA">
    <div class="=container">
        <article>
       <!-- ここへ中身を書く-->
        </article>
    </div>
    </section>$

中身を書くとこうなります。
中身は<p>なんちゃら</p>だけでも良いのですが
ここでは、リンク、写真、見出し、文を入れてあります。

 $<section class="listA">
    <div class="=container">
    
        <article>
            <a href="#">
            <div class="phot" style="background-image: url(pic/a.jpg);">
            </div>
            <div class="txt">
            <h2>あ</h2>
            あああ
            </div>
            </a>        
        </article>
    
    </div>
    </section>$

そして<article></article>をコピーしていくつか並べるとHTMLはできあがりです。

 $<section class="listA">
    <div class="=container">
    
        <article>
            省略
        </article>
        <article>
            省略
        </article>
        <article>
            省略
        </article>
        <article>
            省略
        </article>
        
    </div>
    </section>$

先ほどの図のように文字などが縦にな編んでいるのが分かるでしょう。
一つ一つをボックスに入れて横に並べればカード型レイアウトが出来ます。

CSSを書　まず中に入れる箱を作る

ではcssを書いていきましょう。
CSSの名前は、
<link rel= "stylesheet" href="a31-a.css"> とhtmlで指定してあります。

 $@charset "utf-8";$

ここに付け加えていきます。

 $.listA .container {
	display: flex;
	flex-wrap: wrap;
}$

.listA .container の中に
display: flex;
とあります。これが、横並びにしろという命令です。
フレックスというのは柔軟とかしなやかという意味。ボックスが柔軟に並ぶと言うことでしょうか。
でも柔軟と行ってももう少し指定がほしい。
そこで次の
flex-wrap: wrap
で、折り返して複数行に並んでも良いという意味になります。
いくつも並んだときに一つ一つを狭くしなくても、段を変えて良いというわけです。
でもまだ横並びになりません。

CSSを書　次に中に入れる箱にも

入れ物が出来たので中に入るもの（article）に並び方を指令します。

 $.listA article {
	flex: 1 1 300px;
	display: flex;
}$

flex: 1 1 300px;　　で横に並べという命令です。
次の display: flex;　は、listA　の　article　もフレキシブルなボックスにしてしまおうという命令です。
これで画面の大きさに応じて段数を変えて捧持するようになります。

できあがったCSS

最終的ににこんなCSSになりました。
どこで何をしているか調べてみて下さい。

 $@charset "UTF-8";

/* カード型表示１*/
.listA .container {
	display: flex;
	flex-wrap: wrap;*/
/*	max-width: 1200px;*/
/*	margin: 20px auto;*/
}

.listA article {
	flex: 1 1 300px;
	display: flex;
}

.listA a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #eee;
	color: black;
	text-decoration: none;
}

.listA a:hover {
	opacity: 0.8;
}

.listA .photo {
	min-height: 150px;
	background-position: center;
	background-size: cover;
}

.listA h2 {
	font-size: 18px;
}$

飯田の春←つくりかけ
飯田の春←完成

次の問題へ進む

グリッドレイアウトページを作ってみよう