KAT no.5 グリッドシステム＋スマホ対応
最近、僕のヒーローアカデミアにはまりました。３月末から第５期のアニメもあるので楽しみにしているところです。それと、今、人気のブルーピリオド。これも読みましたが、面白い!! 漫画から学ぶこともありますよね。
こんな感じで春休みを楽しんでいるところですが、先日、KATインターンの第５回目がありました。今回は、CSSの勉強に加えて、Wordpressにも触れた盛りだくさんの内容でした！！
＝CSS＝
＊グリッド
グリッドとは格子状の線のことです。グリッドを活用することで、余白やレイアウトを統一的に、きれいに配置することができます。
～グリッドレイアウトの実装～
HTML
<div class="wrapper">
<div>
<h1>one</h1>
</div>
two,three,four,...同じように記入
</div>
上記のコードにより、3列のセルを実装できます。
また、下記のコードを追加することで、それぞれの行の高さを変更することができます。
grid-template-rows: 150px 100px;
※ row：行 column：列
～デザインを個別に指定～
HTML classを指定する
<div class="one">
<h1>one</h1>
</div>
two,three,four,...同じように記入
.three {
grid-row: 1/3;
grid-column: 3/4;
background: black;
}
.six {
grid-row: 3;
grid-column: 3;
background: pink;
}
.threeでは、3列目の上から2行のエリアを黒に
.sixでは、3列目の3行目のエリアをピンクに というようにclassの指定により、セルごとにスタイルを変更することができます。
さらに、column-gap: 〇px;の追加により列の間隔、row-gap: 〇em;の追加により行の間隔を指定することができます。
実際に、グリッドシステムを実装してみましたが、簡単にきれいな配置でセルを置くことができました。ひとつひとつ設定して置いていくよりも、グリッドシステムは簡単に均等に配置できるので楽ですね。
＊レスポンシブ・デザイン
ブラウザの環境（iPhoneやiPad、PCなど）に応じて表示を適応させることをレスポンシブ・デザインと言います。これを実装することにより、どのブラウザ環境で見ても見やすい表示になります。
その中でも、スマホで見たときに見やすいスマホ・フレンドリーは、スマホで検索することの多い今では絶対に必須となっています。（Google検索の結果にも影響する!!）
＊ライブラリ
ライブラリとは、完成コードの集まりです。なぜ完成コードが公開されているのかというと、発展させてさらにいいものを作ろうという「オープンソース」の考え方があるからです。例：GitHub
また、完成コードをコピーやダウンロードするのではなく、ネット上から直接プログラムを読み込むDLL（ダイナミック・リンク・ライブラリ）もあります。
ライブラリの活用は、時間の削減や参考になるコードをアレンジすることもできるというメリットがあるので、せっかくだから活用していきたいです。
BulmaやBootstrapなど、Webページの実装に必要な機能やプログラムが詰まったプログラムパックのことをフレームワークといいます。
Bootstrapは以前、別の活動で勉強したことがあるのですが、コードが複雑になっていくにつれて、私には難しかったです。😢
＊viewportの設定
表示の幅＝デバイスの幅に合わせる ためのコードです。
<meta name="viewport" content="width=device-width,initial-scale=1">
これを入れることにより、スマホやタブレットなどで最適に表示できるようにします。
＊メディアクエリ
スマホやタブレットなどパソコンとは異なった表示に設定したい場合には、@media~を使います。
⇩ブラウザの幅が670px以下の場合に適用される
実際に、グリッドをスマホ対応（ブラウザの幅が670px以下）にしたCSSを記述すると
PCの場合のCSS
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 150px 100px;
column-gap: 5px;
row-gap: 1em;
}
.one {
background: rgba(20, 40, 60, 5);
}
two,four,fiveも同様
.three {
grid-row: 1/3;
grid-column: 3/4;
background: black;
}
.six {
grid-row: 3;
grid-column: 3;
background: pink;
}
スマホの場合
@media all and (max-width: 670px) {
.wrapper {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px;
column-gap: 0px;
}
.three {
grid-row: 3;
grid-column: 1;
background: black;
}
.six {
grid-row: 6;
grid-column: 1;
background: pink;
}
}
～PC～
～スマホ～
グリッドが3列の表示から1列の縦表示に変化しています。
このように、ブラウザの幅に応じて表示を変化させることにより、見やすい画面を作ることができます。
＊CMS（Contents Management System）
CMSとは、簡単にWebサイトの構築や更新ができるシステムのことです。主にPHP言語とデータベースの組み合わせで構成されており、私たちがこれから使っていくWordpressもCMSとのことでした。
また、CMSはデータベース上にテキストや画像が個別に保管されており、Webページを読み込む際にそれぞれのデータが集まって、ひとつのページが作られるという仕組みになっています。一方、CMSが使われていないWebサイトでは、１つのページで作られています。そのため、CMSを使ったWebサイトは、更新をしたい部分だけの変更を簡単に行うことができるので、効率的で迅速な構築をすることができます。
その他にもCMSは、プログラミングの知識がなくてもできる、プラグインによる機能拡張などのメリットがあるので、とても便利なシステムです。
＊Wordpressのテーマ設定
今回は、私たち2年生も関わらせていただいている案件を元に、テーマの選択をしてみました。
ネットでオススメのテーマ名を検索してみたりもしてみたのですが、検索した名前でも量が多く、かなり時間がかかりました。まだWordpressを触り始めたばかりなので、少しずつ使い方に慣れていきたいと思います！
＊感想
今回の初期トレは、覚えておくべきことが多くあったように思います。グリッドシステムのスマホ対応も少し時間がかかってしまったので、もっとスムーズにできるようになればいいなと思いました。また、フレームワークやWordpressなど、活用できるものは活用してもっとうまくなっていければいいなと思います！
おわり
