Webプログラミングの始め方（１０）

ここでのゴール

CSSってなんぞやってのをざっくりと理解する

説明

前回作ったCSSについて見ていきます。

#input_container {
   display: grid;
   grid-template-areas:
       "grid-title-1area grid-title-2area grid-title-3area"
       "grid-input-1area grid-input-2area grid-input-3area"
       "grid-error-1area grid-error-2area grid-error-3area";
}

#id_label {
   grid-area: grid-title-1area;
}

#lastName_label {
   grid-area: grid-title-2area;
}

#firstName_label {
   grid-area: grid-title-3area;
}

#id {
   grid-area: grid-input-1area;
}

#lastName {
   grid-area: grid-input-2area;
}

#firstName {
   grid-area: grid-input-3area;
}

#id_error {
   grid-area: grid-error-1area;
}

#lastName_error {
   grid-area: grid-error-2area;
}

#firstName_error {
   grid-area: grid-error-3area;
}

ここでもざっくりと把握していきましょう。

今回は横並びの配列（Excelのセル）みたいな使い方をしたかったので、その設定にgridという機能を使ってみました。

こんな感じで特定の場所に、思っている内容を表示させたい。ので、調べてみましょう。

開発者向けのウェブ技術 | MDN

こちらの検索から、やりたいことはセルの様に使いたいので、セルと検索してみると、いきなり「grid：セル」とか出てくるのでここを読んでみます。読んでいくと、なんとなくやりたいことが出来そうですので、更に読み勧めます。

グリッドレイアウトの基本コンセプトを読むとやりたいことができそうです。全部読むのはしんどいので、google先生で誰か同じことをやっていないかを探します。

自分が解り易いサンプルを見つけたら、それを応用して、自分の実装したい形に持っていきます。

今回は、input_containerというIDにgridを適用します。

このID：input_containerはlist.htmlのidと紐付いていますので検索してみてください。

そして、grid-template-areasでどの様な形にするかを決めています。今回は「タイトル」、「入力欄」、「エラー表示」をそれぞれ「ID」、「姓」、「名」に対して使いたいので３✕３のglid（セル）を使います。

"grid-title-1area grid-title-2area grid-title-3area"

この部分が、それぞれIDを指定しています。半角スペースでセパレートしており、１行に対するグリッドを３つに分けています。

#id_label {
   grid-area: grid-title-1area;
}

そして、この部分でID：id_labelはID：grid-title-1areaですよ、と紐付けを行っています。

それではイメージを書いていきましょう。

こんなイメージです。ざっくりどこに何を配置してどんな名前にするかイメージを作る資料をワイヤーフレームと言います。デザインする方は必須ですかね？

CSSはデザインに関する大きさ、色、形などをまとめて配置しており、それらを他のページでも使える様にすることで、全体的な統一感や、手間を軽減してくれるものになっています。