見出し画像

Webプログラミングの始め方(10)

ここでのゴール

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という機能を使ってみました。

画像1

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

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

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

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

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

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

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

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

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

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

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

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

ワイヤーフレーム.drawio

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

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

この記事が気に入ったらサポートをしてみませんか?