初心者コーダーがやりがちなミスを解説!WEBデザイナー養成スクール「デジタルハリウッドスタジオ姫路」のオフィシャルブログです。初心者コーダーがやりがちなミスを解説!2024.05.28初心者コーダーがやりがちなミスを解説!WEBデザイナーノウハウ集こんにちは!デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。Webデザイナーを目指す勉強中の生徒さんから様々な質問を受けます。コーディングにおいて、みなさん同じような失敗をしているなぁと感じたのでこの記事を書くことにしました。これから、Webデザイナーやコーダーを目指す方に参考になれば幸いです。まとめHTML編いきなりコーディングに入るレスポンシブデザインではパソコンとスマートフォンでレイアウトが変わることがあります。パソコンのデザインだけを見て、スマートフォンデザインを確認しないまま進めると書き直す手間が余計にかかることがあります。パソコンとスマートフォンデザイン両方をしっかりと確認して、「ここはこの順番に書いたほうがいいな」「こことここはdivで括ろう」と効率良くコーディングするための構成を良く考えましょう。divタグばかり使っているHTMLタグはそれぞれに意味や役割を持っています。divタグは、グループ化するためのタグでHTMタグとして意味が無いので、使い過ぎは良くないとされています。どのタグを使ったら良いか迷うからといって、divタグを多用するのは良くないです。SEO対策にも良くないので、マークアップする時には意識してタグを使い分けてください。<h1>~<h6>:見出しに使用します。<p>:文章の段落に使用します。<ul><ol><li>:リストに使用します。同じようなコンテンツが並ぶ場合にも使用します。<dl><dt><dd>:用語とその説明が必要なリストに使用します。画像と文章のセットが並ぶ場合等に用いられることがあります。<section>:見出しを伴う文章の節目や区間に使用します。<div>:特別な意味はなく、要素をグループ化する際に使用します。<span>:divタグと同様に特別な意味はなく、要素をグループ化する際に使用します。<header>:サイトのヘッダー部分を構造化する際に使用します。<nav>:サイトのメニュー部分を示す際に使用します。<main>:ページ内の主要コンテンツに使用します。<footer>:サイトのフッター部分を構造化する際に使用します。悪い例<div><div><div><div>強み</div><div>スタッフ紹介</div><div>会社概要</div></div></div></div><div><div><div>お客様目線のまごころ対応</div><div>お客様の視点に立ち、誠実で真心を込めたサービスを提供致します。HIMEJI</div></div>良い例<header><nav><ul><li>強み</li><li>スタッフ紹介</li><li>会社概要</li></ul></nav></header><main><section><h1>お客様目線のまごころ対応</h1><p>お客様の視点に立ち、誠実で真心を込めたサービスを提供致します。HIMEJI</p></footer>classを付け過ぎる&名前が分かりにくいHTMLは短い方が管理が楽になります。CSSを適用させるためにclassやidを使いますが、すべてのタグにつけるのではなく、なるべく最低限にしましょう。flex;}全ての要素にclassを付与しなくても、指定可能です。CSSは箇所の特定できる親要素から書くと、分かりやすく管理しやすいです。100%;}↑aboutセクションの内容が書いてあることが一目で分かる。他のセクションで同名のclassを使ってしまってもCSSが喧嘩しません。ブロック要素とインライン要素の違いが分かっていない「指定しているのに動いてくれない」「リンクがクリック出来ない」という場合は、「ブロック要素」と「インライン要素」を正しく使い分けられていないことが多いです。タグはそれぞれインライン要素とブロック要素のどちらかに分類されています。それぞれの特性を理解していないと、コーディングが行き詰まってしまうことが多いです。要素が横に並んでいく幅や高さは指定できず、要素の大きさで決まるimgspanaインライン要素とブロック要素について、良くわからないという方はもう一度理解できるように勉強してみてください。absoluteは要素を自由自在に配置出来て便利に思えますが、レスポンシブデザインとの相性はあまり良くありません。パソコンではうまくいっていても、スマートフォンをコーディングする時に詰みます。absoluteの使用は最小限にしましょう。高さ(height)を指定しているpositionやfloatを使っていると、高さが出なくなることがあります。要素がある限り必ず高さは出るので、出ないのには理由があります。原因を特定して、安易に高さを指定しないようにしましょう。レスポンシブデザインのコーディングでは高さはデバイスによって可変します。高さが出ないからといって、レスポンシブコーディングで高さ(height)を指定するのはNGです。同じ指定を何度もしているHTMLと同様にCSSもなるべく最小限のコードで記述したほうが管理が楽になります。同じ指定をまとめたり、複数classを使用するなど、なるべく記述が少なくなるような工夫をしましょう。alt="専門スタッフがご案内">専門スタッフがご希望をお伺いしながら、スタジオをご案内いたします。alt="授業を体験">ご希望の方は、簡単にWebサイトの制作を体験できます。alt="コースを詳しく解説">目的にあわせた授業内容や、受講スケジュールなどを、ご紹介させていただきます。alt="専門スタッフがご案内">専門スタッフがご希望をお伺いしながら、スタジオをご案内いたします。alt="授業を体験">ご希望の方は、簡単にWebサイトの制作を体験できます。alt="コースを詳しく解説">目的にあわせた授業内容や、受講スケジュールなどを、ご紹介させていただきます。#fff;}px指定しすぎているなんでもかんでもpx指定してしまうと、別のデバイスから見ると崩れてしまっているということが多いです。スマートフォンではpx指定はなるべく避けましょう。コーディング時はpx指定でレイアウトを決めるのではなく、代わりに「%」や「vw」を使うようにしましょう。「%」や「vw」だと、画面幅に応じて大きさが変化するので、どのデバイスでもデザイン通りの見た目を実現することができます。余白の取り方を統一していない前後の要素の上下のmarginがかぶると、marginが相殺されて意図通りに余白がとれないことがあります。このため、上下左右の余白をつけるときは、なるべくどちらにつけるかルールを決めておきましょう。Chromeの「デベロッパーツール」)を使いこなすことです。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。HTMLやCSSから目視で探さなくても、視覚的に修正箇所を特定出来ます。まとめ今回は、初心者コーダーがやりがちな失敗例について紹介しました。HTMLやCSSに触れる方は覚えることが多いのです。全てを完璧に理解する必要はありません。雰囲気で覚えて、時間をかけて、ゆっくり着実に実力をつけていきましょう。この記事が初心者コーダーの参考になれば幸いです。このブログではWebデザイナーに関わる情報を発信しています!よろしければ他の記事もご覧ください。姫路市の制作会社「エスティー・クリエイティブ」社員。姫路市を中心に、これまでに手がけたホームページ制作の総数は300件を超え、多岐にわたる業種・業態に対応。小規模な店舗サイトから大規模な企業サイトまで幅広く対応しています。イベント情報イベント・講評会レポートWEBデザイナーノウハウ。