1/30 インターン5回目 グリッドを学ぼう

最近omoinotakeというバンドにはまりました。今も聞きながらブログを書いています。サブスクって色々聞けて素晴らしい…。さて、インターンですがテストを挟んでかなりお久しぶりな感じです。今回はCSSの続きです。

○グリッド

格子状の線のこと。余白とかが一定になるように使われています。下のは左側がグリッドのおかげで揃っててみやすい。

ウエブサイトとかにも使われてるやつ。福大のホームページとか動画サイトとかでも。

それを実装するには以下のコードを組みます。

htmlとCSS両方にちゃんと組めたら反映‼

また、そこで大事になるのが列（column)と行（row)です。上記のコード中にも出てきてます。列が↓で行が→。セルがこれで表せます。

また、エリアを決めて、色を指定したりできます。そのためにまず、classを指定します。今回はone~sixまでclassを指定しました。

そこからCSSでエリアを指定します。今回はthreeのエリアをスタイル指定します。

ここでコード内に出てくる番号はグリッドライン番号です。この番号でエリアのcolumnとrowを指定しています。ここがちょっと自分はごちゃごちゃなりやすく苦手なので、ちゃんとわかるように頑張りたい。

＊気を付けること

・：や；の付け忘れ

・綴りのミス

今回うまく反映されなかったのは大体ここだったので気を付けたいです…めちゃくちゃそれで今回うまくいかなかったので、宿題では気を付けてみようと思います。

あとは、gapを使って、セルの間隔を指定したりできます。あるとめっちゃきれいにみえる。

○レスポンシブデザイン

これはスマホやパソコンなど違うデバイスで見たときに、ブラウザ・サイズに合わせて表示を適応することです。スマホ・フレンドリーは必須。

Viewportを設定することで、ページをレスポンシブデザインに適応させることができます。

○ライブラリ

これは完成コードがあつまっている場所のことです。オープンソースとして有段活用できるし、無料ってすごい。

今回レスポンシブデザインを学んだりして、どんどん自分が作るホームページが豪華になってくるのが楽しい。もっと応用できるようになりたいです。