Q&A
現状の問題点や目指すイメージが欲しいです。
いずれにしても、要件通りのレイアウトが実現できていて不具合がないなら
構わないと思います。
ゴールは１つかもしれませんがルートは無数にあります。
「最適」というのは存在しないものと考えて良いです。
最適なコードにするためにアドバイスを頂けると幸いです。
すっきりとしていて見やすいコードにしたいのですが、勉強不足で間違っている部分があると思いますのでご指摘いただけると幸いです。
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>© 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
それに・・ご自身で「間違っている部分がある」という自覚があるのでしたら、
「どうなったら正しい」というのを提示しないことには他者には手が出せません。
技術があってもコードから要件を正確にくみ取るのは他者には不可能です。
回答1件
0
最適なコードにするためにアドバイスを頂けると幸いです。
すっきりとしていて見やすいコードにしたいのですが、勉強不足で間違っている部分があると思いますのでご指摘いただけると幸いです。
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
総合スコア21461
あなたの回答
tips
プレビュー
