著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

CSSを使用してHTMLをスタイリングする場合、要素の不透明度を調整する方法は複数あり、この効果をデザインに使用する理由は複数あります。 不透明度は、影を和らげたり、特定のタスク中に重要でないコンテンツを強調しなかったり、コンテンツをフェードインまたはフェードアウトしたりするのに役立ちます。 これらの効果は、opacityプロパティ、transparentカラー名、またはアルファチャネルを使用して実現できます。これらは、不透明度を制御するための追加セグメントを備えたカラー値の拡張です。

このチュートリアル全体を通して、さまざまな方法を使用して不透明度と追加のプロパティを適用し、特定の効果を効果的に実現します。 :target疑似クラスとopacitypointer-events、およびtransitionプロパティを使用して、JavaScriptなしのアプローチで表示されるモーダルを作成します。 次に、各アルファチャネルの色の値を使用して、影、境界線、およびコンテンツのオーバーレイを作成します。 また、transparentカラー値を使用して、:hoverイベントでグラデーションがカラーをアニメーション化できるようにします。

前提条件

  • カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
  • タイプセレクター、コンビネーターセレクター、およびセレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
  • colorのプロパティの理解。 CSSでの色の操作の詳細については、CSSで色の値を使用する方法を参照してください。
  • backgroundプロパティを使用したCSSグラデーションの知識。 CSS を使用してHTML要素に背景スタイルを適用する方法を確認して、グラデーションの背景を作成する経験を積んでください。
  • box-shadowプロパティの経験。これについては、 CSS で境界線、影、およびアウトラインを使用してHTML要素のエッジのスタイルを設定する方法を参照してください。
  • ローカルマシンにindex.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

ベースHTMLとCSSの設定

この最初のセクションでは、チュートリアル全体で作成する視覚スタイルのHTMLを設定します。 また、styles.cssファイルを作成し、コンテンツのレイアウトを設定するスタイルを追加します。

まず、テキストエディタでindex.htmlファイルを開きます。 次に、次のHTMLをファイルに追加します。

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Destination: Moon</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
    <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:[email protected];700&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

HTMLの<head>要素内にいくつかのページ設定が定義されています。 <meta>要素は、テキストに使用する文字セットを定義します。これは、HTML文字コードを使用せずにコード内の特殊文字を解釈する方法をブラウザーに指示します。 <title>要素は、ブラウザにページのタイトルを提供します。 <link>要素はページスタイルで読み込まれます。 フォントの最初の3つはGoogleFonts からのMuseoModernoをロードし、最後の3つはstyles.cssに追加するスタイルをロードします。

次に、ページのスタイルを設定するコンテンツが必要になります。 Sagan Ipsum のサンプルコンテンツを、スタイルで使用するフィラーコピーとして使用します。 また、サイト名と小さなナビゲーションバーを含むHTMLをサイトヘッダーに適用します。 テキストエディタでindex.htmlに戻り、次のコードブロックから強調表示されたHTMLを追加します。

index.html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <header class="site-header">
      <h1 class="site-name">Destination: <strong>Moon</strong></h1>
      <nav>
        <ul class="nav-list">
          <li><a href="#" class="nav-link">Base Station</a></li>
          <li><a href="#" class="nav-link">Travel Packages</a></li>
          <li><a href="#" class="nav-link">Accommodations</a></li>
          <li><a href="#" class="nav-link">Plan Your Trip</a></li>
      </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Schedule Your Trip</h2>
        <p>Sea of Tranquility great turbulent clouds with pretty stories for which there's little good evidence extraordinary claims require extraordinary evidence. Citizens of distant epochs rings of Uranus intelligent beings birth take root and flourish across the centuries. Corpus callosum invent the universe as a patch of light the only home we've ever known a mote of dust suspended in a sunbeam made in the interiors of collapsing stars. Kindling the energy hidden in matter Orion's sword.</p>
        <p>Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
          <a href="#" class="button">Read the Disclaimer!</a>
      </section>
    </main>
  </body>
</html>

必ずindex.htmlファイルを保存し、テキストエディタで開いたままにしてください。 次に、styles.cssという名前の新しいファイルを作成し、テキストエディタで開きます。 これは、index.html<head>要素で参照されるファイルです。 styles.cssファイルに、次のコードを追加します。

styles.css
body {
  margin: 0;
  font: 100%/1.5 sans-serif;
}

main {
  margin: 6rem auto;
  width: 75ch;
  font-size: 1.125rem;
}

h2 {
  font: 400 1.875rem/1.25 MuseoModerno, sans-serif;
  color: #6b2d6b;
}

.site-header {
  font: 1.125rem / 1.25 MuseoModerno, sans-serif;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  color: white;
  background: linear-gradient(135deg, #8e3d8e, #230f23);
}

.site-name {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 400;
}

.nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: stretch;
}

.nav-link {
  color: inherit;
  display: block;
  text-decoration: none;
  padding: 1.25rem 1.5rem;
}

.nav-link:hover,
.nav-link:focus {
  color: #230f23;
  background-color: white;
}

.button {
  text-decoration: none;
  display: inline-block;
  padding: 0.5rem 1.25rem;
  color: white;
  background: #4c90b2;
  border: 1px solid #2d566b;
  border-radius: 0.5rem;
}

.button:hover,
.button:focus {
  background-color: #2d566b;
}

これらのスタイルは、bodyおよびmain要素に適用されたスタイルで、ページの全体的な美学とレイアウトを設定します。 .site-header.site-name.nav-list、および.nav-linkセレクターはすべて、ページヘッダーのスタイルを定義します。 .buttonおよび.button:hoverルールは、<a>要素を大きなクリック可能なボタンのように表示するように変更します。

変更内容をstyles.cssに保存し、Webブラウザを開きます。 ファイルメニュー項目を選択し、開くオプションを選択します。 次に、プロジェクトフォルダーに移動し、ブラウザーにindex.htmlファイルをロードします。 次の画像は、ページがブラウザでどのようにレンダリングされるかを示しています。

Sample website with a purple nav bar, a centered block of copy text, and a blue button with the words "Read the Disclaimer!"

これまでに作成したCSSは、ページの上部に紫色のヘッダーを作成し、サイトのタイトルとナビゲーションを白いテキストで表示します。 以下のコンテンツは、紫色の見出しと2段落のテキストで構成されています。 コンテンツの幅は、main要素セレクターのmax-width: 76chプロパティ値で75文字に制限されています。 最後に、免責事項を読んでください!というテキストが付いた青いボタンは、コンテンツの下にある大きなインタラクティブな要素です。

このセクション全体を通して、index.htmlファイルでHTMLを設定し、styles.cssファイルで基本スタイルを作成しました。 次のセクションでは、opacityプロパティを使用して、新しい要素を非表示にし、:target疑似クラスで再表示します。

:target状態をopacityで作成して、要素を表示および非表示にします

opacityプロパティの便利なアプリケーションは、画面上でコンテンツをフェードインおよびフェードアウトさせることです。 このような効果の1つの例は、ページの残りのコンテンツの前に表示されるUI要素(ライトボックスとも呼ばれます)であるモーダルがビューに遷移する場合です。 。 この効果は、opacityおよびpointer-eventsプロパティと:target疑似クラスの組み合わせで作成できます。

index.htmlを開いて、モーダルのコンテンツを作成することから始めます。 </section></main>の終了タグの間に、次のコードブロックから強調表示されたHTMLを追加します。

index.html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <main>
      <section>
        ...
      </section>
      <div class="modal-container">
        <section class="modal">
          <header class="modal-header">
            <h2 class="modal-title">Destination: Moon Disclaimer</h2>
            <a href="#" class="modal-close">Close</a>
          </header>
          <div class="modal-content">
            <p><strong>Disclaimer:</strong> Vastness is bearable only through love emerged into consciousness not a sunrise but a galaxyrise emerged into consciousness courage of our questions across the centuries and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

変更をindex.htmlに保存してから、テキストエディタでstyles.cssに戻り、次のコードブロックで強調表示されたCSSをファイルに追加します。

styles.css
...

.button:hover {
  background-color: #2d566b;
}

.modal-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: black;
  display: flex;
}

.modal {
  margin: auto;
  width: 90%;
  max-width: 40rem;
  background-color: white;
  border-radius: 1.5rem;
}

.modal-header,
.modal-content {
  padding: 1.5rem;
}

.modal-containerクラスは、fixed要素で可視スペース全体をカバーする領域を定義します。 次に、.modal-containerdisplay: flex.modalセレクターのmargin: autoを組み合わせて、コンテンツを垂直方向と水平方向の両方でページの中央に配置します。

変更をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 次の画像に示すように、黒いオーバーレイが白いコンテナでページを引き継いだため、ページのコンテンツは表示されなくなりました。

White modal box with a black background covering the rest of the page

モーダルが配置され、ページのコンテンツをカバーするようになったので、インスタンス化されるまで非表示にする必要があります。 opacityプロパティは、要素とそのコンテンツに半透明を配置できるようにする古いプロパティです。 opacityプロパティの値は、0から1の範囲で、小数点以下を問わず使用できます。

opacityプロパティの使用を開始するには、テキストエディタでstyles.cssに戻ります。 次のコードブロックで強調表示されているように、.modalクラスセレクターで、値が0opacityプロパティを追加します。

styles.css
...
.modal-container {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1000;
   background-color: black;
   display: flex;
  opacity: 0;
}
...

これにより、モーダルビュー全体が画面上で視覚的に非表示になります。 モーダルは、必要な場合にのみ表示されます。 この条件付きの外観を実現するには、:target疑似クラスを使用できます。

.modal-containerセレクターの後に、.modal-container:targetの新しいセレクターを追加します。 セレクターブロック内で、別のopacityプロパティを1の値に設定します。 次のコードブロックで強調表示されているCSSは、これがどのようにフォーマットされているかを示しています。

styles.css
...
.modal-container {
  ...
  opacity: 0;
}

.modal-container:target {
  opacity: 1;
}
...

これらの変更をstyles.cssに保存します。

:targetは、要素にURLフォーカスがある場合にインスタンス化されます。 Webブラウザーでは、HTML要素のid属性は、ポンド記号またはハッシュ記号(#)で示されるようにURLで参照できます。 .modal-container:targetをアクティブにするには、同じ要素にid要素が必要であり、ページにはそのURLをトリガーする方法が必要です。

テキストエディタでindex.htmlに戻ります。 <div class="modal-container">要素で、値disclaimerに設定されたid属性を追加します。 次に、<a href="#" class="button">要素で、hrefの値を#から#disclaimerに変更します。 これがどのように記述されるかについては、次のコードブロックで強調表示されたHTMLを参照してください。

index.html
<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <main>
      <section>
         ...
         <a href="#disclaimer" class="button">Read the Disclaimer!</a>
       </section>
       <div id="disclaimer" class="modal-container">
         ...
       </div>
    </main>
  </body>
</html>

href値への変更は、現在のページのdisclaimerid値を持つ要素に移動するようにブラウザーに指示します。 #disclaimerがURLに追加されると、CSSの:targetがアクティブになります。

これらの変更をindex.htmlに保存してから、styles.cssに戻ります。

現在のページの構造では、モーダルはマウスまたはタッチスクリーンの操作から発生するすべてのクリックおよびタッチイベントをキャプチャします。 これは、完全に透過的ですが、モーダル要素がページ全体をカバーしているためです。 要素からインタラクティブ機能を削除するには、値がnonepointer-eventsプロパティを.modal-containerセレクターに追加します。 次に、モーダルが表示されたら、インタラクションイベントを再度受信できるようにする必要があります。 次のコードブロックで強調表示されているように、:target疑似クラスで、pointer-eventsallに設定します。

styles.css
...
.modal-container {
  ...
  opacity: 0;
  pointer-events: none;
}

.modal-container:target {
  opacity: 1;
  pointer-events: all;
}
...

pointer-eventsプロパティは、要素がマウスまたはタッチベースの入力デバイスと対話する方法を変更します。 値をnoneに設定すると、要素は、目の見えるユーザーだけでなく、ポインターベースの入力デバイスにも表示されなくなります。 次に、all値はインタラクションを復元しますが、これは.modal-containerがアクティブで表示されるようにURLで指定されている場合に限ります。

最後に、モーダルをフェードインおよびフェードアウトさせるために、transitionプロパティを追加して、opacity.01の値の間でアニメーション化します。

次のコードブロックで強調表示されているように、styles.cssに戻り、transitionプロパティを.modal-containerセレクターに追加します。

styles.css
...
.modal-container {
  ...
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.modal-container:target {
  opacity: 1;
  pointer-events: all;
}
...

transitionプロパティは、一連のプロパティの省略形です。 opacityは、これが移行するプロパティであることをブラウザに通知します。 250msは、移行が完了するまでにかかる時間であり、単位はミリ秒単位です。 最後に、easeは、遷移がどのように発生するかを説明します。 この場合、easeは、ゆっくりと開始し、速度を上げてから、遷移の終わり近くで再び速度を落とすことを意味します。

トランジションは、モーダル内の Close リンクを押して、モーダルが表示および非表示になったときに機能します。 このCloseリンクのhref値は#に設定されており、URLが#disclaimerから#に変更され、[ X134X]