最適なコード化するために

最適なコードにするためにアドバイスを頂けると幸いです。
すっきりとしていて見やすいコードにしたいのですが、勉強不足で間違っている部分があると思いますのでご指摘いただけると幸いです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>Portfolio Site</title><!--タイトル-->
6        <meta name="description" content="ポートフォリオサイト"><!--説明-->
7        <link rel="icon" type="image/png" href="img/○○"><!--ロゴ-->
8        <meta name="viewport" content="width=device-width, initial-scale=1">
9        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10        <link href="css/style.css" rel="stylesheet">
11        <link href="css/responsive.css" rel="stylesheet">
12        <!--font-->
13        <link rel="preconnect" href="https://fonts.googleapis.com">
14        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15        <!--Roboto Slab-->
16        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet">
17        <!--Arizonia-->
18        <link href="https://fonts.googleapis.com/css2?family=Arizonia&family=Fredericka+the+Great&family=Genos&family=Major+Mono+Display&display=swap" rel="stylesheet">
19        <!--Ubuntu-->
20        <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
21        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
22    </head>
23
24    <body>
25      <div class="SiteWrapper">
26        <div class="home">
27
28          <header>
29            <div class="home-header">
30              <ul>
31                <li><a href="index.html">Home</a></li>
32                <li><a href="about.html">About</a></li>
33                <li><a href="works.html">Works</a></li>
34                <li><a href="contact.html">Contact</a></li>
35              </ul>
36            </div>
37          </header>
38
39          <main>
40            <div class="home-text">
41              <p>タイトル</p>
42            </div>
43        </div>
44            <div class="home-about">
45              <div class="home-title">
46                <p>ABOUT</p>
47              </div>
48              <div class="home-about-cell">
49                <div class="home-about-img">
50                  <img src="img/画像.png"   alt="エンジニアのイラスト">
51                </div>
52                <div class="home-about-myself">
53                  <div class="home-about-name">
54                    <p>名前</p>
55                  </div>
56                  <div class="home-about-intro">
57                    <p>高校3年生のときに、プログラミングに興味を持ち、勉強を開始</p>
58                    <p>2021年　○○大学○○学部入学</p>
59                  </div>
60                </div>
61              </div>
62            </div>
63            <div class="home-works">
64              <div class="home-title">
65                <p>WORKS</p>
66              </div>
67              <div class="home-works-all">
68                <div class="home-works-cell">
69                  <a href="#">
70                    <img src="img/Sample1.png" alt="">
71                    <p>アパレルショップHP</p>
72                  </a>
73                </div>
74                <div class="home-works-cell">
75                  <a href="#">
76                    <img src="img/j306_2_21.jpg" alt="">
77                    <p>タイトル</p>
78                  </a>
79                </div>
80                <div class="home-works-cell">
81                  <a href="#">
82                    <img src="img/j306_2_21.jpg" alt="">
83                    <p>タイトル</p>
84                  </a>
85                </div>
86              </div>
87              <div class="home-works-all">
88                <div class="home-works-cell">
89                  <a href="#">
90                    <img src="img/j306_2_21.jpg" alt="">
91                    <p>タイトル</p>
92                  </a>
93                </div>
94                <div class="home-works-cell">
95                  <a href="#">
96                    <img src="img/j306_2_21.jpg" alt="">
97                    <p>タイトル</p>
98                  </a>
99                </div>
100                <div class="home-works-cell">
101                  <a href="#">
102                    <img src="img/j306_2_21.jpg" alt="">
103                    <p>タイトル</p>
104                  </a>
105                </div>
106              </div>
107              <div class="home-works-all">
108                <div class="home-works-cell">
109                  <a href="#">
110                    <img src="img/j306_2_21.jpg" alt="">
111                    <p>タイトル</p>
112                  </a>
113                </div>
114                <div class="home-works-cell">
115                  <a href="#">
116                    <img src="img/j306_2_21.jpg" alt="">
117                    <p>タイトル</p>
118                  </a>
119                </div>
120                <div class="home-works-cell">
121                  <a href="#">
122                    <img src="img/j306_2_21.jpg" alt="">
123                    <p>タイトル</p>
124                  </a>
125                </div>
126              </div>
127            </div>
128            <div class="home-contact">
129              <div class="home-title">
130                <p>CONTACT</p>
131              </div>
132              <div class="form">
133                <div class="form-item">
134                  <p class="form-item-label"><span class="form-item-label-required">必須</span>氏名</p>
135                    <input type="text" class="form-item-input" placeholder="例）山田太郎">
136                </div>
137                <div class="form-item">
138                  <p class="form-item-label"><span class="form-item-label-required">必須</span>メールアドレス</p>
139                  <input type="email" class="form-item-input" placeholder="例）example@gmail.com">
140                </div>
141                <div class="form-item">
142                  <p class="form-item-label isMsg"><span class="form-item-label-required">必須</span>お問い合わせ内容</p>
143                  <textarea class="form-item-textarea"></textarea>
144                </div>
145                <input type="submit" class="form-btn" value="送信する">
146              </div>
147            </div>
148          </main>
149          <footer>
150            <div class="footer">
151              <p><small>&copy 2021 ALL rights reserved.</small></p>
152            </div>
153          </footer>
154      </div>
155      <script src="script.js"></script>
156    </body>
157</html>
158

CSS
1@charset "UTF-8";
2/*共通
3------------------------------*/
4html {
5  font-size: 100%;
6}
7a {
8  text-decoration: none;
9  color: #000;
10}
11img {
12  max-width: 100%;
13}
14.SiteWrapper {
15  min-height: 100vh;
16}
17/*HEADER
18------------------------------*/
19/*HOME
20------------------------------*/
21.home {
22  height: 100vh;
23  background-image: url("../img/emile-perron-xrVDYZRGdw4-unsplash.jpg");
24  background-repeat: no-repeat;
25  background-size: cover;
26}
27.home-header {
28  height:80px;
29}
30.home-header ul {
31  display: flex;
32  list-style: none;
33  float: right;
34  padding: 20px 20px;
35}
36.home-header a {
37  font-size: 1.5rem;
38  color: #000;
39  padding: 0 10px;
40  font-family: 'Roboto Slab', serif;
41  font-weight: bold;
42}
43.home-header a:hover {
44  color: #00a1e9;
45}
46.home-text p {
47  font-size: 9rem;
48  font-family: 'Arizonia', cursive;
49  color: #fff;
50  font-weight: bold;
51  margin: 180px auto;
52  text-align: center;
53}
54.home-title {
55  font-size: 2.0rem;
56  font-weight: bold;
57  font-family: 'Ubuntu', sans-serif;
58  text-align: center;
59  letter-spacing: 10px;
60  padding: 60px;
61}
62.home-about {
63  padding: 0 10%;
64  background-color: #eaeaea;
65}
66.home-about-cell {
67  display: flex;
68}
69.home-about-img {
70  width: 50%;
71}
72.home-about-img img {
73  width: 400px;
74  margin: 40px 0 50px 70px;
75}
76.home-about-myself {
77  width: 50%;
78}
79.home-about-name {
80  font-size: 2.0rem;
81  font-weight: bold;
82  font-family: 'Ubuntu', sans-serif;
83  word-break: break-all;
84  margin: 30px 0;
85}
86.home-works {
87  margin-bottom: 50px;
88}
89.home-works-all {
90  display: flex;
91  justify-content: center;
92}
93.home-works-cell {
94  background-color: #e7e7e7;
95  width: 350px;
96  height: 280px;
97  margin: 10px 20px;
98}
99.home-works-cell img {
100  margin: 10px 10px;
101  width: 330px;
102  height: 184.765px;
103}
104.home-works-cell p {
105  padding-top: 10px;
106  text-align: center;
107}
108.home-contact {
109  background-color: #2c2c2c;
110  color: #fff;
111}
112.form {
113  margin: 0 auto;
114  padding-bottom: 50px;
115  max-width: 720px;
116}
117.form-item {
118  border-top: 1px solid #ddd;
119  padding: 24px 0;
120  width: 100%;
121  display: flex;
122  align-items: center;
123}
124.form-item:nth-child(5) {
125  border-bottom: 1px solid #ddd;
126}
127.form-item-label {
128  width: 100%;
129  max-width: 248px;
130  letter-spacing: 0.05em;
131  font-size: 18px;
132}
133.form-item-label.isMsg {
134  margin: 8px 0 auto 0;
135}
136.form-item-label-required {
137  border-radius: 6px;
138  margin-right: 8px;
139  padding: 8px 0;
140  width: 48px;
141  display: inline-block;
142  text-align: center;
143  background-color: #00a1e9;
144  color: #fff;
145  font-size: 14px;
146}
147.form-item-input {
148  border: 1px solid #ddd;
149  border-radius: 6px;
150  margin-left: 40px;
151  padding: 0 1em;
152  height: 48px;
153  flex: 1;
154  width: 100%;
155  max-width: 410px;
156  background: #eaedf2;
157  font-size: 18px;
158}
159.form-item-textarea {
160  border: 1px solid #ddd;
161  border-radius: 6px;
162  margin-left: 40px;
163  padding: 0 1em;
164  height: 216px;
165  flex: 1;
166  width: 100%;
167  max-width: 410px;
168  background-color: #eaedf2;
169  font-size: 18px;
170}
171.form-btn {
172  border-radius: 6px;
173  margin: 32px auto 0 auto;
174  padding: 20px;
175  width: 280px;
176  display: block;
177  letter-spacing: 0.05em;
178  background-color: #00a1e9;
179  color: #fff;
180  font-weight: bold;
181  font-size: 20px;
182}
183.contact-ex {
184  text-align: center;
185}
186/*FOOTER
187------------------------------*/
188.footer {
189  background-color: #000;
190  color: #fff;
191  text-align: center;
192}
193

m.ts10806

2022/01/25 21:02

現状の問題点や目指すイメージが欲しいです。いずれにしても、要件通りのレイアウトが実現できていて不具合がないなら構わないと思います。ゴールは１つかもしれませんがルートは無数にあります。「最適」というのは存在しないものと考えて良いです。

m.ts10806

2022/01/25 21:03

それに・・ご自身で「間違っている部分がある」という自覚があるのでしたら、「どうなったら正しい」というのを提示しないことには他者には手が出せません。技術があってもコードから要件を正確にくみ取るのは他者には不可能です。

行動規範の内容に同意します

回答1件

最適なコードにするためにアドバイスを頂けると幸いです。
すっきりとしていて見やすいコードにしたいのですが、勉強不足で間違っている部分があると思いますのでご指摘いただけると幸いです。

HTMl5の勉強ということならばこういうのを使ってみてはいかが？
Another HTML-lint

質問文のコードをツールにかけましたが、
href="img/○○"みたいなダミーデータに対する指摘はさておき、
43行目の閉じdivタグが多いみたいな問題が見受けられます。

またscriptタグが上に下に散っているので
head要素の中に統一させることを推奨します。
それに伴いdefer属性を付与しましょう。
<script defer> - MDN

後は特定のタグが出るたびに
適した使い方ができるよう、ある程度ちゃんとしたWebサイトを覚えておき使い方を都度確認できるようにしておくと良いでしょう。

なにをもって「ちゃんとしたサイト」と言えるかは、
仕様書に準拠した説明が出来ているかどうかで見分けられます。
HTMLやCSS、JavaScript等の言語は仕様を作っている団体が仕様書を公開しています。
↓こういうやつ
https://html.spec.whatwg.org/

この仕様を読めとは流石に言いませんが
Web上の記事を読んだ時、執筆者が主観で書いているだけで実は情報が正しくないかもしれない。
こう疑わないといけないのは辛くないですか？

上の2サイトはとりあえず仕様書の該当箇所へのリンクがあり、
実際に開いて中をみてみるとざっと読んだ感じ正しそうだなという裏付けも取れます。
いざというときの安心感ってやつですね。

雑学として何故scriptを閉じbodyの直前に記述しているかという歴史的背景を解説します。
JavaScriptは今でこそHTMLをブラウザが解析して、描画の為にメモリ空間上に生成したDOMと呼ばれる集合体。
DOMツリーをブラウザが作り、それをJavaScriptが編集することで画面の再描画を促すという役割分担ができました。

しかし、そもそもJavaScriptにはdocument.writeを始めとする
HTMLに直接文字列を書き込んでしまうような機能が存在します。
全てのJavaScriptが実行している最中はHTML→DOMツリーの展開を停止せよという作りになっています。
その結果、重いJavaScriptのファイルのロード・実行が完了するまでは何もできない……

このdocument.writeを使う手法はJavaScriptでやる意味がないので早々に廃れましたが、
昨日閲覧できたページがブラウザ等のアップデートでエラーが出て読めなくなることは避けたい……
という思想からJavaScriptは機能の廃止をしないという思想でバージョンアップしているのでこういう機能がまだ残っています。

そういう観点の話になるので、そもそも今回の質問文のケースのように
head要素内にクソ重いjQueryを読み込むスクリプトファイルが定義されているのはかなりの痛手となります。
だからbodyまでのDOMツリー描画が全て終わって、待機時間でJavaScriptの実行をしてくれよ……
これが閉じbodyタグの直前にscriptタグを記述する意味となります。
(昔はGoogle等が貴方のWebサイトを高速に表示させるためには……みたいなアナウンスと共に紹介してくれていました)

流石にそれは不便だってことで、HTML5への移行に伴い、
DOMツリーを全て構築し終わるまでJavaScriptの実行を遅らせるdeferが登場します。
これによりscriptタグをhead内に固めても不都合がないようになったのです。

最後にHTML5はデータフォーマットであり、それ以上でも以下でもありません。

HTMLやXML共通の弱点として人間が手作業で読み書きするには辛いという弱点があります。
現に質問文で閉じタグに不整合出してますよね。
機械に読ませる事が先行している言語なんで人間は極力触りたくない言語なんです。

なのでHTML求道者になるよりは
普段の記事の執筆はMarkdownで行いHTMLに変換してからWeb上で公開する。
ガッツリHTMLを書かなきゃいけないときは、
インデント(字下げ)で親子を表現するPug等のテンプレート言語からHTMLを生成して公開する。

このように人がHTMLを直接触らなくても良い為のツールが沢山存在します。

普段からツールを勉強して、動かしてみて、
いざWebサイト作るぞヨーイドンとなった時、他の奴より100倍の速度でWebサイトをリリースできる。
これをゴールに平行して学習してみてください。

投稿2022/01/25 21:48