[インデックス 13791] ファイルの概要

このコミットは、Go言語の公式ドキュメントサイトのスタイルシートである doc/style.css に変更を加えています。このファイルは、Go言語のウェブサイトの視覚的な表現、レイアウト、タイポグラフィなどを定義するCSS（Cascading Style Sheets）ファイルです。具体的には、ウェブサイトのヘッダー部分（トップバー）の表示に関するスタイルが更新されています。

コミット

commit 56e1384aa03d65da705a15d165c34d1c0405a8eb
Author: Brian Slesinskya <skybrian@google.com>
Date:   Tue Sep 11 11:38:47 2012 +1000

    doc css: topbar sticks to the top of large windows.
    Rationale: for large screens, the convenience of not having to scroll
    to the top of the page to do a search outweighs having less vertical
    space.
    Tested with Chrome, Firefox, Safari with various window and text sizes.
    
    R=adg
    CC=gobot, golang-dev
    https://golang.org/cl/6493071

GitHub上でのコミットページへのリンク

https://github.com/golang/go/commit/56e1384aa03d65da705a15d165c34d1c0405a8eb

元コミット内容

このコミットは、Go言語のドキュメントサイトのCSSを更新し、大きなウィンドウサイズでトップバー（ヘッダー部分）が常に画面上部に固定されるように変更しました。この変更の理由は、大きな画面では、検索を行うためにページをスクロールして上部に戻る手間を省く利便性が、垂直方向のスペースがわずかに減少するデメリットを上回ると判断されたためです。この機能は、Chrome、Firefox、Safariの様々なウィンドウサイズとテキストサイズでテストされています。

変更の背景

この変更の主な背景は、ユーザーエクスペリエンスの向上にあります。特にデスクトップPCなどの大きなディスプレイを使用しているユーザーにとって、ウェブページを閲覧中にページの下部にスクロールした場合でも、検索バーやナビゲーションリンクを含むトップバーが常に画面上部に表示されることで、これらの機能へのアクセスが格段に容易になります。

従来のウェブサイトでは、ユーザーがページを下にスクロールするとトップバーも一緒に画面外に消えてしまい、検索や他のページへの移動が必要になった際に、わざわざページを上までスクロールし直す必要がありました。これは特に長いドキュメントページを閲覧している場合に不便でした。

このコミットは、この不便さを解消し、ユーザーがより効率的にサイト内を移動し、必要な情報にアクセスできるようにすることを目的としています。固定ヘッダーは、現代のウェブデザインにおける一般的なパターンであり、ナビゲーションの利便性を高めるために広く採用されています。

前提知識の解説

このコミットの変更内容を理解するためには、以下のCSSに関する前提知識が必要です。

1. CSS (Cascading Style Sheets): ウェブページの見た目（色、フォント、レイアウトなど）を定義するためのスタイルシート言語です。HTML要素にスタイルを適用します。

2. @media Rule (メディアクエリ): @media ルールは、異なるメディアタイプ（例: screen、print）やデバイスの特性（例: 画面の幅、高さ、解像度）に基づいて異なるスタイルを適用するためのCSSの機能です。これにより、レスポンシブデザイン（様々なデバイスや画面サイズに適応するデザイン）を実現できます。

   • screen: スクリーンデバイス（PC、タブレット、スマートフォンなど）に適用されます。
   • min-width: 指定された幅以上の場合にスタイルを適用します。
   • min-height: 指定された高さ以上の場合にスタイルを適用します。
   • ex 単位: フォントの「x-ハイト」（小文字の 'x' の高さ）を基準とした相対的な長さの単位です。フォントサイズに依存するため、テキストの大きさに合わせてレイアウトを調整する際に便利です。130ex は、現在のフォントの 'x' の高さの130倍の幅を意味します。

3. position プロパティ: 要素の配置方法を制御するCSSプロパティです。

   • static (デフォルト): 通常のドキュメントフローに従って配置されます。
   • relative: 通常のドキュメントフローに従って配置されますが、top, right, bottom, left プロパティを使用して相対的に位置を調整できます。
   • absolute: 最も近い位置指定された祖先要素（position が static 以外）を基準に配置されます。
   • fixed: ビューポート（ブラウザの表示領域）を基準に配置され、スクロールしてもその位置に固定されます。このコミットでトップバーを固定するために使用されています。

4. z-index プロパティ: position プロパティが static 以外の要素の重なり順序を制御します。値が大きいほど手前に表示されます。このコミットでは、トップバーが他のコンテンツの上に表示されるように z-index: 1 が設定されています。

5. top, width, height, border-bottom プロパティ:

   • top: position プロパティが fixed, absolute, relative の要素に対して、上端からのオフセットを指定します。top: 0; は、要素が親要素またはビューポートの上端に揃えられることを意味します。
   • width: 要素の幅を設定します。width: 100%; は、親要素の幅いっぱいに広がることを意味します。
   • height: 要素の高さを設定します。
   • border-bottom: 要素の下側の境界線のスタイル、幅、色を設定します。

6. margin プロパティ: 要素の外側の余白（マージン）を設定します。margin-top は要素の上側のマージンを設定します。固定された要素がある場合、その下のコンテンツが固定要素に隠れないように、コンテンツの margin-top を調整してスペースを確保する必要があります。

技術的詳細

このコミットでは、Go言語のドキュメントサイトのトップバーを、特定の条件下で画面上部に固定表示させるためのCSSが追加されています。

変更の核となるのは、@media screen ルールを用いたレスポンシブデザインの実装です。

@media screen and (min-width: 130ex) and (min-height: 900px) {
    /* 130ex -> wide enough so that title isn't below buttons */

    div#topbar {
        position: fixed;
        z-index: 1;
        top: 0;
        width: 100%;
        height: 63px;
        border-bottom: 1px solid #B0BBC5;
    }

    div#page {
        margin-top: 84px; /* 64+20 to match topbar+H1 */
    }
}

1. メディアクエリの条件: @media screen and (min-width: 130ex) and (min-height: 900px) このルールは、以下の2つの条件が同時に満たされた場合にのみ適用されます。

   • screen: 表示デバイスがスクリーン（モニター、タブレットなど）であること。
   • min-width: 130ex: ビューポートの幅が、現在のフォントの 'x' の高さの130倍以上であること。コメントに「title isn't below buttons」とあるように、これはトップバー内のタイトルやボタンが適切に配置され、折り返さない程度の十分な幅を確保するための閾値と考えられます。ex 単位を使用することで、ユーザーのフォントサイズ設定に柔軟に対応できます。
   • min-height: 900px: ビューポートの高さが900ピクセル以上であること。これは、画面が十分に大きく、固定ヘッダーによる垂直方向のスペースの減少がユーザーエクスペリエンスに悪影響を与えないと判断されるための閾値です。高さが低い画面では、固定ヘッダーがコンテンツ表示領域を過度に狭めてしまう可能性があるため、この条件が設けられています。

2. div#topbar のスタイル: 上記のメディアクエリの条件が満たされた場合、IDが topbar の div 要素に以下のスタイルが適用されます。

   • position: fixed;: トップバーをビューポートの左上隅に固定します。これにより、ユーザーがページをスクロールしてもトップバーは常に画面上部に表示され続けます。
   • z-index: 1;: トップバーの重なり順序を他の要素よりも手前に設定します。これにより、ページコンテンツがスクロールしてトップバーの下に潜り込むことを防ぎ、常にトップバーが最前面に表示されるようにします。
   • top: 0;: トップバーをビューポートの上端に配置します。
   • width: 100%;: トップバーの幅をビューポートの全幅に設定します。
   • height: 63px;: トップバーの高さを63ピクセルに設定します。元の div#topbar の高さが 64px であったため、わずかに調整されています。
   • border-bottom: 1px solid #B0BBC5;: トップバーの下部に1ピクセルの実線ボーダーを追加し、視覚的な区切りを設けます。

3. div#page のスタイル: トップバーが position: fixed になると、通常のドキュメントフローから外れるため、その下のコンテンツ（div#page）がトップバーの下に隠れてしまいます。これを防ぐために、div#page に以下のスタイルが適用されます。

   • margin-top: 84px;: div#page の上部に84ピクセルのマージンを追加します。この 84px は、固定されたトップバーの高さ（約64px）と、その下の H1 要素などのコンテンツとの間の適切な間隔（20px）を考慮して計算されています（64+20 とコメントに記載）。これにより、ページコンテンツがトップバーによって隠されることなく、適切に表示されるようになります。

この変更により、大きな画面でGo言語のドキュメントサイトを閲覧する際のナビゲーションと検索の利便性が大幅に向上しました。

コアとなるコードの変更箇所

--- a/doc/style.css
+++ b/doc/style.css
@@ -132,6 +132,24 @@ div#topbar {
 	height: 64px;
 }
 
+/* always show topbar for large screens */
+@media screen and (min-width: 130ex) and (min-height: 900px) {
+       /* 130ex -> wide enough so that title isn't below buttons */
+
+	div#topbar {
+		position: fixed;
+		z-index: 1;
+		top: 0;
+		width: 100%;
+		height: 63px;
+		border-bottom: 1px solid #B0BBC5;
+	}
+
+	div#page {
+       		margin-top: 84px; /* 64+20 to match topbar+H1 */
+	}
+}
+
 body {
 	text-align: center;
 }

コアとなるコードの解説

追加されたコードブロックは、@media ルールで囲まれています。

• @media screen and (min-width: 130ex) and (min-height: 900px): この行はメディアクエリを定義しています。

  • screen: このスタイルがスクリーンデバイス（コンピュータのモニター、タブレットなど）に適用されることを指定します。
  • min-width: 130ex: ビューポート（ブラウザの表示領域）の幅が、現在のフォントの 'x' の高さの130倍以上である場合にスタイルを適用します。これは、トップバー内の要素（タイトルやボタン）が適切に収まる十分な幅があることを保証するための条件です。
  • min-height: 900px: ビューポートの高さが900ピクセル以上である場合にスタイルを適用します。これは、画面が十分に大きく、固定ヘッダーによってコンテンツ表示領域が過度に狭くならないことを保証するための条件です。

• div#topbar { ... }: 上記のメディアクエリの条件が満たされた場合に、IDが topbar の div 要素に適用されるスタイルです。

  • position: fixed;: このプロパティにより、div#topbar はビューポートに対して固定され、ページをスクロールしても常に画面上部に表示され続けます。
  • z-index: 1;: z-index は要素の重なり順序を決定します。値が大きいほど手前に表示されます。1 を設定することで、トップバーが他のページコンテンツの上に表示されるようにします。
  • top: 0;: position: fixed と組み合わせて、トップバーをビューポートの上端に配置します。
  • width: 100%;: トップバーの幅をビューポートの全幅に設定し、画面いっぱいに広がるようにします。
  • height: 63px;: トップバーの高さを63ピクセルに設定します。
  • border-bottom: 1px solid #B0BBC5;: トップバーの下部に1ピクセルの実線ボーダーを追加します。色は #B0BBC5（薄いグレー系）です。これにより、トップバーとページコンテンツの間に視覚的な区切りができます。

• div#page { ... }: IDが page の div 要素に適用されるスタイルです。

  • margin-top: 84px;: position: fixed が適用された要素は通常のドキュメントフローから外れるため、その下の要素が固定された要素の下に隠れてしまいます。これを防ぐために、div#page の上部に84ピクセルのマージンを追加しています。この 84px は、固定されたトップバーの高さ（約64px）と、その下の H1 要素などのコンテンツとの間の適切な間隔（20px）を考慮して計算された値です。これにより、ページコンテンツがトップバーによって隠されることなく、適切に表示されるようになります。

これらの変更により、大きな画面でGo言語のドキュメントサイトを閲覧する際に、トップバーが常に画面上部に固定され、ナビゲーションや検索の利便性が向上します。

関連リンク

• Go言語のコードレビューシステム (Gerrit) 上の変更リスト: https://golang.org/cl/6493071

参考にした情報源リンク

• MDN Web Docs - @media: https://developer.mozilla.org/ja/docs/Web/CSS/@media
• MDN Web Docs - position: https://developer.mozilla.org/ja/docs/Web/CSS/position
• MDN Web Docs - z-index: https://developer.mozilla.org/ja/docs/Web/CSS/z-index
• MDN Web Docs - ex: https://developer.mozilla.org/ja/docs/Web/CSS/length#ex
• MDN Web Docs - margin: https://developer.mozilla.org/ja/docs/Web/CSS/margin
• MDN Web Docs - border-bottom: https://developer.mozilla.org/ja/docs/Web/CSS/border-bottom