CSS やウェブ開発を学び始めたばかりですか？インターネットのいたるところで目にする綺麗な図形がどうやって作られているか疑問に思ったことがありますか？もう疑問に思うことはありません。この記事で答えを見つけましょう。

以下、CSS で図形を作成する基本を説明します。このトピックについては説明することがたくさんあります！そのためツールや図形のすべてはカバーしませんが (扱うのはほんの一部です)、CSS で図形を描く方法の基本的な考え方がわかるはずです。

一部の図形では他の図形に比べ多くのコツが必要です。CSS による図形は通常、width、height、top、right、left、border、bottom、transform などや、:before、:after のような疑似要素を組み合わせて作成します。shape-outside や clip-path のような比較的新しい CSS プロパティもあり、こちらについても後ほど説明します。

CSS の図形 - 基本の方法

CSS のコツをいくつか使うと、よく目にする CSS プロパティだけで正方形、円、三角形などの基本的な図形を作成できます。その例を見てみましょう。

正方形と長方形

正方形と長方形は一番描きやすい図形でしょう。div 要素もデフォルトの状態で正方形または長方形です。

下記のコードに示すように、width (幅) と height (高さ) を設定します。あとは要素に背景色を追加するだけです。必要に応じてその他のプロパティも追加できます。

#square {
    background: lightblue;
    width: 100px;
    height: 100px;
}

円

円を作成するのも同じくらい簡単です。円を作成するには、要素に border-radius を設定します。このプロパティは要素の角を丸くします。

border-radius を 50% に設定すると円になります。width と height の値が異なるときは楕円になります。

#circle {
    background: lightblue;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

三角形

三角形は少し難易度が上がります。三角形になるように border (境界線) を設定しなければなりません。要素の width と height をゼロに設定すると、実質的には境界線の幅が要素の幅になります。

要素の境界線が接する端は 45° の対角線になることを頭に置いておいてください。それを利用して三角形を作ることができます。境界線の 1 本を単色に設定し、他の境界線を transparent (透明) に設定すると、三角形の形ができます。

#triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 80px solid lightblue;
}

三角形 (矢印) の方向を変えたい場合は、どちら側の境界線を表示させたいかに応じて border プロパティの設定値を変更します。または transform プロパティで要素を回転させても構いません。

 #triangle {
     width: 0;
     height: 0;
     border-top: 40px solid transparent;
     border-right: 80px solid lightblue;
     border-bottom: 40px solid transparent;
 }

以上が CSS の基本的な図形の紹介です。作成したい図形の種類は無限にあることでしょう。ここで紹介したのは基礎のみですが、少しの創造性と根気があれば、基本の CSS プロパティだけでもさまざまなことができます。

もっと高度な図形を作成する場合、:after や :before などの疑似セレクターを使うのも良いでしょう。この記事は入門として基礎的な内容にとどめておこうと思うので、疑似セレクターについては扱いません。

デメリット

上記の方法には 1 つ大きな欠点があります。例えばテキストを図形に沿って回り込ませたい場合です。通常の HTML div 要素で背景と境界線を使って図形を作る場合はそれができません。テキストは図形に沿う形ではなく、div 要素自体 (正方形または長方形) に沿って回り込みます。

下記が三角形とテキストの回り込み方を示した図です。

幸い、代わりに使える新しい CSS プロパティがあります。

CSS の図形 - もう一つの方法

近年では、shape-outside という CSS プロパティが使えます。このプロパティを使ってテキストが回り込む形状を定義できます。

このプロパティでは以下のような基本的な図形が使えます。

inset()
circle()
ellipse()
polygon()

補足: clip-path プロパティを使うこともできます。このプロパティでも同様に図形を作成できますが、shape-outside と違ってテキストを図形に沿って回り込ませることができません。

shape-outside プロパティを使って形状を指定する要素は浮動 (float) 要素でなければなりません。また、width と height が指定されていなければなりません。これは重要なので覚えておきましょう！

理由について詳しくはこちらを参照してください。リンク先には次のように書かれています。

shape-outside プロパティは、浮動領域と浮動要素を表す以下に挙げた値を使用して指定します。浮動領域はインラインコンテンツ (浮動要素) が囲む形状を指定します。(引用元: developer.mozilla.org)

inset()

inset() を使うと長方形または正方形を作成でき、オプションでテキストの回り込みのオフセットを指定できます。この値で、周りのテキストが図形にどれだけ重なるかを指定できます。

四方向すべてに同じオフセットを指定するには inset(20px) のように指定します。または inset(20px 5px 30px 10px) のように、それぞれの方向を個別に指定できます。

オフセットの設定には、パーセントなど他の単位も使用できます。値は inset(上 右 下 左) の方向に対応します。

下記のコード例を見てください。この例では inset の値を上側が 20px、右側が 5px、下側が 30px、左側が 10px に設定しています。テキストを重ねるのではなく、正方形の周囲に沿ってテキストを回り込ませたいなら inset() を使用しなくても構いません。その場合は div 要素のサイズと背景を指定するだけです。

 #square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px);
     background: lightblue;
 }

また、inset() に 2 つ目の値を渡して、inset の border-radius を指定することも可能です。次のとおりです。

 #square {
     float: left;
     width: 100px;
     height: 100px;
     shape-outside: inset(20px 5px 30px 10px round 50px);
     background: lightblue;
 }

circle()

次の例では shape-outside プロパティを使って円を作成します。円を表示させるには、対応するプロパティで clip-path も適用する必要があります。

clip-path プロパティは shape-outside プロパティと同じ値を取ることができるので、shape-outside に使ったのと同じ、標準的な circle() の形状を指定しましょう。またここではテキストとの間にスペースを空けるため、要素に 20px のマージンを適用しています。

#circle {
    float: left;
    width: 300px;
    height: 300px;
    margin: 20px;
    shape-outside: circle();
    clip-path: circle();
    background: lightblue;
}

上記の例では、円の半径を指定していません。これは円を div の大きさ (300px) に合わせたかったからです。円に異なる大きさを指定することも可能です。

circle() は 2 つの値を取ります。1 つ目の値は半径、2 つ目の値は位置です。これらの値で円の中心を指定します。

下記の例では半径を 50% に設定しました。そして円の中心を 30% ずらしました。半径と位置の値の間には "at" を入れなければならないことに注意してください。

また、clip-path には異なる位置の値を指定しています。位置を 0 に動かしたことにより、円が半分に切り取られています。

 #circle {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: circle(50% at 30%);
      clip-path: circle(50% at 0%);
      background: lightblue;
    }

ellipse()

ellipse は circle と同じように動作しますが、楕円を作成します。ellipse(25px 50px) のように、X 方向の値と Y 方向の値両方を定義できます。

circle と同様に、最後の引数として位置の値を取ることもできます。

   #ellipse {
      float: left;
      width: 150px;
      height: 150px;
      margin: 20px;
      shape-outside: ellipse(20% 50%);
      clip-path: ellipse(20% 50%);
      background: lightblue;
    }

polygon()

polygon (多角形) は、さまざまな頂点 / 座標で定義される図形です。下記では筆者のイニシャル "T" の形を作成します。座標 0,0 からスタートして左から右へ移動し、"T" の形を描いています。

#polygon {
      float: left;
      width: 150px;
      height: 150px;
      margin: 0 20px;
      shape-outside: polygon(
        0 0,
        100% 0,
        100% 20%,
        60% 20%,
        60% 100%,
        40% 100%,
        40% 20%,
        0 20%
      );
      clip-path: polygon(
        0 0,
        100% 0,
        100% 20%,
        60% 20%,
        60% 100%,
        40% 100%,
        40% 20%,
        0 20%
      );
      background: lightblue;
    }

画像

背景を透過した画像の形を使うこともできます。たとえばこの丸い美しい月の画像を使います。

これは背景を透過した .png 画像です。

<img src="src/moon.png" id="moon" />

#moon {
      float: left;
      width: 150px;
      height: 150px;
      shape-outside: url("./src/moon.png");
    }

以上です！お読みいただきありがとうございました。

この記事を書いた人

私はスウェーデンの開発者 Thomas Weibenfalk です。個人の YouTube チャンネルで定期的に無料のチュートリアルを投稿しています。React や Gatsby に関するプレミアムコースもあります。以下のリンクを参照してください。

Twitter — @weibenfalk
Weibenfalk on YouTube
Weibenfalk Courses Website

z-index は、要素をレイヤー (層) 状に重ねて配置するために使う CSS プロパティです。とても便利かつ、CSS を扱うならば使い方を知っておくことが非常に重要なツールです。

残念ながら、z-index は動作が直観的でないことも多いプロパティです。最初の内は z-index の値が大きい要素が小さい要素の上に重なるというシンプルな動作に見えますが、動作を複雑にする追加のルールがあります。それで問題が起きるたび z-index を 999999 に設定して修正するわけにもいきませんよね。

この記事では z-index が動作しない原因として考えられる主な 4 つの理由と、その修正方法を解説します。

実際のコード例と問題の修正手順を見ていきます。この記事を読めば、z-index のよくある落とし穴を理解して回避できるようになるでしょう。

この記事の動画バージョンは筆者の YouTube チャンネル「Coder Coder」にて公開されています。

では最初の理由を見ていきましょう。

1. 同じ重ね合わせコンテキストの要素は、コードに書かれている順で前の要素の上に重ねて表示される

最初の例は、3 つの要素からなる比較的シンプルなレイアウトです。

• 猫の画像
• テキストが書かれた白いブロック
• 同じ猫の画像がもう一枚

HTML のコードは次の通りです。

<div class="cat-top"></div> 

<div class="content__block"> Meow meow meow... </div> 

<div class="cat-bottom"></div>

このレイアウトで、テキストが書かれた白いブロックを 2 匹の猫の上に重ねて表示したいとします。

そのためにまず、猫の画像両方に負の数のマージンを設定して、白いブロックと一部分が重なるようにしました。

.cat-top { 
   margin-bottom: -110px; 
} 

.cat-bottom { 
   float: right; 
   margin-top: -120px; 
}

ところが今はこのような表示になっています。

See the Pen Z-index: #1: set position, #2: natural stacking order, #3: CSS properties by Jessica (@thecodercoder) on CodePen.

1 匹目の猫は、期待したとおり白いブロックの奥に表示されています。ですが 2 匹目の猫が手前に表示されてしまっています。

これはなぜでしょう。

このような表示になるのはウェブページの通常の重ね合わせ順が原因です。この基準が、どの要素が上にくるか下にくるかの基本的な順序を決めています。

要素に z-index が指定されていない場合でも、どちらが上に重なるかには理由があるのです。

この例ではどの要素にも z-index の値が設定されていません。したがって、重ね合わせ順はコード内の登場順で決まります。このルールでは、マークアップで後に登場する要素が前の要素の上 (手前) に重ねられます。

(重ね合わせ順序の基準については Mozilla Developer Network のページでより詳しく説明されています。)

この例では、猫の画像と白いブロックはこのルールに従って配置されています。1 匹目の猫が白いブロックの下 (奥) に、その白いブロックが 2 匹目の猫の下に入っているのはそのためです。

これで重ね合わせ順序については分かりました。では 2 匹目の猫が白いブロックの下にくるようにするには CSS をどう直したら良いのでしょう。

ここで 2 つ目の理由の登場です。

2. 要素に position プロパティが指定されていない

重ね合わせ順序を決めるもう 1 つの基準は、要素の position (位置) が指定されているかどうかです。

要素の位置を指定するには、CSS に position プロパティを追加して static 以外の値に設定します。例えば relative や absolute などです。(この点について詳しくは、筆者によるこちらの記事 (英語) を参考にしてください。)

このルールでは、位置指定された (positioned) 要素は、位置指定されていない要素よりも手前に表示されます。

つまり白いブロックを position: relative に設定して、2 匹の猫の要素は位置指定されていない状態のままにすれば、白いブロックが猫の要素よりも手前に重ねられます。

表示は次のようになります。先ほどの Codepen を使って動作を確認しても構いません。

次は transform プロパティを使って、下側の猫を上下逆になるように回転させようと思います。そうすると両方の猫が白いブロックより奥に表示され、顔だけを出した状態になるはずです。

ですが上記の設定は、さらなる z-index 関連の混乱を招きます。次のパートで問題とその解決方法を説明します。

3. opacity や transform など一部の CSS プロパティが設定された要素は、新しい重ね合わせコンテキストに移動される

先ほど述べたように、下側の猫を上下逆に表示したいと思います。そのために transform: rotate(180deg) を追加します。

.cat-bottom { 
   float: right; 
   margin-top: -120px; 
   transform: rotate(180deg); 
}

しかしこの設定を適用すると、下側にいる猫はまた白いブロックの手前に表示されるようになってしまいます。

一体何が起きているのでしょうか？

この問題に遭遇することは少ないかもしれませんが、これも重ね合わせ順序の特徴の一つです。transform や opacity など一部の CSS プロパティは、要素を専用の新しい重ね合わせコンテキスト (stacking context) に移動します。

どういうことかと言うと、.cat-bottom の要素に transform を追加すると、この要素は z-index が 0 の時と同じ状態になります。position も z-index も設定していないのにです。(この挙動を opacity プロパティの場合について説明している W3.org のドキュメントがあります。)

白いブロックに追加したのは position: relative だけで、z-index の値は追加していないことを思い出してください。それだけで位置指定されていない猫の要素より手前に配置されるようにできていました。

しかし transform の設定によって、.cat-bottom の要素が z-index: 0 で相対位置指定された場合と同じようにふるまうようになり、白いブロックの手前に表示されるようになってしまいました。

この場合の修正方法は、せめて白いブロックの方だけでも position: relative と z-index を明示的に設定することです。念のため猫の要素にも position: relative とさらに小さい z-index を設定しても構いません。

.content__block { 
   position: relative; 
   z-index: 2; 
} 

.cat-top, .cat-bottom { 
   position: relative; z-index: 1; 
}

これで基本的な z-index の問題のほとんどは解決できると思います。

では z-index が動作しない最後の理由に移りましょう。今度は親要素と子要素が絡んでくるので少し複雑です。

4. 親要素の z-index レベルが原因で、要素が低い重ね合わせコンテキストにある

このケースのコード例を見てみましょう。

See the Pen Z-index: #4 different stacking contexts by Jessica (@thecodercoder) on CodePen.

シンプルなウェブページの例です。よくあるコンテンツと、その手前に「Send Feedback」と書かれたピンクのサイドタブが配置されています。

そして猫の写真をクリックするとモーダルウィンドウが開き、背景に半透明のグレーがオーバーレイ表示されます。

しかしモーダルウィンドウが開いた時、サイドタブがグレーのオーバーレイより手前に表示されています。このオーバーレイを、サイドタブも含めたすべての表示内容を覆うような形で手前に表示させたいと思います。

問題となっている要素の CSS を見てみましょう。

.content { 
   position: relative; 
   z-index: 1; 
} 

.modal { 
   position: fixed; 
   z-index: 100; 
} 

.side-tab { 
   position: fixed; 
   z-index: 5; 
}

すべての要素が位置指定されています。そしてサイドタブの z-index が 5 に設定されているため、z-index: 1 となっているコンテンツの要素より手前に表示されます。

次にモーダルには z-index: 100 が設定されているので、z-index: 5 のサイドタブより手前に表示されるはずです。しかし実際にはモーダルがサイドタブの奥に表示されてしまっています。

どうしてこうなっているのでしょう？

ここまでに、重ね合わせコンテキストに影響する要因をいくつか見てきました。position が指定されているかどうかや、マークアップ内での登場順などです。

ここでさらにもう一つ、重ね合わせコンテキストの特徴を紹介します。子要素はその親要素の重ね合わせコンテキスト内に制限されるということです。

問題となっている 3 つの要素を詳しく見てみましょう。

マークアップは次のようになっています。

<section class="content">            
    <div class="modal"></div>
</section>

<div class="side-tab"></div>

このマークアップを見ると、コンテンツとサイドタブの要素は兄弟要素であることがわかります。つまり、この 2 つの要素はマークアップの中で同じ階層に位置します。(この階層は z-index の階層とは異なります。) そしてモーダルは、コンテンツの要素の子要素となっています。

モーダルがコンテンツの要素の内側にあるので、z-index を 100 に設定しても、その親要素内でしか効果を発揮できません。例えばもしモーダルから見て兄弟要素にあたる他の子要素があったとしたら、その兄弟要素はお互いの z-index の値に応じて手前に表示されたり奥に表示されたりします。

しかしその z-index の値は、親要素の外側には影響しません。親要素であるコンテンツの要素は  z-index が 1 に設定されているためです。

そのため子要素 (モーダルも含む) は、この z-index レベルの外に出ることができません。

(少し気が滅入るようなメタファーですが「子は親に制限されていてそこから出ることができない」と憶えてもいいでしょう。)

この問題を解決する方法は 2 つあります。

解決法 1: モーダルを親であるコンテンツ要素の外に出し、ページのメインの重ね合わせコンテキストに移動させる

この方法で修正したマークアップがこちらです。

<section class="content"></section>

<div class="modal"></div>

<div class="side-tab"></div>

これで、モーダルの要素が他 2 つの要素と兄弟要素になりました。これで 3 つの要素すべてが同じ重ね合わせコンテキストとなり、お互いの z-index レベルに応じて重ねられます。

この新しい重ね合わせコンテキストでは、要素は次の順序で上 (手前) から順に重ねられます。

• モーダル (z-index: 100)
• サイドタブ (z-index: 5)
• コンテンツ (z-index: 1)

解決法 2: コンテンツから位置指定を削除して、モーダルの z-index を制限しないようにする

マークアップを変更したくない、あるいは変更できない場合、コンテンツの要素の position 指定を削除することで問題を修正できます。

.content { 
   // No position set 
} 

.modal { 
   position: absolute; 
   z-index: 100; 
} 

.side-tab { 
   position: absolute; 
   z-index: 5; 
}

コンテンツの要素が位置指定されていない状態になったので、モーダルの z-index の値を制限しなくなりました。これで、より高い z-index の値 100 を持つモーダルがサイドタブの要素よりも手前に表示されます。

この方法でも修正できますが、筆者は個人的には 1 つめの方法を使います。

なぜかと言うと、将来的に何らかの理由があってコンテンツの要素を位置指定しなければならなくなったときに、またモーダルの重ね合わせ順が制限されてしまうためです。

まとめ

この記事がお役に立てば幸いです！まとめると、z-index の問題はたいてい次のガイドラインに従って解決できます。

1. 要素が位置指定されているか、z-index の値が正しい順序になっているか確認する
2. 親要素によって子要素の z-index レベルが制限されていないか確認する

もっと読む

筆者のブログ coder-coder.com でもウェブ開発に関するチュートリアルを執筆しています。また Instagram にもちょっとしたコツを投稿しています。

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

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

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

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

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

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

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

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

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

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

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

そこで、この投稿では、さまざまな 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 チャンネルを見てみてください。

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

ユーザーが値を選択できるドロップダウンメニューを作成するには、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 の幅と高さを設定する他の方法を知っていますか？

‌ぜひ教えてください！

SVG は Scalable Vector Graphics の略です。SVG とは、Extensible Markup Language (XML) で書かれた、ベクター画像用の固有の画像形式です。

このチュートリアルでは、SVG 画像を使用する理由と、CSS と HTML で SVG 画像を使用する方法についてお伝えします。

なぜ SVG 画像を使用すべきなのでしょうか？

SVG 画像を使用する理由はたくさんありますが、以下にそのいくつかを挙げてみます:

• SVG 画像は拡大したりサイズを変更しても、画質が低下しません。
• SVG は IDE または テキストエディターで作成し、編集できます。
• SVG は使いやすく、アニメ化しやすいです。
• SVG はファイルサイズが小さく、拡張性が高いです。
• また、SVG は検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮できます。

ではこれから、SVG 画像を扱う方法を実際に見ていきましょう。

このチュートリアルで使用する SVG 画像をダウンロードする方法

このチュートリアルの中で使用した SVG 画像を、自分でも使ってみたい場合は、以下の手順と図に従ってダウンロードしてください。

• unDraw を訪れる。
• 配色を黄色に変更する。
• 検索ボックスで、happy という言葉を検索する。

• Happy news という名前の画像をクリックする。
• ポップアップウィンドウが現れるので、Download SVG for your projects ボタンをクリックする。

上記の手順が正しく実行されていれば、コンピュータに SVG 画像をダウンロードできているはずです。

では、SVG 画像をお気に入りの IDE またはテキストエディターで開いてください。開いた画像の名前を、happy.svg もしくは好きな名前に変更してください。

CSS と HTML で SVG 画像を使用する方法

CSS と HTML で SVG 画像を使用するには、いろいろな方法があります。このチュートリアルでは、異なる 6 つの方法を説明します。

1. <img> で SVG を使用する方法

これが SVG 画像をウェブページに追加する、最も簡単な方法です。次のようにして、<img> 要素をHTML ドキュメントに追加し、src 属性の中で SVG 画像を参照します:

<img src ="happy.svg" alt="My Happy SVG"/>

unDraw から SVG 画像をダウンロードし、ファイル名を happy.svg に変更してあれば、上のコードスニペットを HTML ドキュメントの中に追加できます。

もしすべてが正しく行われていれば、ウェブサイトはちょうど以下のデモのように見えるはずです。👀

サイズを指定せずに <img> タグを使用して SVG 画像を追加すると、その画像は元の SVG ファイルのサイズであると見なされます。

たとえば、上のデモにおいて、SVG 画像はサイズを変更していないので、その画像の元のサイズ (幅が 915.11162 ピクセル で、高さが 600.53015 ピクセル) と見なされます。

注: 表示する画像のサイズを変更するには、 下のデモの中で確認できるように、CSS で width と height を指定する必要があります。または、元の画像の width と height を直接更新できます。

<img> タグによって追加された SVG 画像のサイズを変更できるとはいえ、SVG 画像に大幅なスタイルの変更を加えようとする場合に、まだいくらかの制限があります。

2. CSS の background-image で SVG を使用する方法

この方法は、<img> タグを用いて SVG を HTML ドキュメントに追加することに似ています。しかし今回は、以下に示されたコードスニペットを用いて、HTML の代わりに CSS でそれを行います。

body {
  background-image: url(happy.svg);
}

SVG を CSS の 背景画像 (background image) で使用する場合、<img> タグを使用する時と似たような制限があります。ただ、もう少しカスタマイズできます。

以下のデモを確認して、CSS を用いて自由に変更を加えてみてください。

3. インラインで SVG 画像を使用する方法

<svg> </svg> タグを使用すれば、HTML ドキュメントの中へ SVG 画像をインラインで直接記述できます。

そうするには、VS code またはお好みの IDE の中で SVG 画像を開き、画像のコードをコピーして、HTML ドキュメントの <body> 要素の内側に貼り付けます。

<body>
 // Paste the SVG code here.
</body>

もしすべてが正しく行われたとしたら、ウェブサイトはちょうど以下のデモのように見えるはずです。

HTML ドキュメントの中で SVG をインラインで使用する場合は、HTTP リクエストが 1 回で完結するので、ロード時間が減ります。

<img> または background-image 方式のどちらか一方を用いることとは対照的に、この方法を用いることでより多くのカスタマイズができます。

4. <object> で SVG を使用する方法

以下の構文のコードを使用すれば、HTML の <object> 要素でもウェブページに SVG 画像を追加できます:

<object data="happy.svg" width="300" height="300"> </object>

object 要素によって用いられるリソースの URL を、data 属性を用いて指定します。この場合では SVG 画像を指定しています。

width と height 属性を使用して、SVG 画像のサイズを指定します。

繰り返しになってしまいますが、以下のデモをご覧ください。 😃

<object> の使用は、SVG をサポートしているすべてのブラウザーでサポートされています。

5. <iframe> でSVG を使用する方法

この方法はお勧めしませんが、以下のデモで示すように、<iframe> を使用することでも SVG 画像を追加できます。

ただし、<iframe> を管理するのは難しく、サイトの検索エンジン最適化 (SEO) に、悪影響を与える可能性があることを忘れないようにしてください。

また、<iframe> を使用して追加された SVG 画像は拡張性を失い、Scalable Vector Graphics という名前の中の、Scalable (拡張性がある) という性質をくつがえしてしまします。

6. <embed> で SVG を使用する方法

HTML の <embed> 要素は、SVG 画像を HTML と CSS で使用する、これまでとは別の方法であり、次の構文を使用します: <embed src="happy.svg" />

しかし、この方法にも制限があることを忘れないでください。MDN によると、ほとんどのモダンなブラウザーは、プラグインに対するサポートを非推奨にして削除しています。これは、普通のユーザーのブラウザー上で、ご自身のサイトを操作できるようにしたい場合は、<embed> に依存することは一般的に賢明ではないことを意味しています。

以下のデモで、HTML の <embed> 要素を使用して SVG 画像を追加しています。

結論

CSS と HTML で SVG 画像を使用する、さまざまな方法について学ぶことができたと思います。このことが、SVG 画像をウェブサイトへ追加する際に、適切な方法を選ぶことができるように、うまく案内してくれます。

ご質問がございましたら、Twitter のメッセージでご連絡くだされば、どんな小さなご質問も喜んで解答いたします。