Web プログラミング

【もりけん塾52日目】しまぶーさんのIT大学|gridの動画学習

エンジニアの友人のコードをまずは写経することにした、ねこらのん(@nekoranon256)です。

 

前回の記事でgridが出てきたので調べます。

 

gridを調べるとしまぶーさんのIT大学のyoutubeが非常にわかりやすかったです。

またエンジニアの友人から基礎ができていないと指摘してくれたので、一緒にしまぶーさんの動画で合わせて学びなおしました。

 

聖杯レイアウトのレスポンシブ化

 

HTML&CSSレイアウト講座の1~3を見ていきました。

 

LP制作をしていて、borderや背景色があったほうが良いと思っていたところ、しまぶーさん作成のGoogle Chromeの拡張機能「UI Build Assistant」が非常に便利だったので早速導入!

 

background-colorとoutlineの拡張機能を使用

 

わかりやすい…

 

動画と一緒に以下のものを作成しました。

See the Pen
BaKvyoX
by mayu (@syouyu-mayo)
on CodePen.

上記のものには拡張機能が反映されないので、background-colorだけを入れています。

 

これをベースにして、HPなど作成していけそう…!

grid|しまぶーさんの動画学習

次はgrid。

 

flexboxと同様、横並びにする方法。

 

またflexboxよりも<div>が少なくHPを作成することが出来るようです。

 

実際に動画を見て写経したので掲載していきます。

 

 

HTML。

 html
<body>
<header>header</header>
<!-- 左はナビゲーションが多い -->
<nav>left:ナビゲーションが多い</nav>
<main>center:左→真ん中→右へユーザーは見やすい</main>
<!-- 右は広告が多い -->
<aside>right:広告が多い。サブコンテンツ</aside>
<footer>footer:最近は無限スクロールがあるため、leftかrightの最下部にあるパターンが増えてきている</footer>
</body>

 

CSS。

 css
body{
font-size: 2rem;
/* 2行が固定幅指定 */
margin: 0 auto;
/* width: 800px; */
/* 全画面 */
min-height: 100vh;
/* 聖杯レイアウト図でそれぞれに対応していく */
display: grid;
/* 1frはいっぱい引き伸ばしたい場合に使う */
/* 子要素の記述が減る方法 */
/* marginなどを記載しなくて良い */
/* 7行にすることで外周の余白も指定することが可能 */
/* calcや%、min-maxなども指定可能 */
/* minmax(300px,1fr)でレスポンシブ対応が可能 */
grid-template:
"... ...... ...... ...... ...... ...... ..."
"... header header header header header ..." 150px
"... ...... ...... ...... ...... ...... ..."
"... left ...... center ...... right ..." 1fr
"... ...... ...... ...... ...... ...... ..."
"... footer footer footer footer footer ..." 300px
"... ...... ...... ...... ...... ...... ..."
/auto 150px auto minmax(300px, 1fr) auto 200px auto;
/* ↑横幅 */
}
header{
grid-area: header;
}
main{
grid-area: center;
}
nav{
grid-area: left;
}
aside{
grid-area: right;
}
footer{
grid-area: footer;
}

 

grid-templateで以下のように見た目でもわかるような部分が作成できる特徴的。

grid-template:
"... ...... ...... ...... ...... ...... ..."
"... header header header header header ..." 150px
"... ...... ...... ...... ...... ...... ..."
"... left ...... center ...... right ..." 1fr
"... ...... ...... ...... ...... ...... ..."
"... footer footer footer footer footer ..." 300px
"... ...... ...... ...... ...... ...... ..."
/auto 150px auto minmax(300px, 1fr) auto 200px auto;

 

 

gridを使うメリットは以下のものがあるとしまぶーさんが動画でおっしゃっていました。

  1. 子要素の記述が減る方法
  2. marginなどを記載しなくて良い
  3. 7行にすることで外周の余白も指定することが可能
  4. calcや%、min-maxなども指定可能
  5. minmax(300px,1fr)でレスポンシブ対応が可能

LPを作成していてdivの数が多くなっていき、徐々にわからなくなってきたのでこの方法を使えばそういったことが減りそうです。

 

またhtmlの記述量が減ればSEO的にもよく、サイトの表示スピードも早くなるので今後どんどん使っていこうと思います。

 

grid-template-columns: repeat(auto-fit,minmax(250px,1fr));

LPを作成しているとgrid-template-columnsが出てきたのでこちらを調べていきます。

 

grid-template-columnsプロパティは、このグリッドトラック群に対して横方向の長さのリストを指定します。 長さのリストは、pxなどの単位を付けた数値や%値などを半角スペース区切りにします。

 

引用:grid-template-columns …… グリッドトラックの横方向のサイズリストを指定する

 

これだけではまだ理解ができないので、以下の動画を見ました。

 

 

 

みる限りでは、

  • grid-template-columns:横幅のサイズ、レスポンシブ対応
  • grid-template-rows :縦のサイズを決め

のように見えました。

 

実際に作成しました。

するとgrid-template-columnsは横幅、grid-template-rowsは縦幅を決めるものだという事がわかりました。

 

おわりに

実際に作成したことで、不明なところが理解できたので「手を動かす」ことをして行こうと思います。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada