HTML/CSS で思ったとおりにレイアウトされないときの確認手順【初心者向け】

プログラミング学習
2021.08.30

HTML/CSSでうまくレイアウトできません。

何を確認すればいいでしょうか・・・

HTML/CSS を学びたてのころにこういったヘルプをよくいただきます。

本記事では、こういったときの確認手順を解説します。

目次
  1. 確認手順
  2. 手順1: 全角スペースが含まれていないか確認する
  3. 手順2: HTMLの構文エラーが無いかチェックする
  4. 手順3: デベロッパーツールを活用する
  5. まとめ

確認手順

まず最初に手順を記載します。

  1. 全角スペースが含まれていないか確認する
  2. HTMLの構文エラーが無いかチェックする
  3. デベロッパーツールを活用する

手順1: 全角スペースが含まれていないか確認する

プログラミングにおいて全角スペースを使うことはほぼありません。

しかし、プログラミングに慣れないころは半角スペースと間違えて全角スペースを入れがちです。

全角スペースは半角スペースと同様に見えないために気づきにくいのが難しいところです。

HTMLやその他のプログラミング言語において半角スペースは無視されるものですが、全角スペースはアルファベットや記号といった普通の文字と同様に扱われます。

そのため、半角スペースを書くべきところに全角スペースを書いてしまうといろいろな問題が発生します。

例えば、このようなレイアウトのHTMLを作成しようと思って、

以下のようなHTMLを書いたとします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row mt-5">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
　    <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
  </div>
</body>
</html>

しかし、実際には上記HTMLをブラウザで見ると以下のよう表示されます。

実は先ほどのHTMLには全角スペースが入っています。

見つけることはできるでしょうか。

全角スペースの見つけ方

エディタの検索機能で探す

エディタの機能で全角スペースを探してみましょう。

お手元のエディタに貼り付けて検索してみてください。

全角スペースを可視化する

全角スペースは見えないのが問題なので、逆転の発想で見えるようにしてしまえば気づくことができます。

例えば Ricty Diminished というフォントを使うと全角スペースは見えるようになります。

手順2: HTMLの構文エラーが無いかチェックする

同じHTMLを書いていてこのように記述したとします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row mt-5">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3 style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
  </div>
</body>
</html>

ところが上記HTMLをブラウザで表示してみると一箇所だけ色が意図的でないものになっています。

こういった場合はHTMLの構文上のミスを疑いましょう。

構文上のミスを目で見て探すのは難しいのでチェックツールを利用するのがオススメです。

オススメのチェックツールは

W3C Markup Validation Service

です。Web技術の標準化を行う非営利団体である W3C のチェッカです。

上記チェックツールにアクセスし、HTMLを貼り付けて「Check」ボタンをクリックするとチェック結果が表示されます。

チェック結果は以下のようになりました。

英語でわかりにくいですが、1つ目のエラーを見ると

  • 15行目の32文字目に問題がある
  • 属性の間にスペースが無い(つまり必要ということです)

また下の方にスクロールしていくと指摘箇所がハイライトされています。

その辺りを確認してみるとダブルクオートを書き忘れていることに気づきます。

こういった一文字だけ間違えているという状況は目で確認するのは難しいです。

ツールを使って機械的に見つけられるようにするのが大切です。

手順3: デベロッパーツールを活用する

以下のようなHTMLを書いているときに

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ページのタイトル</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>タイトル</h1>
    <div class="row mt-5">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
    <div class="row">
      <div class="col-3" style="background-color: #eee;">左側</div>
      <div class="col-9">右側</div>
    </div>
  </div>
</body>
</html>

表示してみたらタイトルとコンテンツのスキマが空きすぎなので狭めたいとします。

Google Chrome のデベロッパーツールを使用して、どの要素が開けているスキマか確認してみます。

「タイトル」と書いてある要素を確認すると

スキマを開けているのはこちらではないことが分かります。

その下のタグをクリックしてみると

こちらのタグがこのスキマを空けていることがわかります。

その状態でデベロッパーツールのStylesのタブを確認してみると適用されているCSSが確認できます。

このパネルでは、適用されているCSSを無効化したりできますので、チェックボックスのチェックを外すなどしてどのように描画されるか確認していくことが有効です。

実際に .mt-5 というクラスで適用されているスタイルのチェックを外してみると

狭くすることができました。

mt-5 を変更したり削除したりして丁度いいスキマを調整すればよさそうです。

デベロッパーツールはWebエンジニアの必須ツールです。

うまく使いこなせるようになると作業がとても早くなるので練習してみるのがオススメです。

まとめ

HTML/CSSでうまくレイアウトできないときの確認手順を解説しました。

問題が起きたとき、解決する手段をたくさん持っているということはプログラミングにおいてとても大切です。

慣れてくればこの手順はかなりショートカットできますが、学習中は一つずつ丁寧に確認していくことをオススメします。

タイトルとURLをコピーしました