そのためには指定の認定プロジェクトを完成させる必要がありますが、いざ取り組もうと思ってもどこから手を付けたらいいか分からなくて挫折してしまう人も多いようです。

そこで、YouTube チャンネル freeCodeCamp Japanese にて HTML と CSS を扱う新講座を公開しました。日本語チャンネルとして初のオリジナル講座です。

この講座では、レスポンシブウェブデザイン認定証に必要な最初の認定プロジェクト「アンケートフォーム」に実際に取り組みながら、HTMLとCSSの基本、問題の解決方法、作業に役立つツールなどについて学習します。

認定プロジェクトに限らず、自分の力でウェブ開発に取り組むために役立つ知識が学べます。

この講座は私、松田が作成しました。私自身も freeCodeCamp カリキュラムを通してウェブ開発を学んだのですが、他のプログラミング教材にない freeCodeCamp の魅力だと感じたのが、この認定プロジェクトでした。

ざっくりとしたユーザーストーリーを基に自分で考えてコードを書いていく経験は、ただチュートリアルをこなしているだけでは得られない実力を付けるためにとても役立ったと感じています。

その経験を通して得たものを、この講座で解説しています。

この講座では以下の流れでプロジェクトに取り組みます。

• Visual Studio Code の導入
  • 日本語言語パック、拡張機能のインストール
• HTML ボイラープレートを書く
• ユーザーストーリーの確認
• 最低限のコードを書く
  • プレビューと自動テストの活用方法
  • MDN Web Docs の紹介
• HTML の改善
• CSS を書く
  • 開発者ツールの活用
• 画像の追加方法
• フォーラムでの質問方法

本講座は YouTube で全編無料公開されています。(全 2.5 時間)

もしあなたがデータを視覚的に表現する必要のあるプロジェクトを構築する場合、情報を読みやすく、分かりやすく表示する方法が必要になります。

HTML 要素を使って、データの種類に応じて異なる表示方法を選択することができます。

大抵の場合、大量のデータをうまく表示するのには表 (テーブル) が非常に便利です。そのため、この記事では HTML で表を使用する方法と、それをスタイルする方法について学びます。

まず初めに、HTML における表とはなんでしょうか？

HTML における表とは？

表とは、行と列にデータを配置して表示したものです。実際、表はスプレッドシートのようなものです。HTML では表を使用して、画像、テキスト、リンクなどのデータを行と列に配置できます。

ウェブにおける表の使用は、表の作成やデザインを簡単にしてくれる素晴らしい HTML table タグのおかげで、近年ますます人気になりました。

HTML で表を作るには、タグが必要です。最も重要なのは、表の主要なコンテナになる <table> タグです。これは、表の開始位置と終了位置を示します。

一般的な HTML Table タグ

その他のタグは、次の通りです。

• <tr> - 行を表す
• <td> - データセルの作成に使われる
• <th> - 表の見出しの追加に使われる
• <caption> - キャプションの追加に使われる
• <thead> - 表に別のヘッダーを追加する
• <tbody> - 表の本体を示す
• <tfoot> - 表に別のフッターを作成する

HTML Table 構文:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

HTML table の概要とその作成方法を理解したところで、これらのタグを使用してより多くの機能を備えた表の作成方法を見てみましょう。

HTML で表の見出しを追加する方法

<th> は、表に見出しを追加するために使用されます。基本的なデザインでは、表の見出しは常に一番上の行になります。つまり、表の最初の行で <th> が宣言され、その後に表内の実際のデータが続きます。デフォルトでは、見出しになるテキストは中央揃えで太字になります。

<th> の使用例

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>

上記の例を見ると、どの列にどの情報が含まれているかがわかります。これは、<th> タグを使っているおかげです。

表にキャプションを追加する方法

表にキャプションを追加する主な用途は、表に表示されるデータに関する説明を提供することです。キャプションは表の上部または下部に配置でき、デフォルトでは常に中央に配置されます。

表にキャプションを挿入するには、<caption> タグを使用します。

Caption 構文

<table>
  <caption></caption>
  <tr> </tr>
</table>

<caption> の使用例

<table>
  <caption>Free Coding Resources</caption>
  <tr>
    <th>Sites</th>
    <th>Youtube Channels</th>
    <th>Mobile Appss</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

HTML のテーブルにおける Scope 属性の使用方法

scope 属性は、特定のヘッダーが列、行、またはそのグループのどれを対象としているかを定義するために使用されます。定義を理解するのは難しいかもしれませんが、大丈夫です。例を見れば理解しやすくなります。

scope 要素の主な目的は、対象のデータを示すことにより、ユーザーが推測に頼る必要を無くすことです。属性はヘッダーセル <th> で宣言され、col、row、colgroup、rowgroup の値を取ります。

col と row の値は、ヘッダーセルがそれぞれ行または列の情報を提供していることを示します。

Scope 構文

<table>
 <tr>
   <th scope="value">
 </tr>
</table>

<scope> の使用例

<table>
  <tr>
    <th></th>
    <th scope="col">Semester</th>
    <th scope="col">Grade</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>

  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

ここで scope 属性は、ヘッダーセルが列、行、またはそのグループのどれに属しているかを示しました。

上の例では、コードに設定した通り、ヘッダーは列に属しています。属性を変更することで、さまざまな動作を確認できます。

HTML のテーブルにおけるセル結合の使用方法

表内の 2 つ以上の列、または行にまたがるセルを見たことがあるのではないでしょうか。これは、セル結合と呼ばれます。

MS Office や Excel などのプログラムで作業したことがあれば、セルを選択してコマンドをクリックすることで、セル結合の機能を使っていたことでしょう。

同じ機能を HTML table に適用するには、2 つのセル属性 (水平結合用の colspan と垂直結合用の rowspan) を使用します。2 つの属性には、結合するセルの数を示す 0 より大きい数値が割り当てられます。

span の使用例

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan = "2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>75</td>
  </tr>
  <tr>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>

上記の例では、コードに記述した通り、複数行の 2 つのセル、複数列の 3 つのセルにまたがるセルがあります。結合を垂直方向と水平方向の両方に適用することができました。

属性 colspan および rowspan を使用する場合は、セルが重複しないように、正しい値が割り当てられていることを確認してください。

HTML のテーブルに表ヘッダー、本体、フッターを追加する方法

Web サイトやその他のドキュメントに 3 つの主要なセクション (ヘッダー、本文、フッター) があるように、表にも同じものがあります。

表では、次の属性によって分割されます。

• <thead> - 表に別のヘッダーを提供する
• <tbody> - 表の主要なコンテンツを含む
• <tfoot> - 表に別のフッターを作成する

<thead>、<tbody>、<tfoot> の使用例

<table>
  <thead>
    <tr>
      <th colspan="2">October</th>
      <th colspan="2">November</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Sales</td>
      <td>Profit</td>
      <td>Sales</td>
      <td>Profit</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">November was more produstive</th>
    </tr>
  </tfoot>
</table>

上記の例では、月の名前がヘッダー、売上高と利益の両方の数値を持つ部分が表本体、最後に説明文の部分が表のフッターにあたります。

注意すべきもう 1 つの重要な点は、表には複数の本体部分 (tbody) を含めることができるということです。このような場合、各本体は関連する行をグループ化します。

CSS を使用して HTML のテーブルをスタイルする方法

表は現在広く使用されていますが、スタイルが設定されていない表を見つけることは非常に稀です。ほとんどの表には、色、フォント、重要な値の強調表示など、さまざまな形式のスタイルが使われています。

スタイリングは、表をプロフェッショナルで魅力的に見せるのに役立ちます。結局のところ、1 本の線だけで区切られたデータを読み手に見せたくはないですよね。

他の言語やツールでのスタイリングとは異なり、HTML では、.css 拡張子を持つ追加のファイルを使う必要があります。このファイルにスタイルを追加して、HTML ファイルにリンクします。

以下に、スタイル付き表の例を含むコードプレイグラウンドが添付されています。さまざまなスタイルが表示にどのように影響するか、自由に試してみてください。

上記のコードプレイグラウンドでは、表を作成し、この記事で説明したいくつかの属性を使用してスタイルを設定しました。

CSS ファイルを使用してスタイルを設定し、表に色と境界線を追加して、読みやすく美しくしました。表には固定ヘッダーもあるため、大量のデータをスクロールしても特定の列のヘッダーを表示できます。

ここまで、表とは何かを学び、表をいくつか作成し、さらに一歩先を行ってスタイリングを適用しました。

しかし、知識があってもそれを適用する方法を知らなければ、何の役にも立ちません。では、デザインのどこで、またはいつ表を利用するべきでしょうか？

Table を使用すべきとき

プロジェクトを開発する際に表が役立つ状況は数多くあります。

• A チームとB チームの差、X チームの得点とY チームの得点など、共通の特徴を持つデータを比較対照したい場合に、表を使用できます。
• 数値データの概要を知らせたい場合にも使用できます。学生の成績や、EPL テーブル (サッカーの大会結果の表) のようにチームの得点を表示したい場合が良い例です。
• また、表は、整頓された特定の情報を読み手がすばやく見つけるのに役立ちます。例えば、たくさんの名前のリストを調べる場合、表を使用してリストを細分化し、読みやすくできます。

まとめ

テーブルは、表形式のデータを表す優れた方法であり、<table>、<tr>、<td> などの基本的な HTML 要素を使用して作成できます。

また、スタイルを追加して見栄えを良くし、CSS ファイルを使用してデータを明確に表示することもできます。

最後に、もう 1 つタスクを実行しましょう。

今日の記事で取り上げたことを要約するために、学んだことを使用して表を作成しましょう。その後、以下のピン留めされたコードプレイグラウンドとあなたのデザインを比較してみてください。

ユーザーが値を選択できるドロップダウンメニューを作成するには、HTML の select タグを使用します。これは、サーバーに送るデータを収集するのに役立つ機能です。

通常、select タグは form 要素内に置かれ、別のタグ <option> 内に選択肢の項目を置きます。select タグ単独で配置することもできますが、その場合も、特別な属性の一つである form を使用して form 要素と関連付けます。

このチュートリアルでは、コーディングプロジェクトでのデータ収集に使用できるように、select タグでドロップダウンメニューを作成する方法について紹介します。スタイリングが難しいことで有名な select タグのスタイリング方法についても触れます。

Select タグの属性

select タグを使ってドロップダウンメニューを作成する方法を説明する前に、select タグがとる属性について説明しておく必要があります。

以下がその属性です。

• name: サーバーに送信された後にデータを参照するのに使用されるため、form control には全て名前を付ける必要があります。
• multiple: この属性により、ユーザーはドロップダウンメニューから複数のオプションを選択できます。
• required: 通常、検証に使用されます。これにより、ユーザーがドロップダウンから少なくとも一つのオプションを選択しない限り、フォームは送信されません。
• disabled: この属性により、ユーザーはオプションを操作できなくなります。
• size: 数値で表される size 属性は、一度に表示されるオプションの数を指定するために使用されます。
• autofocus: この属性は、select を含むすべてのフォーム入力で使用され、ページの読み込み時に入力がフォーカスされるように指定します。

Select タグを使ってドロップダウンメニューを作成する方法

select タグを使ってドロップダウンメニューを作成するには、まず form 要素が必要です。なぜなら、データをサーバーに送信するためには、form 要素内に送信ボタン (submit) も必要になるからです。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

この例では、ドロップダウンとボタンを中央揃えにし、body の背景をライトグレーにするための簡単な CSS を追加します。

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

より洗練され、アクセスしやすいものにするために、セレクトボックスを label 要素と関連付け、label テキストをクリックしたときにフォーカスするようにすることもできます。次のコードでそれを実現できます。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

送信ボタンをクリックしたときに 404 エラーが表示されないように、action 属性の値として番号記号 (#) を入力します。

そして、CSS を少し変更する必要があります。

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

最終的に次のような結果が得られます。

これで終わりではありません。ページを開いてすぐ送信ボタンをクリックした場合、ドロップダウン項目のうちの一つがデフォルトで表示されており、選択されてしまいます。

しかし、ユーザーエクスペリエンスの観点から、これは好ましくありません。「言語を選択 (select a language)」をドロップダウンの最初の項目に設定することで、これを避けることができます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

また、ユーザーが項目を選択するためにセレクトボックスをクリックするときも、ドロップダウンが送信ボタンに重なって表示されます。これもユーザーエクスペリエンスを低下させる原因になり得ます。

これを解決するには、ドロップダウン内にデフォルトで決まった数の項目を表示し、その他の項目をスクロール表示するようにする size 属性が使用できます。

これにより、一部の項目が自動的にユーザーに表示されるため、ダミーの最初の項目を取り除くこともできます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

multiple 属性を使用すると、ユーザーがドロップダウンから複数の項目を選択できるようになります。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

multiple 属性により、デフォルトで四つの項目が表示されます。複数の項目を選択するには、Shift キーまたは Ctrl キーを押しながらマウスで選択する必要があります。

select タグと <option> タグでできることはこれだけではありません。<select> タグ内に <optgroup> 要素を使用して、複数階層のセレクトボックスを作成することもできます。

次のように、先ほど作成したドロップダウンを複数階層のセレクトボックスに変換できます。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Select 要素をスタイリングする方法

select 要素のスタイル設定は分かり辛く、ブラウザー内での表示方法も一貫しないことが多いです。しかし、次のような設定を試してみることもできます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

上記の CSS コードスニペットでは、セレクトボックス内のテキストに次の外観を付与しました。

• フォントファミリー「cursive」と色「白」
• アウトライン「0」: フォーカスされたときの不恰好なアウトラインを削除
• 背景「緑色」
• 境界線「1px、深紅色」
• 境界半径「4px」: 全辺にわずかに丸みを帯びた境界線を付与
• パディング「4px」: 少し間隔を空ける

これによりセレクトボックスの見栄えが良くなりました。

結論

select タグは、HTML でドロップダウンやコンボリストを作成する場合に非常に便利です。ラジオボタンとチェックボックスを一つのパッケージにまとめたようなものです。

ラジオボタンではリストから一つの項目しか選択できませんが、チェックボックスでは複数の項目を選択できることを覚えているでしょうか。select は、単一のアイテムのみまたは複数のアイテムを受け付けるようにも設定できるため、より柔軟です。

select タグの問題の一つは、スタイルが非常に難しいことです。合理的な解決策は、優れたユーティリティ クラスを提供する CSS ライブラリを使用して、select 要素やフォームのスタイルを設定することです。

このチュートリアルで select タグに慣れ、プロジェクトで使用できるようになったのであれば嬉しいです。

読んでいただきありがとうございます。引き続きコーディング頑張ってください。

CSS は難しいですが、自由度も高いです。そして、この高い自由度のおかげで、たとえ行き当たりばったりでもスタイルを適用することができます。

ページは一見問題なく読み込まれます。「クラッシュ」もしません。

ではページ全体の幅と高さを設定したい場合、HTML 要素にどのような設定をすればいいか分かりますか。body 要素についてはどうでしょう。

上手くいくことを願いながらただ当てずっぽうにスタイルを適用していませんか。

もしそうであっても、あなたは一人じゃありません。

これらの質問に対する答えは直感的ではないのですから。

私自身、どのプロパティをどの要素に適用すべきかを正確に把握せずに、両方の要素にスタイルを適用していたという罪深い過去があります。🤦‍♂️

次の例のように、CSS プロパティが HTML と body の両方の要素に適用されていることは珍しくありません。

html, body {
     min-height: 100%;
}

それって問題なの？

はい、かなり問題です。

上のスタイル定義は以下のような問題を引き起こします。

両方の要素の min-height (最小の高さ) を 100% に設定しても、body 要素はページ全体を埋めるようになりません。これは思っていた動作と異なるかと思います。結果として表示されたスタイルの値を開発ツールで確認してみれば、body 要素の高さがゼロになっていることが分かるでしょう。

一方で、HTML 要素はブラウザーの表示領域と同じ高さになっています。

次の Chrome Dev Tools のスクリーンショットを見てください。

なぜこんなことが起こるの？

パーセンテージをサイズの値として使用する場合、その要素はパーセンテージの基準として親要素を参照します。

HTML 要素は、目に見える表示領域の高さを高さ値として持つビューポートを参照します。しかし、上の例では HTML 要素の min-height を設定しているだけで、height プロパティの値は設定していません。

したがって、body 要素には、100% が何に等しいかの基準として参照する親の height 値がないことになります。

そして、問題は目に見えないかも

もし、ページを埋め尽くすほどのコンテンツがあった場合、この問題には気付かないかもしれません。

そして、より気付きにくくなる原因として、両方あるいは片方の要素に背景色を設定した場合、ビューポートはその色で埋め尽くされます。これによって、body 要素がビューポートと同じ高さを持つと錯覚してしまうのです。

それは間違いで、高さはゼロのままです。

先ほどの画像は次の CSS で表示されたものです。

html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }

逆継承？

奇妙な現象ではありますが、もし HTML 要素の背景色を個別に設定しない場合、HTML 要素には body 要素の背景色が適用されます。

では、レスポンシブなフルページの理想的な高さ設定は？

何年もの間、答えは次の通りでした。

html {
    height: 100%;
}
body {
    min-height: 100%;
}

これにより HTML 要素は親となるビューポートを参照し、ビューポートの高さの 100% に等しい height の値を持つことができます。

HTML 要素に height 値が設定されたことで、body 要素に割り当てられた min-height は、body 要素の最小の高さを HTML 要素の高さと同じにします。

この設定はまた、コンテンツがページの見えている部分より大きい場合に、あわせて body の高さを大きくすることもできます。

唯一の欠点は、HTML 要素は見えているビューポートの高さを超えて大きくならないことです。ただし、body 要素が HTML 要素を超えて大きくなることは問題ないと考えられてきました。

最新の解決策はもっと簡潔です

body { min-height: 100vh; }

この例では、単位 vh (viewport height) を使用することで、body がビューポートの全高に基づいて高さの最小値を設定できるようにしています。

先ほど述べた背景色と同じように、HTML 要素に height 値を設定しない場合、body 要素に与えられた height 値と等しい値が採用されます。

したがって、この解決策であれば以前の解決策の欠点であった HTML 要素のオーバーフローが回避され、両方の要素がコンテンツと共に大きくなります！

単位 vh の使用は、過去には一部のモバイル端末で異常をきたすこともありましたが、現在では Chrome と Safari ではビューポート単位は正常に動作するようです。

ページの高さによっては水平スクロールバーが表示されることがあります

えっ、どういうこと？

「ページ幅」じゃなくて？

いいえ、違います。

別の奇妙な現象として、ページの高さがブラウザーの水平スクロールバーをアクティブにする場合があります。

ページのコンテンツがビューポートの高さを超えると、右側の垂直スクロールバーがアクティブになります。これによって、同時に水平スクロールバーが表示される可能性があります。

どうやって修正するの？

ページ幅設定が原因であることを知っておくと安心かもしれません。

この問題は HTML 要素や body 要素だけでなく、要素を 100vw (viewport width) 単位に設定することに起因します。

ビューポート単位は垂直スクロールバーが占める約 10px の幅を考慮していません。

したがって、垂直スクロールバーがアクティブになると水平スクロールバーも表示されることがあるのです。

ページをフル幅に設定する方法

設定しないというのも一つの方法です。

HTML 要素と body 要素に幅を設定しない場合のデフォルトは画面全体のサイズになります。width の値を auto 以外に設定するときには、初めに CSS をリセットするようにしましょう。

デフォルトで、body 要素の全サイドのマージンが 8px に設定されていることを覚えていますか。

CSS リセットにより、これが削除されます。マージンを削除する前に幅を 100% に設定すると body 要素のオーバーフローを引き起こします。私がよく使う CSS リセットは次のコードです。

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

好みの幅に設定する方法

必ずしも幅を設定する必要はありませんが、通常、私は設定するようにしています。

単なる癖かもしれません。

body 要素の幅を 100% に設定すると、ページ全体の幅になります。これは基本的に、幅の値を設定せずにデフォルトを許可することと同じです。

body 要素を小さなコンテナとして使用し、HTML 要素でページを埋めたい場合は、body に幅の最大値を設定することもできます。

例えば次のように設定できます。

html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}

結論

HTML 要素に height 値がない場合、body 要素の height や min-height を 100% に設定しても (コンテンツを追加する前は) 高さはゼロになります。

一方、HTML 要素に width 値がない場合は、body 要素の width を 100% に設定すると幅はフルページの幅になります。

これは直感に反するため、混乱するかもしれません。

レスポンシブなフルページの高さを実現するには、body 要素の min-height を 100vh に設定しましょう。

ページ幅を設定する場合、水平スクロールバーが意図せず表示されることを避けるため、100vw よりも 100% を選択しましょう。

私の YouTube チャンネルのチュートリアルでは、全画面サイズかつコンテンツと共に拡大する HTML ページ作成のために、CSS の高さと幅をどのように設定すればよいかを実際に再現しながら紹介しています。

CSS の幅と高さを設定する他の方法を知っていますか？

‌ぜひ教えてください！

新しくウェブサイトを開設する際、基礎が固まっていることは重要です。この記事では、HTML 5 ボイラープレートとは何か、そして基本のテンプレートをどのようにして作成するかについて解説します。

HTML 5 ボイラープレートとは？

ウィキペディアでは次のように定義されています。

ボイラープレートコード (英: boilerplate code、または単にボイラープレート) は、コンピュータプログラミングでは、殆ど、または全く変化することなく、複数の場所で繰り返される定型コードのセクションのこと。

HTML におけるボイラープレートとは、プロジェクト開始時に追加するテンプレートのことを指します。HTML ページの作成には必ずボイラープレートを使用するようにしましょう。

HTML 5 ボイラープレートの例

基本的な例がこちら。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

HTML の文書型とは？

HTML コードの一番最初の行では、文書型宣言を行う必要があります。文書型宣言によって、ブラウザはウェブページがどのようなバージョンの HTML で書かれているか認識することができます。

<!DOCTYPE html>

もし、この一番最初の行を忘れてしまうと、 <article> < footer > <header> などの HTML 5 タグがブラウザによって認識されない可能性があります。

HTML ルート要素とは？

<html> タグは HTML ファイルの最上位要素です。その中に、<head> と <body> をネストします。

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

開始タグ <html> 内の lang 属性は、ページで使用する言語を設定します。スクリーンリーダーが文字を正しく発音できるようにする、といったアクセシビリティの観点からも言語の設定は大切です。

HTML のヘッダータグとは？

<head> タグには機械によって処理される情報を含めます。<head> タグの中には、機械に対して文書そのものの情報を提示する「メタデータ」をネストします。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
</head>

UTF-8 文字エンコーディングとは?

UTF-8 は、ウェブページで使用すべき標準的な文字エンコーディングです。これは <head> 要素の中の <meta> タグで最初に表示する必要があります。

 <meta charset="UTF-8">

World Wide Web Consortium によると、

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

UTF-8 などの Unicode ベースのエンコーディングは、多くの言語をサポートし、それらの言語が混在するページやフォームに対応できます。 また、これを使用すると、サーバー側のロジックにより、提供される各ページまたは受信フォーム送信ごとに文字エンコードを個別に決定する必要がなくなります。（英文を翻訳）

HTML のビューポートタグとは？

このタグはデバイスの画面サイズに対するページの幅を与えます。例えば、モバイル端末の幅が 600px の場合、ブラウザのウィンドウの幅も 600px になります。

initial-scale はズーム度合いをコントロールします。initial-scale の値が 1 の場合、ブラウザによるデフォルトのズームが防止されます。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

X-UA-Compatible とは？

この <meta> タグは、Internet Explorer の文書モードを指定します。 IE=edge は、サポートされている最高のモードです。

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

HTML タイトルタグとは？

<title> タグはウェブページのタイトルを指定します。このテキストは、ブラウザのタイトルバーに表示されます。

    <title>HTML 5 Boilerplate</title>

CSS スタイルシート

このコードにより、カスタムの CSS を HTML ページにリンクすることができます。rel="stylesheet" によって、HTML ファイルと外部スタイルシートの関係性を定義します。

    <link rel="stylesheet" href="style.css">

HTML のスクリプトタグ

外部スクリプトタグは body の終了タグの直前に配置されます。ここで外部の JavaScript コードをリンクすることができます。

	<script src="index.js"></script>

結論

HTML 5 ボイラープレートを HTML ページに追加するようにしましょう。このスターターコードには文書型、メタデータ、外部スタイルシート、スクリプトタグ等の重要な情報が含まれています。