こんにちは！
デジタルハリウッド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>お客様の視点に立ち、誠実で真心を込めたサービスを提供致します。</div>
</div>
</div>
<div>
<div>Copyright © DIGITAL HOLLYWOOD STUDIO HIMEJI</div>
</div>良い例
<header>
<nav>
<ul>
<li>強み</li>
<li>スタッフ紹介</li>
<li>会社概要</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>お客様目線のまごころ対応</h1>
<p>お客様の視点に立ち、誠実で真心を込めたサービスを提供致します。</p>
</section>
</main>
<footer>
<p>Copyright © DIGITAL HOLLYWOOD STUDIO HIMEJI</p>
</footer>classを付け過ぎる&名前が分かりにくい
HTMLは短い方が管理が楽になります。
CSSを適用させるためにclassやidを使いますが、すべてのタグにつけるのではなく、なるべく最低限にしましょう。
良くない例
<header>
<nav class="navigation">
<ul class="list">
<li class="menu01">強み</li>
<li class="menu02">スタッフ紹介</li>
<li class="menu03">会社概要</li>
</ul>
</nav>
</header>.list {
display: flex;
}良い例
<header>
<nav class="navigation">
<ul>
<li>強み</li>
<li>スタッフ紹介</li>
<li>会社概要</li>
</ul>
</nav>
</header>nav.navigation ul {
display: flex;
}全ての要素にclassを付与しなくても、指定可能です。
また、CSSは箇所の特定できる親要素から書くと、分かりやすく管理しやすいです。
section.about .photo-area img {
width: 100%;
}↑aboutセクションの内容が書いてあることが一目で分かる。
また、他のセクションで同名のclassを使ってしまってもCSSが喧嘩しません。
ブロック要素とインライン要素の違いが分かっていない
「指定しているのに動いてくれない」「リンクがクリック出来ない」という場合は、「ブロック要素」と「インライン要素」を正しく使い分けられていないことが多いです。
タグはそれぞれインライン要素とブロック要素のどちらかに分類されています。
それぞれの特性を理解していないと、コーディングが行き詰まってしまうことが多いです。
ブロック要素の一例
ブロック要素は横までいっぱいに広がり、縦に並んでいく
- div
- p
- h1
インライン要素の一例
要素が横に並んでいく
幅や高さは指定できず、要素の大きさで決まる
- img
- span
- a
インライン要素とブロック要素について、良くわからないという方はもう一度理解できるように勉強してみてください。
CSS編
position:absoluteを多用している
position: absoluteは要素を自由自在に配置出来て便利に思えますが、レスポンシブデザインとの相性はあまり良くありません。
パソコンではうまくいっていても、スマートフォンをコーディングする時に詰みます。
positionは初期値のまま、flexboxやmarginなどを使ってposition: absoluteの使用は最小限にしましょう。
高さ(height)を指定している
positionやfloatを使っていると、高さが出なくなることがあります。
ただ、要素がある限り必ず高さは出るので、出ないのには理由があります。
原因を特定して、安易に高さを指定しないようにしましょう。
レスポンシブデザインのコーディングでは高さはデバイスによって可変します。
高さが出ないからといって、レスポンシブコーディングで高さ(height)を指定するのはNGです。
同じ指定を何度もしている
HTMLと同様にCSSもなるべく最小限のコードで記述したほうが管理が楽になります。
同じ指定をまとめたり、複数classを使用するなど、なるべく記述が少なくなるような工夫をしましょう。
悪い例
<main>
<section class="about">
<h3>スクール紹介</h3>
<p>平日22時まで、土日も開講しているから 自分のペースで学べて確実に実力が身につく!</p>
</section>
<section class="trial">
<h3>STUDIO姫路の「無料体験＆説明会」</h3>
<ul>
<li><img src="image01.jpg" alt="専門スタッフがご案内">専門スタッフがご希望をお伺いしながら、スタジオをご案内いたします。</li>
<li><img src="image02.jpg" alt="授業を体験">ご希望の方は、簡単にWebサイトの制作を体験できます。</li>
<li><img src="image03.jpg" alt="コースを詳しく解説">目的にあわせた授業内容や、受講スケジュールなどを、ご紹介させていただきます。</li>
</ul>
</section>
</main>section.about {
width: 1000px;
margin: 0 auto;
}
section.about h3 {
font-size: 20px;
text-align: center;
}
section.trial {
width: 1000px;
margin: 0 auto;
background-color: #111;
}
section.trial h3 {
font-size: 20px;
text-align: center;
color: #fff;
}良い例
<main>
<section class="about inner">
<h3 class="heading">スクール紹介</h3>
<p>平日22時まで、土日も開講しているから 自分のペースで学べて確実に実力が身につく!</p>
</section>
<section class="trial inner">
<h3 class="heading">STUDIO姫路の「無料体験＆説明会」</h3>
<ul>
<li><img src="image01.jpg" alt="専門スタッフがご案内">専門スタッフがご希望をお伺いしながら、スタジオをご案内いたします。</li>
<li><img src="image02.jpg" alt="授業を体験">ご希望の方は、簡単にWebサイトの制作を体験できます。</li>
<li><img src="image03.jpg" alt="コースを詳しく解説">目的にあわせた授業内容や、受講スケジュールなどを、ご紹介させていただきます。</li>
</ul>
</section>
</main>section.inner {
width: 1000px;
margin: 0 auto;
}
section h3.heading {
font-size: 20px;
text-align: center;
}
section.trial {
background-color: #111;
}
section.trial h3.heading {
color: #fff;
}px指定しすぎている
なんでもかんでもpx指定してしまうと、別のデバイスから見ると崩れてしまっているということが多いです。
特にスマートフォンではpx指定はなるべく避けましょう。
コーディング時はpx指定でレイアウトを決めるのではなく、代わりに「%」や「vw」を使うようにしましょう。
「%」や「vw」だと、画面幅に応じて大きさが変化するので、どのデバイスでもデザイン通りの見た目を実現することができます。
余白の取り方を統一していない
前後の要素の上下のmarginがかぶると、marginが相殺されて意図通りに余白がとれないことがあります。
このため、上下左右の余白をつけるときは、なるべくどちらにつけるかルールを決めておきましょう。
上下余白：margin-bottomでつけて、margin-topは使わない
左右余白：margin-leftでつけて、margin-rightは使わない
「要素を検証」を使いこなす
コーディングが早く上達するために一番大事なのが、「要素を検証」(Google Chromeの「デベロッパーツール」)を使いこなすことです。
視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。
HTMLやCSSから目視で探さなくても、視覚的に修正箇所を特定出来ます。
まとめ
今回は、初心者コーダーがやりがちな失敗例について紹介しました。
初めてHTMLやCSSに触れる方は覚えることが多いのです。
いきなり全てを完璧に理解する必要はありません。
雰囲気で覚えて、時間をかけて、ゆっくり着実に実力をつけていきましょう。
この記事が初心者コーダーの参考になれば幸いです。
このブログではWebデザイナーに関わる情報を発信しています！
よろしければ他の記事もご覧ください。
