HTML,CSSで初心者が躓くこと

HTMLでは、タグは開始タグと終了タグのセットで構成されています。タグを閉じることを忘れると、Webページのレイアウトに混乱が生じる可能性があります。

例えば、以下のような開始タグのみのコードを考えてみましょう。

<p>これは段落です。
<h1>これは見出し1です。</h1>

この場合、<p>タグは閉じられていません。これは、段落が終了していないことを意味し、Webページのレイアウトに影響を与えます。

修正するには、以下のように</p>タグを追加します。

<p>これは段落です。</p>
<h1>これは見出し1です。</h1>

CSSのセレクタの指定方法

CSSは、HTMLでマークアップされた要素をスタイル化するために使用されます。CSSでは、要素を選択するためのセレクタが使用されます。初心者が躓くことの1つは、正しいセレクタの指定方法です。

例えば、以下のようなHTMLコードを考えてみましょう。

<h1 class="title">これは見出し1です。</h1>

この場合、<h1>要素にclass属性があり、titleという値が設定されています。この要素にCSSスタイルを適用するには、以下のようにclassセレクタを使用します。

.title {
  color: red;
}

このセレクタは、.titleというクラス名を持つ要素にスタイルを適用します。

POINT

例えばh1要素に直接CSSスタイルを記述する方法も可能ですがページごとに変更する必要があったりメンテナンス性も落ちるのでクラスを付与しCSSスタイルを記述するのがおすすめです。

h1 {
  color: red;
}
/*↑おすすめはしない*/

案件などでは仕様書や指定があることが多いので都度確認しましょう。

作って終わりでは無いのがサイト制作です。将来のメンテナンスやリニューアルのことも念頭に置き制作していきましょう。

ボックスモデルの理解

次に初心者が混乱しやすいボックスモデルについてです。

少し混乱する点もあるかもしれませんがソースコードを実際にご自身で書いてじっくりと理解していきましょう。

ボックスモデルを理解するだけでもElementor(エレメンター)でのホームページ制作にも役立ちます。

※Elementor(エレメンター)は、WordPressのプラグインで、直感的にホームページを制作できる「ページビルダー」です。

ボックスモデルとは

ボックスモデルとは、Webページ上の要素を四角形のボックスとして扱うモデルのことです。

ボックスモデルによって、要素はコンテンツ（テキストや画像など）を含むボックスとして扱われ、周囲に余白、ボーダー、パディングを持つことができます。

ボックスモデルの構成要素

ボックスモデルにおいて、各要素は以下の要素から構成されます。

• コンテンツ（content）：要素の中に表示されるテキストや画像などのコンテンツ部分です。
• パディング（padding）：コンテンツとボーダーの間に配置される余白部分で、背景色を指定したり、視覚的な余白を付けるために使用します。
• ボーダー（border）：要素の周囲に配置され、パディングと外側の余白を区切る線です。太さ、色、形状を指定することができます。
• 外側の余白（margin）：要素の周囲に配置され、他の要素との距離を確保するために使用します。視覚的な余白を付けることもできます。

以下の図は、ボックスモデルにおける各要素を示しています。

+----------------------------------------------------+
|                       margin                       |
|         +------------------------------------------+         |
|         |                   border                 |         |
|         |   +----------------------------------+   |         |
|         |   |             padding              |   |         |
|         |   |   +--------------------------+   |   |         |
|         |   |   |         content          |   |   |         |
|         |   |   |                            |   |   |         |
|         |   |   |                            |   |   |         |
|         |   |   +--------------------------+   |   |         |
|         |   |                                  |   |         |
|         |   +----------------------------------+   |         |
|         |                                          |         |
|         +------------------------------------------+         |
|                       margin                       |
+----------------------------------------------------+

このように、各要素は視覚的に四角形のボックスとして扱われ、コンテンツや余白、ボーダーなどの要素を指定することで、Webページのレイアウトを制御することができます。

コード例

このコードは、.boxクラスの要素を定義し、背景色を青に設定し、幅と高さを100ピクセルに設定しています。また、paddingとborderの値を設定しています。

これをHTMLに適用すると、以下のようになります。

<div class="box">
  <p>Hello World</p>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  padding: 10px;
  border: 1px solid black;
}

この場合、<div>要素が.boxクラスに割り当てられています。.boxクラスは、先に示したスタイル定義に基づいて、幅と高さが100ピクセルで、背景色が青、paddingが10ピクセル、borderが1ピクセルの黒線であることを指定します。

<p>要素は、<div>要素の内側に含まれており、paddingの中に配置されています。つまり、<p>要素の背景色は青で、それを囲む黒線があり、周囲に10ピクセルの余白があることになります。

このように、ボックスモデルは、要素のレイアウトを理解する上で非常に重要です。初心者が躓くことの多いポイントは、paddingやborderが要素の幅と高さに影響することです。これらの値を設定する場合は、要素の全体の幅と高さを考慮して設定する必要があります。

レスポンシブデザインの理解

レスポンシブデザインは、Webページが異なる画面サイズのデバイスで正しく表示されるようにするための設計方法です。初心者が躓くことの1つは、レスポンシブデザインの理解です。

たとえば、以下のようなCSSコードを考えてみましょう。

.box {
  width: 50%;
  height: 100px;
  background-color: blue;
}

このコードは、.boxクラスの要素を定義し、幅が親要素の50％、高さが100ピクセル、背景色が青であることを指定しています。
しかし、このコードはレスポンシブではありません。画面サイズが小さくなると、要素が表示されなくなる可能性があります。

修正するには、以下のように@mediaルールを使用して、画面サイズに応じてスタイルを変更します。

.box {
  height: 100px;
  background-color: blue;
}

@media only screen and (max-width: 600px) {
  .box {
    width: 100%;
  }
}

このコードは、画面幅が600ピクセル未満の場合に、.box要素の幅を100％に変更するように指定しています。

相対パスと絶対パスの使用方法

HTMLとCSSでは、画像やリンクなどのリソースに対して、相対パスまたは絶対パスを使用して参照する必要があります。初心者が躓くことの1つは、相対パスと絶対パスの使用方法の理解です。

たとえば、以下のようなHTMLコードを考えてみましょう。

<img src="images/image.jpg">

このコードは、imagesという名前のフォルダ内にあるimage.jpgというファイルを参照しています。これは相対パスの例です。

一方、以下のように絶対パスを使用することもできます。

<img src="https://example.com/images/image.jpg">

このコードは、Webサイトのルートフォルダからimage.jpgファイルを参照しています。

以上が、HTMLとCSSで初心者が躓くことのいくつかの例です。初心者は、これらの問題に対処するために、実践的なチュートリアルや演習を通じて、より深く理解を深めることが重要です。以下にいくつかのチュートリアルと演習を紹介します。

1. TechAcademy
   • TechAcademy [テックアカデミー] は、初心者向けのオンライン学習プラットフォームで、HTMLとCSSなどの基礎から応用まで学ぶことができます。自宅で現役エンジニアから学べるので仕事をしながらでも気軽に学べます。
2. W3Schools
   • W3Schoolsは、ウェブ開発のチュートリアルやリファレンスを提供しているウェブサイトです。ボックスモデルに関するトピックを包括的にカバーしており、例題や演習も提供されています。
3. MDN Web Docs
   • MDN Web Docsは、Mozillaによるウェブ開発のドキュメントサイトです。ボックスモデルに関する詳細な解説とともに、サンプルコードや演習も提供されています。
4. YouTubeチュートリアル
   • YouTubeには、多数のウェブ開発に関するチュートリアルがあります。ボックスモデルに関するチュートリアルもあり、視覚的に理解を深めることができます。

これらのリソースを活用することで、初心者でもボックスモデルの理解を深めることができます。