![見出し画像](https://assets.st-note.com/production/uploads/images/60956458/rectangle_large_type_2_d063444e50a33c6fdf7d4992493a40a9.jpeg?width=1200)
Photo by
ryonakano
Webプログラミングの始め方(11)
ここでのゴール
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側とも同じ様につながっていると認識をすることで、今後も理解が深まっていくと思いますので、覚えておいてください。
この記事が気に入ったらサポートをしてみませんか?