Webデザイン勉強80日目の成長報告！

はいどうも！

昨日、たくさん寝れたので今日は復活いたしました。

本日の作業進捗報告を行います。

【打ったコード】

[item-1-start]   〜　[item-1-end] = 名前です。任意に設定が可能です。

grid-column: item-1-start / item-1-end ; = 列方向で、どこに配置するかを設定可能

z-index 1;  =  同じ場所に被った際、他の要素より上に表示する

【表示例】1が4の上に表示されています

【打ったコード】視覚的にgridを記述する方法

3行と3列に対して名前を設定することができます。

grid-template:

"header header header " 80px  = 行方向にheader×3,数値は80px

"main main sidebar " 80px = 行方向にmain×2,sidebar×1,数値は80px

"footer footer footer " 80px = 行方向にfooter×3,数値は80px

/ 80px 80px 80px ; = 列方向に80px × 3

【表示例】

【コードの意味】

grid-row: span 2; = 行方向に2ブロック分

grid-column: span 1; = 列方向に1ブロック分

【表示例】

【コードの意味】

grid-auto-flow: dense; = 空いてる要素を左上行方向から埋めていく

【表示例】

【コードの意味】

grid-auto-flow: dense column; = 空いている要素を左上列方向から埋めていく

grid-auto-rows: 80px; = 枠からはみ出した際の行方向の数値の記述

grid-auto-columns: 80px; = 枠からはみ出した際の列方向の数値の記述

【表示例】

【打ったコードの意味】

jusitify-content: end; = 行方向に後ろに配置

align-content: center; = 列方向で中央に配置

【表示例】

【打ったコードの意味】

justify-items: center; = 要素の中身を行方向に中央に配置

align-items: center; = 要素の中身を列方向に中央に配置

【表示例】

【グリッドを利用して、レスポンシブデザインに対応させる方法】

gird-template:

"header " 50px = headerの高さ50px

"main " 50px = mainの高さ50px

"sidebar " 50px = sidebarの高さ50px

"footer " 50px = footerの高さ50px

/ 100%; = 横幅100%

↑

@media (min-width: 570px ) {

.container {

grid-template:

"header header " 50px

"main sidebar" 50px

"footer footer " 50px

/ 1fr 200px;

【意味】

570pxを超えた場合には、2カラムにして2行目にはメインとサイドバーがくるという意味。また、サイドバーは200pxに固定して余った横幅を1frの記述でメインに割り振る

【表示例】570px以下

【表示例】570px以上

今日の学習内容は以上です。

今日で、ドットインストールのグリッドデザインが終了しました！

おやすみなさい。