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

ここでのゴール

htmlとのつながりをざっくり理解

全部つながっているよ

説明

htmlに使われているフレームワークとCSSを見てきました。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;
}

ID：input_containerでgridを定義しgridのエリアの名前を左上：grid-title-1areaと定義し、ID：id_labelがgrid-area：grid-title-1areaですよとなっており追える様になっています。

ではHTMLファイルとの関係を見ていきましょう。

  <link rel="stylesheet" type="text/css"
       href="./css/input_container.css"
       th:href="@{/css/input_container.css}"/>

HTMLではこの記述の様にstyleSheetを読み込み、HTML内で使える様にしています。と考えると、以下の図の様にやはり全部がつながっていることが、理解できると思います。

プログラムは色々置き場所が有るのですが、全てがつながっています。ですので、つながっているよって事を意識することで、コンパイルエラーが出た時の対処や、表示崩れをしている理由などを類推することが出来る感じです。

このつながっている事はthymeleafを使った際にJava側とも同じ様につながっていると認識をすることで、今後も理解が深まっていくと思いますので、覚えておいてください。