Web制作

Web制作初心者の私が最初に混乱したこと8つ｜実際に作って分かったこと

2026.09.21

当サイトではアフィリエイト広告を利用しています。

Web制作初心者の私が最初に混乱したこと8つ｜実際に作って分かったことのアイキャッチ

Web制作を勉強し始めたころ、HTMLやCSSのコードを書くことよりも、「似たような言葉がたくさんあって、それぞれの違いが分からない」と感じることがありました。

HTMLを書いたあと、CSSをどうやってつなげて装飾するのか。classとidは何が違うのか。marginとpaddingはどちらを使えばいいのか。

さらに勉強を進めると、flexやgrid、position、レスポンシブデザイン、WordPressのPHPなど、新しく覚えることがどんどん増えていきました。

そこで今回は、Web制作を実際に勉強してサイトを作っていく中で、私が最初に混乱したことを8つまとめます。

同じようにWeb制作を始めたばかりの方の参考になればうれしいです。

Web制作を勉強し始めて最初に感じたこと

最初は、HTMLを書けばWebページが作れるので、「あとはCSSで見た目を整えていけばいい」と簡単に考えていました。

ところが、実際に自分でWebサイトを作り始めると、HTMLとCSSをどう組み合わせるのか、どのCSSをどこに指定すればいいのかで迷うことが増えていきました。

また、PCで見たときにはきれいに見えていても、スマートフォンで確認するとレイアウトが崩れてしまうこともあります。

そのため、Web制作ではコードを書くことだけではなく、「どう見せるか」「どの画面サイズで見られるか」まで考える必要があることを少しずつ知りました。

ここからは、その中でも特に最初に混乱した8つを紹介します。

① HTMLを書いたあと、CSSをどうつなげるのか分からなかった

Web制作を勉強し始めたころ、HTMLを書くこと自体は少しずつ理解できるようになりました。

ただ、次にCSSを勉強し始めたとき、「HTMLに書いた要素を、CSSでどうやって装飾するんだろう？」というところで最初につまずきました。

例えば、HTMLで次のように書いたとします。

<div class="card">
    <h2>CSSを学ぼう</h2>
    <p>Web制作の基本を学びます。</p>
</div>

このHTMLだけでも文字は表示されます。

しかし、背景色を付けたり、余白を作ったり、枠線を追加したりするにはCSSが必要です。

.card {
    padding: 24px;
    background-color: #FFFFFF;
    border: 1px solid #E8E1D8;
    border-radius: 12px;
}

ここで初めて、「HTMLにclassを付け、そのclassをCSS側で指定することで、HTMLの見た目を変えられる」というつながりが分かってきました。

最初はHTMLとCSSを別々のものとして考えていましたが、実際にコードを書いてみると、HTMLで構造を作り、CSSで見た目を整えるという役割分担が少しずつ理解できるようになりました。

HTMLについて詳しく知りたい方は、こちらの記事でも基本をまとめています。

CSSの基本については、こちらの記事で紹介しています。

② classとidの違いが分からなかった

HTMLとCSSの関係が少し分かってくると、次に混乱したのがclassとidです。

どちらもHTMLに名前を付けているように見えるので、最初は「結局、何が違うんだろう？」と思っていました。

例えば、次のような書き方があります。

<div class="card">
    カード
</div>

<div id="header">
    ヘッダー
</div>

最初は、どちらを使っても同じようにCSSから指定できるように感じました。

実際に使ってみると、classは複数の要素に付けて同じデザインを使い回すときに便利で、idはページの中で特定の要素を指定するときに使われることが分かってきました。

例えば、複数のカードに同じデザインを適用するなら、

<div class="card">...</div>
<div class="card">...</div>
<div class="card">...</div>

のようにclassを使えます。

一方で、特定の場所を指定したい場合にはidを使うことがあります。

最初は難しく感じましたが、「classは共通して使う名前、idは特定の場所を示すもの」と考えると、自分には分かりやすくなりました。

③ marginとpaddingの違いが分からなかった

CSSを勉強していて、特に混乱したのがmarginとpaddingです。

どちらも余白を作るために使うので、最初は「どちらを使っても同じなのでは？」と思っていました。

例えば、

.box {
    margin: 20px;
}

とすると、要素の外側に余白ができます。

一方で、

.box {
    padding: 24px;
}

とすると、要素の内側に余白ができます。

実際にカードを作ってみると、その違いが見た目に表れるので、そこで少しずつ理解できるようになりました。

特に分かりやすかったのが、

margin＝要素の外側
border＝要素の枠線
padding＝要素の内側
content＝実際の内容

という関係です。

最初はコードだけを見てもイメージしにくかったので、色を変えて実際の範囲を確認してみると理解しやすくなりました。

余白を調整するときは、「要素の外側を空けたいのか、それとも内側を空けたいのか」と考えるようにすると、使い分けやすくなります。

簡単に覚えるなら、marginは外側、paddingは内側です。

④ widthとmax-widthの違いが分からなかった

Webサイトを作るようになってから、widthとmax-widthの使い分けにも迷いました。

特に、

.container {
    width: 100%;
    max-width: 1100px;
}

のように、両方が書かれているCSSを見たときは、「結局、幅は100%なのか1100pxなのか？」と疑問に感じました。

実際に画面の大きさを変えて確認してみると、少しずつ意味が分かってきました。

width: 100%;を指定すると、親要素の幅に合わせて広がります。

一方、max-width: 1100px;を設定すると、それ以上の幅には広がらないようにできます。

つまり、

.container {
    width: 100%;
    max-width: 1100px;
}

とすると、画面が狭いときには幅いっぱいに使い、画面が広くなっても最大1100pxまでに抑えることができます。

実際にWebサイトを作る中で画面幅を変えて確認すると、「widthで基本の幅を決めて、max-widthで上限を決める」という考え方が分かりやすくなりました。

⑤ flexとgridの違いが分からなかった

display: flex;を覚えたあと、gridというレイアウト方法が出てきたときも混乱しました。

「flexで要素を並べられるのに、どうしてgridもあるんだろう？」

最初はそんな疑問を持っていました。

例えば、flexなら次のように要素を並べられます。

.menu {
    display: flex;
    align-items: center;
    gap: 16px;
}

実際に使ってみると、横並びのメニューやボタン、カードなどを作るときにとても便利でした。

一方で、複数の列や行を含むレイアウトを作っていくと、gridという考え方も出てきます。

最初はflexとgridの違いを覚えようとして余計に混乱しましたが、「どちらを暗記するか」よりも、実際にレイアウトを作りながら使い方を覚えるほうが自分には分かりやすく感じました。

まずはdisplay: flex;を使って要素を並べてみると、CSSのレイアウトに慣れるきっかけになります。

⑥ レスポンシブデザインが思っていたより難しかった

Web制作を勉強していて、もう一つ大きく悩んだのがレスポンシブデザインです。

最初は、「PC用のデザインを作って、それを小さくすればスマートフォンでも使える」と考えていました。

ところが、実際にサイトを作ってみると、ユーザーが見ている画面の大きさはそれぞれ違います。

スマートフォン、タブレット、ノートPC、大きなモニターでは、使えるスペースが変わります。

そのため、自分が考えたデザインをそのまま小さくするだけでは、文字が窮屈になったり、ボタンが押しにくくなったり、要素がはみ出したりすることがありました。

そこで、スマートフォン用とPC用の両方を考えながらデザインする必要があることを学びました。

例えば、スマートフォンでは記事カードを1列で表示し、PCでは複数列にするという方法があります。

また、ヘッダーも画面サイズによって見せ方を変えることがあります。

スマートフォンでは、

ロゴ
検索
ハンバーガーメニュー

のように限られたスペースに必要なものを配置し、PCでは、

ロゴ
検索
ナビゲーション

というように構成を変えることもできます。

実際に自分のブログを作ってみると、「自分が作りたいデザイン」だけではなく、「ユーザーがどのような画面で見るのか」を考えることが大切だと実感しました。

レスポンシブデザインは、完成したPCデザインを後からスマートフォン用に小さくするだけではありません。

最初からさまざまな画面サイズを想定しながら、レイアウトや文字サイズ、余白などを考える必要があります。

ここは、Web制作を始めたころに特に難しいと感じた部分の一つでした。

⑦ relativeとabsoluteの使い方が分からなかった

positionについて勉強し始めたときも、最初は「要素の位置を動かすためのCSS」というくらいの理解でした。

代表的な値には、

relative
absolute
fixed
sticky

などがあります。

特に混乱したのがrelativeとabsoluteです。

実際にカードの右上にバッジを配置してみると、この関係が少し分かりやすくなりました。

.card {
    position: relative;
}

.badge {
    position: absolute;
    top: 16px;
    right: 16px;
}

カード側をrelativeにして、バッジ側をabsoluteにします。

すると、バッジをカードの右上へ配置できます。

最初はrelativeとabsoluteをそれぞれ別々に覚えようとしていました。

ところが、実際に小さなUIを作ってみると、「親側を基準にして、子要素の位置を調整する」という使い方が少しずつ分かってきました。

カードのバッジや画像の上に表示するラベルなど、実際の制作で使ってみると理解しやすいプロパティだと感じました。

⑧ WordPressのPHPが出てきて混乱した

HTMLとCSSを勉強して、少しずつWebページを作れるようになったあと、WordPressのオリジナルテーマを作ろうとすると、今度はPHPが出てきました。

例えば、

<?php the_title(); ?>

のようなコードを初めて見たときは、「HTMLを書いていたのに、急に違うものが出てきた」と感じました。

さらにWordPressテーマでは、

header.php
footer.php
front-page.php
single.php
sidebar.php

など、役割ごとにファイルを分けていきます。

最初はファイルが増えるほど複雑に感じました。

ただ、実際にテーマを作っていくと、それぞれに役割があることが少しずつ分かってきました。

例えば、共通して使うヘッダーやフッターを分けたり、記事ページとトップページで表示する内容を変えたりできます。

HTMLだけでWebページを作っていたときとは違い、WordPressでは記事タイトルや投稿日、カテゴリーなどの情報を動的に表示する必要があります。

そこで私は、「PHPを全部理解してからWordPressを作る」のではなく、「HTMLの中にWordPressが動的に表示する部分が入っている」と考えることで、少しずつ理解できるようになりました。

最初は難しく感じましたが、実際にテーマを作ってみると、HTML・CSS・PHPそれぞれの役割が少しずつつながってきました。

8つの混乱を振り返って分かったこと

ここまで振り返ってみると、最初はそれぞれが別々の難しい知識に見えていました。

HTMLを書いたあとにCSSで装飾し、classを使って要素を指定する。

そのうえでmarginやpaddingを使って余白を調整し、widthやmax-widthで幅を整える。

さらにflexやgridでレイアウトを作り、レスポンシブデザインを考えながらスマートフォンとPCの両方に対応させます。

必要に応じてpositionで要素の位置を調整し、最後にはWordPressのPHPを使ってサイト全体を動かしていきます。

こうして考えてみると、最初に混乱していたものが、少しずつつながっていることが分かりました。

一つひとつを見ると難しく感じても、実際にWebサイトを作っていくと、それぞれの役割が見えてきます。

これからWeb制作を始めるなら、最初から全部覚えなくていい

Web制作を勉強していると、最初からたくさんのことを覚えたくなります。

私自身も、分からない言葉が出てくるたびに、その場ですべて理解しようとしていました。

しかし、実際には一度で完璧に覚える必要はありませんでした。

例えば、marginとpaddingの違いが分からなければ、実際に両方を書いて見比べてみる。

flexが分からなければ、3つの要素を横に並べてみる。

positionが分からなければ、カードの右上にバッジを配置してみる。

このように、小さなものを実際に作りながら確認していくと、コードの意味が少しずつ理解できるようになりました。

また、自分が考えたデザインを実際のWebサイトにしてみると、「見た目を作る」だけではなく、スマートフォンやPCなど、さまざまな画面サイズでどう見えるかを考える必要があることにも気付きました。

Web制作は、コードを覚えるだけではなく、実際に作りながら考えることで理解が深まっていくものだと感じています。

まとめ

Web制作を勉強し始めたころ、私が最初に混乱したのは次の8つでした。

HTMLとCSSをどうつなげるのか
classとidの違い
marginとpaddingの違い
widthとmax-widthの違い
flexとgridの違い
レスポンシブデザイン
relativeとabsoluteの使い方
WordPressのPHP

最初はどれも難しく感じましたが、実際にコードを書いてWebサイトを作っていくことで、少しずつ違いが分かるようになりました。

特に、レスポンシブデザインでは、PCだけではなくスマートフォンの画面も考えながらデザインする必要があり、実際に作ってみて初めて気付くこともたくさんありました。

分からないことがあっても、最初からすべて理解する必要はありません。

小さなコードを書いて、実際に表示してみる。

うまくいかなければ原因を調べて、また試してみる。

そんな繰り返しをしながら、少しずつWeb制作を学んでいけばいいのだと思います。

これからも私自身、実際に作りながら分かったことや、つまずいたことをNoah Labに記録していきたいと思います。