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

このコミットは、Go言語の公式ウェブサイトのスタイルシート（doc/style.css）から、画面上部に固定表示されるトップバー（floating topbar）に関するCSS定義を削除するものです。これにより、特定の画面サイズで発生していたトップバーによるコンテンツの隠蔽や表示の問題が解消されました。

コミット

commit c128474a7ded7d988da9c229e02ff0d639faba5f
Author: Andrew Gerrand <adg@golang.org>
Date:   Fri Nov 2 03:30:49 2012 +1100

    website: remove floating topbar
    
    This caused more problems than it was worth.
    
    Fixes #4301.
    Fixes #4317.
    
    R=golang-dev, minux.ma, rsc
    CC=golang-dev
    https://golang.org/cl/6818076

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

https://github.com/golang/go/commit/c128474a7ded7d988da9c229e02ff0d639faba5f

このコミットは、Go言語の公式ウェブサイトから「floating topbar」（浮動するトップバー）を削除するものです。コミットメッセージには「This caused more problems than it was worth.」（これはその価値以上に問題を引き起こした）とあり、この機能が意図しない表示上の問題を引き起こしていたことが示唆されています。具体的には、GitHub Issue #4301と#4317を修正すると記載されています。

変更の背景

この変更の主な背景は、Go言語の公式ウェブサイトに実装されていた固定表示のトップバーが、ユーザーエクスペリエンスを損なう問題を引き起こしていたためです。特に、Issue #4301「website: floating topbar obscures content」に記載されているように、この固定トップバーがページ内のコンテンツ、特にアンカーリンクでジャンプした際や、コンテンツが短いページで、重要な情報や見出しを隠してしまうという問題がありました。

ウェブサイトのナビゲーション要素を固定表示にすることは、スクロールしても常にアクセス可能であるという利点がありますが、その実装が不適切であると、コンテンツの可読性を著しく低下させる可能性があります。このコミットは、その利点よりも問題点の方が大きかったと判断され、固定トップバーの機能を削除するに至った経緯を示しています。

Issue #4317については、公開されている情報からはGoウェブサイトのCSSとは直接関連しないOpenTelemetryのポートに関する問題が多く見られます。コミットメッセージに記載されている#4317が、Goウェブサイトの表示問題と関連する別の文脈での問題であるか、あるいは記載ミスである可能性も考えられます。しかし、#4301がこの変更の直接的な動機であることは明確です。

前提知識の解説

CSSの`position: fixed`

position: fixedはCSSのプロパティの一つで、要素をビューポート（ブラウザの表示領域）に対して固定配置するために使用されます。このプロパティが適用された要素は、ページのスクロールに関わらず常に同じ位置に表示され続けます。

特徴:
- 要素は通常のドキュメントフローから取り除かれます。
- top, bottom, left, rightプロパティを使用して、ビューポートの端からのオフセットを指定します。
- z-indexプロパティを使用して、他の要素との重なり順序を制御できます。
利点:
- ナビゲーションバーやフッターなど、常にユーザーに表示させたい要素に便利です。
- 「トップに戻る」ボタンなど、特定の機能へのクイックアクセスを提供できます。
問題点:
- 固定された要素がコンテンツの一部を隠してしまうことがあります。特に、ページ内リンク（アンカーリンク）で特定のセクションにジャンプした場合、そのセクションの冒頭が固定要素の下に隠れてしまうことがあります。
- 異なる画面サイズや解像度での表示を考慮しないと、レイアウトが崩れたり、ユーザーエクスペリエンスが悪化したりする可能性があります。

CSSの`@media`ルール（メディアクエリ）

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

構文: @media media_type and (media_feature) { /* CSS rules */ }
例: @media screen and (min-width: 130ex) は、「画面表示で、ビューポートの幅が130文字分（ex単位）以上の場合に適用する」という意味になります。
目的: このコミットで削除されたコードでは、特定の大きな画面サイズでのみトップバーを固定表示にするために使用されていました。

`ex`単位

exはCSSの相対的な長さの単位の一つです。これは、現在のフォントの小文字の「x」の高さ（x-height）に基づいて計算されます。主にテキスト関連のレイアウトで、フォントサイズに依存した相対的なサイズ指定を行う際に使用されます。このコミットでは、min-width: 130exという形で、画面幅の閾値として使用されていました。これは、特定のフォントサイズにおけるテキストの幅を考慮したレイアウト調整を意図していたと考えられます。

技術的詳細

このコミットは、doc/style.cssファイルから、特定のメディアクエリブロックを完全に削除することで、Goウェブサイトの固定トップバーの機能を無効にしています。

削除されたCSSブロックは以下の通りです。

/* always show topbar for large screens */
@media screen and (min-width: 130ex) and (min-height: 300px) {
       /* 130ex -> wide enough so that title isn't below buttons */

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

	div#page.wide {
		position: fixed;
		top: 64px; /* to match topbar */
		bottom: 0px;
		overflow: auto;
		margin-left: auto;
		margin-right: auto;
	}
}

このコードは、以下の条件が満たされた場合に適用されるように設計されていました。

@media screen: 画面表示デバイスに適用。
(min-width: 130ex): ビューポートの幅が130 ex 単位以上の場合。これは、タイトルがボタンの下に隠れないようにするための十分な幅を確保する意図があったようです。
(min-height: 300px): ビューポートの高さが300ピクセル以上の場合。

これらの条件が満たされると、以下のスタイルが適用されていました。

div#topbar.wide:
- position: fixed;: トップバーをビューポートに固定します。
- z-index: 1;: 他の要素の上に表示されるように重ね順を設定します。
- top: 0;: ビューポートの上端に配置します。
- width: 100%;: ビューポートの全幅に広げます。
- height: 63px;: 高さを63ピクセルに設定します。
- border-bottom: 1px solid #B0BBC5;: 下部に境界線を追加します。
div#page.wide:
- position: fixed;: ページコンテンツ自体も固定配置に設定されています。これは、トップバーが固定された際に、コンテンツがトップバーの下に隠れないように、コンテンツの開始位置を調整するためによく用いられる手法です。
- top: 64px;: トップバーの高さ（63px）に1pxの余裕を持たせた位置からコンテンツを開始します。これにより、トップバーがコンテンツを覆い隠すのを防ぎます。
- bottom: 0px;: ビューポートの下端までコンテンツ領域を広げます。
- overflow: auto;: コンテンツが領域を超えた場合にスクロールバーを表示します。
- margin-left: auto; margin-right: auto;: コンテンツを中央揃えにします。

このコミットによってこのCSSブロックが削除されたため、Goウェブサイトはもはや特定の画面サイズでトップバーを固定表示せず、通常のドキュメントフローに従って表示されるようになりました。これにより、固定トップバーが引き起こしていたコンテンツの隠蔽問題が根本的に解決されました。

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

変更はdoc/style.cssファイルのみです。

--- a/doc/style.css
+++ b/doc/style.css
@@ -519,27 +519,3 @@ div#playground .code {
 div#playground .output {
  	height: 100px;
 }
-
-/* always show topbar for large screens */
-@media screen and (min-width: 130ex) and (min-height: 300px) {
-       /* 130ex -> wide enough so that title isn\'t below buttons */
-
-	div#topbar.wide {
-		position: fixed;
-		z-index: 1;
-		top: 0;
-		width: 100%;
-		height: 63px;
-		border-bottom: 1px solid #B0BBC5;
-	}
-
-	div#page.wide {
-		position: fixed;
-		top: 64px; /* to match topbar */
-		bottom: 0px;
-		overflow: auto;
-		margin-left: auto;
-		margin-right: auto;
-	}
-}

コアとなるコードの解説

上記の差分が示すように、doc/style.cssの519行目から27行分のコードが完全に削除されています。削除されたのは、@media screen and (min-width: 130ex) and (min-height: 300px)というメディアクエリで囲まれたCSSルールブロックです。

このブロックは、特定の条件（画面幅が130 ex 以上かつ画面高さが300ピクセル以上）を満たす場合にのみ、div#topbar.wide要素を固定表示にし、それに合わせてdiv#page.wide要素の配置を調整する役割を担っていました。

div#topbar.wideに適用されていたposition: fixed;は、トップバーをブラウザウィンドウの最上部に固定し、スクロールしても動かないようにしていました。
div#page.wideに適用されていたposition: fixed;とtop: 64px;は、固定されたトップバーのすぐ下からページコンテンツが始まるように調整し、トップバーがコンテンツを隠さないようにするためのものでした。

このコミットにより、これらのCSSルールが削除されたため、Goウェブサイトのトップバーはもはや固定表示されなくなりました。結果として、トップバーがコンテンツを隠すという問題は発生しなくなり、ウェブサイトの表示がより予測可能で安定したものになりました。これは、ユーザーエクスペリエンスの改善を目的とした、機能の削除による問題解決の典型的な例です。

参考にした情報源リンク

MDN Web Docs - position: https://developer.mozilla.org/ja/docs/Web/CSS/position
MDN Web Docs - @media: https://developer.mozilla.org/ja/docs/Web/CSS/@media
MDN Web Docs - ex: https://developer.mozilla.org/ja/docs/Web/CSS/length#ex
GitHub Issue #4317 (OpenTelemetry context): 検索結果から、このIssue番号がGoウェブサイトのCSSとは直接関連しないOpenTelemetryのポートに関する問題として多く言及されていることを確認しました。

comemo