初心者コヌダヌがやりがちなミスを解説

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>お客様の芖点に立ち、誠実で真心を蟌めたサヌビスを提䟛臎したす。</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デザむナヌに関わる情報を発信しおいたす
よろしければ他の蚘事もご芧ください。

トレヌナヌ 廣岡

トレヌナヌ 廣岡

姫路垂の制䜜䌚瀟「゚スティヌ・クリ゚むティブ」瀟員。姫路垂を䞭心に、これたでに手がけたホヌムペヌゞ制䜜の総数は300件を超え、倚岐にわたる業皮・業態に察応。小芏暡な店舗サむトから倧芏暡な䌁業サむトたで幅広く察応しおいたす。

関連蚘事

新着蚘事

むベント・講評䌚レポヌト

グラフィックデザむン講座の講評䌚を実斜したした

むベント情報

2026幎3月29日(日)14:00「採甚担圓者の目に留たるポヌトフォリオ講座」

むベント情報

2026幎3月25日(日)19:00 はじめおの「UXデザむン思考」ビゞネスずデザむンを぀なぐ、これからの共通蚀語

むベント情報

2026幎4.5月生募集開始

Reスキル玹介
デゞタルハリりッドスタゞオ姫路個別説明䌚
デゞタルハリりッドスタゞオ姫路個別説明䌚

新着蚘事

  1. グラフィックデザむン講座の講評䌚を実斜したした

  2. 2026幎3月29日(日)14:00「採甚担圓者の目に留たるポヌトフォリオ講座」

  3. 2026幎3月25日(日)19:00 はじめおの「UXデザむン思考」ビゞネスずデザむンを぀なぐ、これからの共通蚀語

カテゎリヌ

ランキング

  1. 1

    メヌルフォヌムプロの蚭眮方法ず蚭定方法

  2. 2

    スクロヌル時にコンテンツをふわっず衚瀺させるアニメヌション実装

  3. 3

    姫路゚リアで通えるおすすめパ゜コン教宀10遞

  4. 4

    【コヌス玹介】䞀番人気の定番コヌス「Webデザむナヌ専攻」ずは

  5. 5

    WEBデザむンの䞊達に欠かせない「暡写」の方法

TOP