ウェブサイトを作ろう！9

• グリッドレイアウト

• displayプロパティ

• grid-template-columnsプロパティ

• gapプロパティ

• max-widthプロパティ

• border-radiusプロパティ

• overflowプロパティ

• box-shadowプロパティ

• サイトの完成

今度は、縦に並んでいるのを横に並べたいと思います。

今よく使われる方法として「グリッドレイアウト」というのがありますので、これで作っていきます。

まず、グリッドレイアウトとは、要素を「行（ぎょう：横）と列（れつ：縦）」で配置（はいち）することが出来る方法です。

普通は、要素は縦に並んでいきますが、それを横に並べることが出来る方法と考えてください。

メインを作る

グリッドレイアウト

こんな感じで、要素（ようそ）を並べることができる

普通のレイアウト

では、まずは CSS に以下を追加してください。

メインを作る

これで「content-grid」クラスの要素（ようそ）が、「グリッドコンテナ」という特殊な要素になります。

グリッドコンテナは、その子要素を、横や縦に自由に並べられる要素です。

このグリッドコンテナの子要素のことを「グリッドアイテム」とも言います。

メインを作る

<div class="content-item>

  ～画像など～

</div>

<div class="content-grid">

</div>

<div class="content-item>

  ～画像など～

</div>

<div class="content-item>

  ～画像など～

</div>

グリッドコンテナ

（CSS で「display: grid;」と設定した要素が、グリッドコンテナになる）

グリッドアイテム

（グリッドコンテナの子要素が、グリッドアイテムになる）

まだ、この時点では横に並んでいません。それは「列（縦）の区切り（くぎり）」の数が、1 になっているからです。

本当は、この列の区切りは 3 にしたいのです。

メインを作る

ここだけ、3列にしたい

1列目

2列目

3列目

CSS を以下のようにしてください。※先ほど入力した didplay: grid; の下に赤線の部分を追加してください。

メインを作る

こうすることで、「400px の列を3つ作る」という意味になります。

ページを確認すると以下のようになっています。

ちゃんと、3列に区切ったことによって、横に並んでくれています。

※ウィンドウのサイズによって見え方は変わります。

横に並ぶようになりましたが、ウィンドウサイズを大きくすると、左にかたよってしまいます。

また、ウィンドウサイズを小さくすると、下のように切れてしまいます。

メインを作る

切れてる

これは、「必ず 400px の横はばにする」という指定をしているからです。

スマホやパソコン、タブレットなど、ウィンドウのサイズは違うのが普通なので、このような作り方はしません。

次のページのような設定をします。

下のようにしてみましょう。ちょっとややこしいので書き間違いに注意してください。

メインを作る

下のようになります。ウインドウズサイズを大きくしても、かたよっていません。

ウィンドウサイズを小さくしても、画像や文字が切れることがありません。（下にズレてくれます）

これによって、パソコンやスマホなどの、ウィンドウサイズが違う場合でも、ちゃんと表示されるようなります。

メインを作る

下にズレてくれてる

コードの説明します。（これは、ややこしいので、なんとなくでOKです）

メインを作る

この repeat（リピート）は、行や列を繰り返すために使います。

その repeatの()の中には、「何回くりかえすか？, サイズをどうするか？」を指定します。

今回は「何回くりかえすか？」のところに「auto-fit」(オート フィット)を設定しています。

auto-fit は自動でくりかえす回数を決めてくれるので、「普通は３つずつが横にならぶけど、ウィンドウサイズが小さくなったら、２つにへらす」ということをやってくれたのです。

（ウィンドウサイズが小さい時は、下にズレてくれましたよね？それです）

「サイズをどうするか？」のところには、「minmax(280px, 1fr)」を指定しています。

「minmax()」は「最小の数」と「最大の数」を指定するためのもので、今回は「最小で280px」「最大で1fr」という指定をしています。※1rfは、auto-fitによって、3つや、２つに分けられた要素の内の1つ分のことです。

さらに以下のコードを追加してください。

メインを作る

「gap」は、先ほどの3つや2つ分けた要素同士の間を、どれくらい開けるか？の設定です。今回は24px開けてます。

「max-width」は最大の横幅のことです。今回は1200pxにしています。

「margin: 0 auto;」これは、もう何度も使っている「margin」（外の余白）ですが、「auto」と書くと、自動で良い感じにしてくれます。

今回は「0 auto」なので、縦の余白は 0 で、横の余白は auto という意味になり、横が auto の場合は、左右の余白が同じになるように調整してくれます。（ちょうど真ん中にしてくれる）

では、これを保存して、確認してみましょう。

こんな感じで、中央に並ぶ感じになりました。

メインを作る

先ほどの CSS をおさらいしてみると、下の感じです。

メインを作る

max-width: 1200px;

（横が最大1200px ）

margin: 0 auto;

（横の余白は自動で）

gap: 24px;

（要素の間は24xp開ける）

margin: 0 auto;

（横の余白は自動で）

次は、画像の大きさがバラバラなので、調整します。CSS に以下を追加してください。

メインを作る

これで画像が同じ大きさになります。

CSS の説明です。

まず、セレクタで「.content-itemの子要素の、 img要素だけ」の指定をしています。

「width」は「よこ」という意味で、要素のよこ幅（よこはば）のプロパティです。

今回「100%」という値（あたい）にしてますが、これは「親要素のサイズの100%」という意味です。

つまり、今回の場合は、.content-itemが親要素なので、.content-itemの要素と同じよこ幅になるということです。

「height」は「たて」という意味で、要素のたて幅（たてはば）のプロパティです。

これは普通に 200px という長さにしています。

このように、ほとんどの場合は「よこ幅は、親要素のサイズ」「たて幅は、長さを指定」することが多いです。

メインを作る

ちょっとここで、真ん中のワンピースの画像をよーく見てください。

最初の画像と、少し変わっているのがわかりますか？

メインを作る

元々、たてに長い画像が、ギュっとつぶされて、横に伸ばされているため、ちょっと変な感じがしますよね？

これは、元の画像のサイズと、表示したいサイズがちがうため、普通に表示すると、こんなことになります。

別の画像の表示方法もためしてみます。

CSS に以下を追加してください。

メインを作る

すると以下のように表示されます。

どう変わったか比べてみます。

メインを作る

たて長の画像をギュッとつぶすのではなく、一部だけを表示させていますね。

この場合は、上と、下の部分は切れてしまいますが、絵はつぶれずに表示できています。

どちらが良いか？は好みが分かれるかも知れませんが、最近は右側の方法で画像を表示させることが多いです。

ここらへんで、もう一度「完成イメージのページ」を確認してみます。

メインを作る

今の時点でも、だいぶ同じ感じになっていますが、もう少し CSS で見た目を整えていきます。

まず「角を丸くして」「影をつける」ことをやります。

メインを作る

角を丸く

影をつける

以下のCSS を追加してください。

コードの説明です。

「border-radius」は、角の丸みを指定しています。今回は12pxですね。

ちょっと注意点ですが、先ほど書いた CSS で指定しているのは画像ではなく、その親要素です。

メインを作る

これを丸くしてる

画像を丸くするのではなく、親要素を丸くしてる

この場合、画像自体は丸くしていないため、「border-radius」だけだと、以下のようになります。

メインを作る

そのため、「overflow: hidden;」を設定しています。

「overflow」は「子要素が、親要素の外に飛び出した時（はみだした時）にどうするか？」を設定できます。

「hidden」は、かくす、という意味なので、親要素を飛び出した画像は隠されて、ちゃんと丸くなります。

「border-radius」と「overflow: hidden;」を組み合わせることで、このようにできます。

丸くなってない

（裏にいる親要素は丸くなっているが、

子要素の画像が、親要素の外まで飛び出している）

こっちは丸くなってる

（親要素が見えているため）

最後の「box-shadow: 0 4px 10px rgba(0,0,0,0.1);」で影を作っています。

「box-shadow」は、要素に影（かげ）を付けるプロパティで、その右側には

「横にどれだけズレるか？（今回は０）」

「縦にどれだけズレるか？（今回は4pxなので、下方向に4pxの影が出来る）」

「どれくらいボヤぁっとするか？（今回は10px）」

「影の色（今回はrgba(0,0,0,0.1)」

という意味です。

前に、text-shadowという、文字に影をつけるプロパティを使いましたが、今回のbox-shadowは要素に影をつけます。

メインを作る

次に文字の部分も、調整します。以下を CSS に追加してください。

メインを作る

これで、文字の周りに余白ができ、見やすくなります。

次に、漫画のタイトル部分だけ色を変えて、少し大きくしたいので、以下を追加してください。

メインを作る

下のようになったらOKです。

ここまでで、ページが以下のようになりました。

メインを作る

これで、ページ全体の内、半分以上が終わりました。

後は、同じ部分を作るだけです。

メインを作る

<div class="main">

</div>

<div class="category">

<h2>好きな漫画</h2>

<div class="content-grid">

</div>

</div>

<div class="category">

<h2>好きな食べ物</h2>

<div class="content-grid">

</div>

</div>

<div class="category">

<h2>好きな食べ物</h2>

<div class="content-grid">

</div>

後は、この部分を作るだけ

</div>

残りは一気に作ってしまいましょう。まずは、すでに作った部分をコピーします。

→の部分です。

「class="category"」の要素なので間違えないようにしてください。

メインを作る

コピーしたものを、そのまま「class="category"」の要素の下に、はり付けます。

以下のように「class="category"」の要素が、2つタテに並ぶ感じですね。

メインを作る

～長いので省略（しょうりゃく）～

～長いので省略（しょうりゃく）～

ページを確認しておきましょう。同じ内容が2つ表示されていればOKです。

メインを作る

後は、HTMLから、画像や文字を変えるだけですね。

最終的に下のようになればOKです！

メインを作る

お疲れ様でした

これで、とりあえず完成とします。（もちろん、自分でもっとふやしていっても良いです）

お疲れ様でした！

ただ、まだまだ説明していない事というのは色々あります。

たとえば「セクショニングコンテンツ」の考え方や、タグなどは完全に無視してます。

（これは大きなサイトでも、無視してるサイトが多いです。任天堂でも無視してます）

ほかにも「動きをつける」ための JavaScript（ジャバスクリプト）も、まだ説明してませんが、これは別のコースでやりましょう。

とりあえずここまで習った内容だけでも、かなり色々なサイトが作れますので、できるだけ自分で改造してください。

次回は、完成したサイトを、インターネットに公開（こうかい）して、みんなに見てもらえるようにしたいと思います。