- コードの意味がわからない…
- CSSが効かない理由がわからなくて悩んだ…
- flexboxの使い方がイマイチつかめなくて困った…
そんな経験はありませんか？
今回は、私がWeb制作を始めた3年前の自分に伝えたいこと、つまりWeb制作を始めてつまづいたポイントを言語化してみました。
同じような課題で悩んでいる初学者の方の参考になれば幸いです。
CSSが効かない理由がわからない
まず最初にあたった壁が「CSSが効かない理由がわからない」です。
よくある状況
- 教材をみながら書いているのに全然CSSが効かない…
- 別のファイルでは効いているのになんでこっちは効かないんだろう…？
こんな感じで結構CSSが効かない原因がわからず困っていました。
伝えたいこと
昔の自分に伝えたいことは「CSSが効かないときは下記をチェックしなさい！」です
- HTMLファイルにCSSファイルのリンクは正しく書いてある？
- CSSファイルの場所（パス）は正しい？
- ファイル名は間違っていない？
- CSSのセレクタ（classsやid）は正しく書いてある？
- HTMLのclassやidの名前とCSSの名前は一致している？
これらの基本的なポイントを確認するだけで、多くの問題が解決できます。
焦らずに一つずつチェックしていけば、必ず原因が見つかります。
覚えておきたいのは、誰でも最初は悩むということ。
少しずつ経験を積んでいけば、慣れていくので頑張れ自分！
box-sizingの意味がわからない
box-sizingは、CSSのプロパティの一つで、要素の全体的なサイズの計算方法を指定します。
初めてWeb制作を学ぶ時、このプロパティの意味や重要性がわからず戸惑うことがよくあります。
- 要素のサイズがなぜか思った通りにならない…
- paddingを追加したら要素が大きくなってしまった…
- レイアウトが崩れる原因がわからない…
こんな経験はありませんか？私も最初は本当に悩みました。
伝えたいこと
昔の自分に伝えたいことは「box-sizingは最初はわからなくても大丈夫。とりあえずこれを使えばレイアウトが楽になるよ！」です。
* {
box-sizing: border-box;
}これをCSSファイルの最初に書いておくだけで、多くの場面でレイアウトが楽になります。
- paddingやborderを追加しても要素の全体サイズが変わらなくなる
- 要素のサイズが予測しやすくなる
- レイアウトの調整が格段に楽になる
完全に理解できなくても、まずは使ってみることが大切です！
使っているうちに、だんだん理解が深まっていきます！
marginとpaddingの違いがわからない
marginとpaddingは、要素の周りのスペースを制御するCSSプロパティです。
私はこれらの違いがわからずにかなり苦戦しました。
伝えたいこと
昔の自分に伝えたいことは「marginとpaddingの違いを覚えるコツがあるよ！」です。
- marginは「要素の外側のスペース」
- paddingは「要素の内側のスペース」
これを視覚的に理解するために、こんなイメージを持つといいでしょう
- marginは要素を押し離す力
- paddingは要素の中身を膨らませる力
実際に使ってみると
.box {
margin: 10px; /* 要素の周りに10pxの隙間ができる */
padding: 20px; /* 要素の中身が20px膨らむ */
}最初は混乱するかもしれませんが、実際にコードを書いて試してみることが大切です！
使っているうちに、徐々に違いがわかってきますので、焦らず、少しずつ慣れていきましょう！
headの中身がよくわからない
HTMLのhead要素の中身は、ページの設定や外部リソースの読み込みなど、重要な役割を果たします。
しかし、初心者のときは何をどう書けばいいのかわからず、混乱しがちです。
- headの中に何を書けばいいの？
- metaタグって何？どう使うの？
- CSSやJavaScriptはどうやって読み込むの？
私も最初はかなり苦戦しました。
伝えたいこと
昔の自分に伝えたいことは「headの中身には基本的なパターンがあるよ！」です。
以下の要素を覚えておくと、多くの場合に対応できます
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head><meta charset="UTF-8">: 文字コードの指定<meta name="viewport" ...>: モバイル対応の設定<title>: ブラウザのタブに表示されるタイトル<link>: CSSファイルの読み込み<script>: JavaScriptファイルの読み込み
これらを適切に設定することで、ページの基本的な構造が整います。完全に理解できなくても、まずはこのパターンを使ってみることが大切です。
使っているうちに、それぞれの役割がわかってきますので安心してください！
flexboxがよくわからない
flexboxは強力なCSSレイアウトツールですが、最初は概念の理解が難しいです。
- 要素を横並びにしたいけど、どうすればいいの？
- 中央揃えってflexboxでできるの？
- flex-grow, flex-shrinkって何？
私も最初は本当に混乱して、理解するまでにかなり時間がかかったのを覚えています。
伝えたいこと
昔の自分に伝えたいことは「flexboxは難しく見えるけど、基本さえ押さえれば大丈夫！」です。
まずは、こんな基本的な使い方から始めてみましょう
.container {
display: flex;
justify-content: center;
align-items: center;
}これだけで
- 子要素が横並びになる
- 子要素が中央揃えになる
flexboxの主な特徴は
- 親要素（コンテナ）に
display: flex;を指定する justify-contentで主軸方向の配置を制御align-itemsで交差軸方向の配置を制御
最初は完璧に理解する必要はありません。
まずはこの基本的な使い方を試してみて、少しずつ他のプロパティも試していくのがおすすめです。
使っているうちに、flexboxの便利さがわかってくるはずです。
クラス名がぐちゃぐちゃでなにがなんだかわからない
CSSのクラス名や構造が複雑になってくると、整理がつかなくなることがあります。
- クラス名をどうつければいいの？
- 似たようなスタイルがあちこちに散らばってる…
- 修正しようとしたら他の部分も崩れちゃった！
私も最初はクラス名や構造の整理に苦労しました。
伝えたいこと
昔の自分に伝えたいことは「クラス名には命名規則を決めよう！」です。
おすすめの方法
- BEM（Block, Element, Modifier）のような命名規則を使う
.block__element--modifier {
/* スタイル */
}- 役割ごとにクラスを分ける
.btn { /* ボタンの基本スタイル */ }
.btn-primary { /* プライマリーボタンの追加スタイル */ }
.btn-large { /* 大きいボタンの追加スタイル */ }最初からすべてを完璧にする必要はありません。
まずは簡単な命名規則を決めて、それを守ることから始めましょう。
時間はかかりますが、クラス名と構造を整理する習慣がつくと、コードの保守性が大幅に向上します。
焦らず、一歩ずつ改善していきましょう！
コーディングはクラス名の他にも意識するポイントは沢山あります。
以下の記事では私がコーディングで意識していることについて紹介していますので、あわせて参考にしてみてください。
まとめ
今回は私がWeb制作を始めてつまづいたポイントを紹介しました。
学習を始めた初期の頃は些細なつまづきで、挫折をしてしまいがちです。
挫折してしまわないためにもこの記事に書いていることを参考にして、壁をどんどん乗り越えていってください。
次回はクライアントワークでつまづいたことをシェアします！
このブログでは他にもWeb制作やShopifyに関する記事を書いていますので、あわせて参考にしてみてください！
