Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

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

このコミットは、以前に導入された、大きな画面でウェブページのトップバーを固定表示するCSSの変更を元に戻すものです。この変更は、アンカーリンク（ページ内リンク）の動作に悪影響を与え、リンク先の要素がトップバーによって隠れてしまう問題を引き起こしたため、一時的に取り消されました。

コミット

commit e7d7ea21d4f0bcb9b90921f4a2d694657cbe4fff
Author: Andrew Gerrand <adg@golang.org>
Date:   Thu Sep 13 11:14:20 2012 +1000

          undo CL 6493071 / 56c7453d488f
    
    This change messes with anchor links. It obscures the item being linked to.
    I don't see a way around it. Undoing for now.
    
          Fixes #4071.
    
          ««« original CL description
          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
    
          Committer: Andrew Gerrand <adg@golang.org>
          »»»
    
    R=golang-dev, r, dsymonds
    CC=golang-dev
    https://golang.org/cl/6488121

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

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

元コミット内容

このコミットが元に戻した元の変更（CL 6493071 / 56c7453d488f）の目的は以下の通りです。

「doc css: トップバーを大きなウィンドウの上部に固定表示する。 理由：大きな画面では、検索を行うためにページの一番上までスクロールする必要がないという利便性が、垂直方向のスペースが少なくなることよりも重要である。 Chrome、Firefox、Safariで様々なウィンドウサイズとテキストサイズでテスト済み。」

変更の背景

元のコミットは、ウェブサイトのドキュメントページにおいて、画面サイズが大きい場合にヘッダー部分（トップバー）を常に画面上部に固定表示するようCSSを変更しました。これは、ユーザーがページをスクロールしても検索バーなどの重要なナビゲーション要素に常にアクセスできるようにすることで、利便性を向上させることを目的としていました。特に、長いドキュメントを読む際に、検索機能を利用するためにページの一番上まで戻る手間を省くことが期待されました。

しかし、この固定表示の変更は、ウェブページのアンカーリンク（#で始まるURLフラグメントを持つページ内リンク）の動作に予期せぬ問題を引き起こしました。アンカーリンクをクリックすると、ブラウザは通常、指定されたIDを持つ要素までスクロールします。しかし、トップバーがposition: fixedで画面上部に固定されている場合、リンク先の要素がトップバーの裏に隠れてしまい、ユーザーから見えなくなるという問題が発生しました。コミットメッセージには「This change messes with anchor links. It obscures the item being linked to. I don't see a way around it. Undoing for now.」（この変更はアンカーリンクを台無しにする。リンク先の項目を隠してしまう。回避策が見当たらない。とりあえず元に戻す。）と明記されており、この問題が解決困難であると判断されたため、一時的に元の状態に戻す決定がなされました。この問題はGoプロジェクトのIssue #4071として報告されていました。

前提知識の解説

このコミットの変更内容を理解するためには、以下のCSSプロパティとHTMLの概念に関する知識が必要です。

  • position: fixed;: CSSのpositionプロパティの一つで、要素をビューポート（ブラウザの表示領域）に対して固定します。要素はスクロールしてもその位置に留まります。このプロパティが適用された要素は、通常のドキュメントフローから取り除かれ、他の要素のレイアウトに影響を与えなくなります。
  • top, left, right, bottom: position: fixed;やposition: absolute;と組み合わせて使用され、要素がビューポート（または親要素）のどの位置に配置されるかを指定します。例えば、top: 0;は要素をビューポートの上端に配置します。
  • z-index: CSSのプロパティで、重なり合う要素のスタック順序（Z軸方向の順序）を決定します。z-indexの値が大きい要素ほど、他の要素の上に表示されます。固定されたトップバーがコンテンツの上に表示されるようにするために使用されます。
  • width: 100%;: 要素の幅を親要素の100%に設定します。この場合、トップバーが画面全体に広がるように設定されます。
  • height: 要素の高さを指定します。
  • border-bottom: 要素の下部に境界線（ボーダー）を追加します。
  • @media screen and (...): CSSのメディアクエリの一つで、特定のメディアタイプ（この場合はscreen、画面表示）と条件（括弧内の条件）に基づいてスタイルを適用します。このコミットでは、min-width: 130ex（最小幅が130文字分）とmin-height: 900px（最小高さが900ピクセル）という条件が指定されており、これは「大きな画面」を意味します。
  • アンカーリンク（Anchor Links）: HTMLの機能で、同じページ内の特定のセクションに直接ジャンプするためのリンクです。通常、<a>タグのhref属性に#とそれに続くターゲット要素のid属性の値を指定することで作成されます（例: <a href="#section-id">Go to Section</a>）。ブラウザは、このリンクがクリックされると、指定されたidを持つ要素まで自動的にスクロールします。
  • margin-top: 要素の上部にマージン（余白）を追加します。固定されたトップバーがある場合、その下に続くコンテンツがトップバーに隠れないように、コンテンツの開始位置をトップバーの高さ分だけ下げるために使用されます。

技術的詳細

このコミットが元に戻した変更は、doc/style.cssファイル内の特定のCSSルールセットでした。特に、@mediaクエリを使用して、特定の画面サイズ（幅が130文字分以上かつ高さが900ピクセル以上）の場合にのみ、div#topbar要素にposition: fixed;を適用していました。

position: fixed;が適用されると、div#topbarはビューポートの左上隅（top: 0;）に固定され、z-index: 1;によって他のコンテンツの上に表示されるようになります。これにより、ユーザーがページをスクロールしてもトップバーは常に画面上部に表示され続けるという効果が得られます。

しかし、この固定表示がアンカーリンクの問題を引き起こしました。アンカーリンクがクリックされると、ブラウザは通常、リンク先の要素がビューポートの最上部に表示されるようにスクロールします。しかし、position: fixed;が適用されたトップバーが既にビューポートの最上部を占めているため、リンク先の要素がトップバーの「裏側」にスクロールされてしまい、ユーザーの視界から隠れてしまうのです。

この問題は、固定ヘッダーを持つウェブサイトでよく発生する既知の課題です。一般的な解決策としては、以下のいずれかが考えられますが、コミットメッセージでは「回避策が見当たらない」とされています。

  1. リンク先の要素にpadding-topと負のmargin-topを適用する: リンク先の要素に、固定ヘッダーの高さ分のpadding-topを設定し、その分を打ち消すために負のmargin-topを設定する方法です。これにより、スクロール位置が調整され、要素がヘッダーの下に適切に表示されます。
  2. JavaScriptでスクロール位置を調整する: アンカーリンクがクリックされた際に、JavaScriptを使用してスクロール位置を計算し、固定ヘッダーの高さを考慮してオフセットを適用する方法です。
  3. CSSのscroll-margin-topプロパティを使用する: 比較的新しいCSSプロパティで、スクロールスナップやアンカーリンクのターゲット位置を調整するために使用されます。固定ヘッダーの高さ分をscroll-margin-topに設定することで、ブラウザが自動的にスクロール位置を調整してくれます。ただし、このコミットが作成された2012年時点では、このプロパティはまだ広くサポートされていませんでした。

コミットメッセージの「I don't see a way around it. Undoing for now.」という記述から、当時のGoプロジェクトのウェブサイトの構造や、利用可能な技術的制約の中で、上記のような解決策を適用することが困難であったか、あるいは迅速な解決が求められたため、一時的に機能を元に戻すことが最善の選択と判断されたことが伺えます。

また、元のコミットでは、div#page要素にmargin-top: 84px;を設定していました。これは、トップバーの高さ（64px）とH1要素の余白（20px）を考慮して、コンテンツがトップバーの下から始まるようにするための調整でした。この調整も、トップバーの固定表示が元に戻されたことで不要となり、削除されています。

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

このコミットでは、doc/style.cssファイルから以下の18行のCSSコードが削除されました。

--- a/doc/style.css
+++ b/doc/style.css
@@ -132,24 +132,6 @@ 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 */
 -
 -\tdiv#topbar {\n-\t\tposition: fixed;\n-\t\tz-index: 1;\n-\t\ttop: 0;\n-\t\twidth: 100%;\n-\t\theight: 63px;\n-\t\tborder-bottom: 1px solid #B0BBC5;\n-\t}\n-\n-\tdiv#page {\n-       \t\tmargin-top: 84px; /* 64+20 to match topbar+H1 */\n-\t}\n-}
 -
  body {
  	text-align: center;
  }

コアとなるコードの解説

削除されたコードブロックは、@mediaクエリ内に記述されており、特定の条件が満たされた場合にのみ適用されるスタイルを定義していました。

  • @media screen and (min-width: 130ex) and (min-height: 900px): このメディアクエリは、画面の幅が130文字分（ex単位はフォントのx-heightに基づく相対単位）以上、かつ画面の高さが900ピクセル以上の場合にのみ、内側のCSSルールを適用することを意味します。これは、デスクトップPCなどの比較的大きなディスプレイを持つデバイスをターゲットにしていました。

  • div#topbar { ... }: このセレクタは、IDがtopbarであるdiv要素にスタイルを適用します。削除されたスタイルは以下の通りです。

    • position: fixed;: トップバーをビューポートに固定します。
    • z-index: 1;: トップバーが他のコンテンツの上に表示されるように、スタック順序を設定します。
    • top: 0;: トップバーをビューポートの上端に配置します。
    • width: 100%;: トップバーの幅を画面全体に広げます。
    • height: 63px;: トップバーの高さを63ピクセルに設定します。
    • border-bottom: 1px solid #B0BBC5;: トップバーの下部に1ピクセルの実線ボーダーを追加します。

  • div#page { margin-top: 84px; }: このセレクタは、IDがpageであるdiv要素にスタイルを適用します。これは、ウェブページの主要コンテンツを囲む要素と考えられます。

    • margin-top: 84px;: div#pageの上部に84ピクセルのマージンを設定します。これは、固定されたトップバー（高さ64px）と、その下のH1要素のデフォルトマージン（約20px）を考慮して、コンテンツがトップバーに隠れないようにするためのオフセットでした。

これらのCSSルールが削除されたことにより、大きな画面でもトップバーは固定されなくなり、通常のドキュメントフローに従ってスクロールするようになります。また、div#pageに適用されていたmargin-topのオフセットも不要となるため、削除されました。これにより、アンカーリンクの問題は解消されますが、トップバーが常に表示されるという利便性は失われます。

関連リンク

参考にした情報源リンク