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

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 つタスクを実行しましょう。

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

多くのデベロッパーは画像の扱いに苦労します。レスポンシブ対応や位置の処理、中でもページの中央に画像を配置することは特に困難です。

そこで、この投稿では、さまざまな CSS のプロパティを使用して画像を縦と横の両方で中央に配置する方法で最もよく使われるものをお見せします。

過去の投稿では、CSS の Position や Display プロパティを扱っています。もしこれらのプロパティに馴染みがなければ、この記事を読む前にそちらを確認することをおすすめします。

この記事の動画版はこちらです。

画像を横方向で中央に配置する

まずは、3 つの異なる CSS プロパティを使用して、画像を横方向で中央に配置することから始めましょう。

Text-Align

画像を横方向で中央に配置する最初の方法は、text-align プロパティを使用することです。しかし、この方法は画像が <div> などのブロックレベルコンテナ内に含まれている場合のみ成功します。

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

画像を中央に配置する別の方法には、margin: auto プロパティを使用することが挙げられます (左右のマージンに対して)。

しかし、margin: auto プロパティを使用するだけでは、画像に適用できません。margin: auto を使用しなければならない場合、追加で 2 つのプロパティも使用する必要があります。

margin-auto プロパティはインライン要素に何の効果も発揮しません。<img> タグはインライン要素であるため、ブロックレベル要素に変える必要があります。

img {
  margin: auto;
  display: block;
}

次に、幅を指定する必要もあります。これにより、左右のマージンが残りの空白スペースを取り、自動整列させることができます。このようにすると (100% の幅を指定しない限り) うまくいきます。

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: Flex

画像を横方向で中央に配置する 3 つ目の方法は、display: flex プロパティを使用することです。text-align プロパティをコンテナ (外側の要素) に対して使用したように、display: flex もコンテナに対して使用します。

しかし、display: flex の使用だけでは不十分です、コンテナは justify-content という追加のプロパティを持たなければなりません。

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

justify-content プロパティは display: flex と一緒に使われて初めて機能し、画像を中央に配置できます。

最後に、画像の幅はコンテナの幅より小さくなければなりません。そうでなければ、スペースの 100％ を取り、中央配置することができなくなります。

重要: display: flex プロパティは古いバージョンのブラウザではサポートされていません。詳しくはこちらをご覧ください。

画像を縦方向で中央に配置する

Display: Flex

縦方向を揃える場合にも、display: flex が非常に便利です。

コンテナの高さが 800px あるのに対し、画像の高さが 500px しかない場合について考えてみましょう。

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

この場合、コンテナに align-items: center という 1 行のコードを追加するだけで上手くいきます。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

align-items プロパティは、display: flex と一緒に使用すると、要素を垂直方向に配置できます。

Position: Absolute と Transform プロパティ

縦方向を揃えるもう 1 つの方法は、position プロパティと transform プロパティを一緒に使用することです。これは少し複雑なので、順を追って説明しましょう。

Step 1: Position プロパティを Absolute に定義する

まず、画像の配置動作を static から absolute に変更します。

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

また、相対配置されたコンテナ内に置く必要があるため、そのコンテナの div に対して position: relative を追加します。

Step 2: Top と Left プロパティを定義する

次に、画像の top プロパティと left プロパティを定義し、それらを 50% に設定します。これにより、画像の開始点 (左上) がコンテナの中心に移動します。

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Step 3: Transform プロパティを定義する

しかし、Step 2 では、画像がコンテナの外に部分的にはみ出てしまいます。それを内側に戻す必要があります。

transform プロパティを定義し、その X 軸と Y 軸に -50% を追加するとうまくいきます。

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

水平方向と垂直方向の中央揃えには他にも方法がありますが、最も一般的な方法を説明しました。この投稿が、ページの中央に画像を配置する方法を理解するのに役立つことを願っています。

Web 開発について詳しく知りたい場合は、お気軽に私の YouTube チャンネルを見てみてください。

読んでくれてありがとうございます！

絵文字を使えば、テキストを超えた感情や心情を表現できます。また、楽しく簡単な方法で会話を活気づけることもできます。

しかし、使うのに最適な絵文字を見つけるのが難しい場合もあります。そこで、簡単にコピーして任意のエディターに貼り付けられる一覧表を作成することにしました。

絵文字の使い方

任意のソーシャルメディアプラットフォームのエディター、または絵文字を使いたい場所に直接コピー & ペーストすることで、これらの絵文字を使うことができます。

プラットフォームやデバイスが異なれば、絵文字の表示方法も異なります。たとえば、ある絵文字が Apple デバイスや Facebook では波打って表示されるのに対し、Twitter ではわずかに丸みを帯びて表示される可能性があります。この記事に記載されている絵文字のほとんどはあらゆるプラットフォームで機能します。

Unicode 文字の使用方法

Unicode 文字は、全ての文字、絵文字、または記号にコードを割り当てる万国共通のエンコーディング規格です。

たとえば、HTML に絵文字を挿入するには、すべての文字の先頭にある U+ を削除して、アルファベットと数字からなる文字参照を入力し、先頭にアンパサンド (&)、番号記号 (#)、および x を追加、最後にセミコロンを追加します。

例えば 🤣 は HTML で大笑い (role on the floor) の絵文字を挿入します。この記事では文字をバッククォート (`) で囲むことで、文字を直接表示させないようにしましたが、文字をバッククォートで囲わないと「🤣」のように表示されます。

コードが数字のみの Unicode、特に記号の場合、x を追加せずに HTML に挿入できます。例えば — により全角ダッシュ (—) が表示されます。

全ての絵文字一覧

読んでくださってありがとうございます。もしこの記事が役に立つと感じたら、友達にシェアしてくださると嬉しいです。

ユーザーが値を選択できるドロップダウンメニューを作成するには、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;
}