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

このコミットは、Go言語の公式ドキュメントサイトにおける root.html のスタイル修正に関するものです。具体的には、ダウンロードボタンの表示に関するHTML構造とCSS定義が調整されています。

コミット

commit 17d12d6cb648d57b3a2094004e6eacc5473bc8f1
Author: Andrew Gerrand <adg@golang.org>
Date:   Fri Mar 1 11:22:13 2013 +1100

    doc: fix root.html styles
    
    R=r
    CC=golang-dev
    https://golang.org/cl/7442045

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

https://github.com/golang/go/commit/17d12d6cb648d57b3a2094004e6eacc5473bc8f1

元コミット内容

doc: fix root.html styles

このコミットは、Go言語のドキュメントサイトの root.html ファイルにおけるスタイルに関する問題を修正することを目的としています。

この変更の背景には、HTMLのセマンティクスとCSSによるレイアウト制御のベストプラクティスへの準拠があります。従来のHTML4/XHTMLでは、インライン要素（例: <a> タグ）の中にブロックレベル要素（例: <div> タグ）を配置することは文法的に不正とされていました。HTML5ではこの制約が緩和され、<a> タグの中にフローコンテンツ（ブロックレベル要素を含む）を配置できるようになりましたが、それでもセマンティクスを考慮すると、より適切な要素を使用することが推奨されます。

このコミットでは、<a> タグ内に配置されていた <div> 要素を <span> 要素に変更しています。<span> はデフォルトでインライン要素であり、<a> タグ内に配置するのに適しています。しかし、元の <div> が持っていたブロックレベルの表示特性を維持するため、CSSで display: block; を明示的に <span> 要素に適用しています。これにより、HTMLのセマンティクスを改善しつつ、視覚的なレイアウトを維持または修正することが目的と考えられます。

前提知識の解説

HTML要素の分類: ブロックレベル要素とインライン要素

ブロックレベル要素: 親要素の利用可能な幅全体を占め、前後に改行を伴う要素です。例: <div>, <p>, <h1> など。これらは通常、文書の構造を定義するために使用されます。
インライン要素: テキストや他のインライン要素と同じ行に表示され、必要な幅だけを占める要素です。前後に改行を伴いません。例: <span>, <a>, <strong> など。これらは通常、テキストの一部をマークアップするために使用されます。

CSS `display` プロパティ

display プロパティは、要素の表示タイプ（ブロックレベル、インライン、インラインブロックなど）を定義します。

display: block;: 要素をブロックレベル要素として表示します。
display: inline;: 要素をインライン要素として表示します。
display: inline-block;: 要素をインライン要素として表示しますが、ブロックレベル要素のように幅や高さ、マージン、パディングを設定できます。

HTML4/XHTMLとHTML5における `<a>` タグのコンテンツモデル

HTML4/XHTML: <a> タグはインライン要素であり、その中にブロックレベル要素を直接含めることはできませんでした。
HTML5: <a> タグのコンテンツモデルが「フローコンテンツ」に拡張されました。これにより、<a> タグの中に <div> や <p> といったブロックレベル要素を配置することが文法的に可能になりました。しかし、これはあくまで文法的な許容であり、セマンティクスやアクセシビリティの観点からは、依然として適切な要素の選択が重要です。

このコミットは、HTML5の柔軟性を利用しつつ、よりセマンティックなマークアップを目指しているか、あるいは古いブラウザやHTML4の解釈に起因する表示問題を回避するための修正である可能性があります。

技術的詳細

このコミットの技術的な詳細は、HTMLの構造とCSSのスタイリングの連携にあります。

HTML構造の変更:
- 変更前:
```
<a href="/doc/install" id="start">
<div class="big">Download Go</div>
<div class="desc">
Binary distributions available for<br>
Linux, Mac OS X, Windows, and more.
</div>
</a>
```
- 変更後:
```
<a href="/doc/install" id="start">
<span class="big">Download Go</span>
<span class="desc">
Binary distributions available for<br>
Linux, Mac OS X, Windows, and more.
</span>
</a>
```
<a> タグの子要素として、<div> 要素が <span> 要素に置き換えられています。これは、<a> タグがリンク全体を囲む場合、その内部にブロックレベル要素を直接配置することのセマンティックな問題（特にHTML4以前の仕様に厳密に従う場合）を解消するためと考えられます。<span> はインライン要素であるため、<a> の内部に配置するのに適しています。
CSSスタイルの追加:
- doc/style.css に以下のスタイルが追加されました。
```
a#start .big {
    display: block;
    font-weight: bold;
    font-size: 20px;
}
a#start .desc {
    display: block;
    font-size: 14px;
    font-weight: normal;
    margin-top: 5px;
}
```
root.html で <div> から <span> に変更された .big と .desc クラスを持つ要素に対して、display: block; が明示的に適用されています。これにより、<span> 要素はデフォルトのインライン表示ではなく、ブロックレベル要素のように振る舞うようになります。つまり、幅いっぱいに広がり、前後に改行が入るようになります。これは、元の <div> が持っていた視覚的なレイアウト特性を維持するために不可欠な変更です。

この組み合わせにより、HTMLのセマンティクスを改善しつつ、視覚的な表示は変更前と同じ、または意図した通りに維持されるようになっています。

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

`doc/root.html`

--- a/doc/root.html
+++ b/doc/root.html
@@ -53,11 +53,11 @@ simple, reliable, and efficient software.
 <div id="gopher"></div>
 
 <a href="/doc/install" id="start">
-<div class="big">Download Go</div>
-<div class="desc">
+<span class="big">Download Go</span>
+<span class="desc">
 Binary distributions available for<br>
 Linux, Mac OS X, Windows, and more.
-</div>
+</span>
 </a>
 
 </div>

`doc/style.css`

--- a/doc/style.css
+++ b/doc/style.css
@@ -267,10 +267,12 @@ a#start {
 	border-radius: 5px;
 }
 a#start .big {\n+\tdisplay: block;\n \tfont-weight: bold;\n \tfont-size: 20px;\n }
 a#start .desc {\n+\tdisplay: block;\n \tfont-size: 14px;\n \tfont-weight: normal;\n \tmargin-top: 5px;\n```

## コアとなるコードの解説

`doc/root.html` の変更では、`id="start"` を持つ `<a>` 要素の内部にある、`class="big"` と `class="desc"` を持つ `<div>` 要素がそれぞれ `<span>` 要素に置き換えられています。

`doc/style.css` の変更では、この新しい `<span>` 要素がブロックレベル要素として振る舞うように、`a#start .big` と `a#start .desc` のCSSルールに `display: block;` が追加されています。これにより、`Download Go` というテキストと、その下の説明文がそれぞれ独立したブロックとして表示され、改行されるようになります。

この変更は、HTMLの構造をよりセマンティックに保ちつつ、CSSによって視覚的なレイアウトを完全に制御するという、現代のWeb開発における一般的なアプローチを反映しています。

## 関連リンク

*   Go言語公式サイト: [https://golang.org/](https://golang.org/)
*   Go言語ドキュメント: [https://golang.org/doc/](https://golang.org/doc/)

## 参考にした情報源リンク

*   HTML `<a>` タグのコンテンツモデル (MDN Web Docs): [https://developer.mozilla.org/ja/docs/Web/HTML/Element/a](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)
*   HTML `<div>` 要素 (MDN Web Docs): [https://developer.mozilla.org/ja/docs/Web/HTML/Element/div](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div)
*   HTML `<span>` 要素 (MDN Web Docs): [https://developer.mozilla.org/ja/docs/Web/HTML/Element/span](https://developer.mozilla.org/ja/docs/Web/HTML/Element/span)
*   CSS `display` プロパティ (MDN Web Docs): [https://developer.mozilla.org/ja/docs/Web/CSS/display](https://developer.mozilla.org/ja/docs/Web/CSS/display)
*   HTML5における`<a>`要素の変更点: [https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element) (WHATWG HTML Living Standard)

Keyboard shortcuts

comemo