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

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

このコミットは、doc/style.css ファイルに対する変更であり、主に godoc ツールが生成するドキュメントのコード表示部分におけるシンタックスハイライトと選択範囲のスタイル調整、およびアラートメッセージの色の微調整を行っています。

コミット

commit 54eec3db2c631d6d3b16ba0316db0e0e6f3367a3
Author: Robert Griesemer <gri@golang.org>
Date:   Thu Feb 23 17:42:14 2012 -0800

    godoc: fine-tuning .css
    
    R=adg
    CC=golang-dev
    https://golang.org/cl/5699057

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

https://github.com/golang/go/commit/54eec3db2c631d6d3b16ba0316db0e0e6f3367a3

元コミット内容

--- a/doc/style.css
+++ b/doc/style.css
@@ -13,26 +13,15 @@ pre {
 pre .comment {
 	color: #375EAB;
 }
-pre .highlight {
-	background: #FFFF00;
-}
-pre .highlight-comment {
-	background: #FFFF00;
-	color: #375EAB;
-}
-pre .selection {
-	background: #FF9632;
-}
-pre .selection-comment {
-	background: #FF9632;
-	color: #375EAB;
-}
-pre .selection-highlight {
-	background: #FFFF00;
-}
-pre .selection-highlight-comment {
-	background: #FFFF00;
-	color: #375EAB;
+pre .highlight,
+pre .highlight-comment,
+pre .selection-highlight,
+pre .selection-highlight-comment {
+    background: #FFFF00;
+}
+pre .selection,
+pre .selection-comment {
+    background: #FF9632;
 }
 pre .ln {
  	color: #999;
@@ -110,7 +99,7 @@ table.dir td {
 }
 
 .alert {
-	color: #FF0000;
+	color: #AA0000;
 }
 
 #heading {

変更の背景

このコミットは、godoc が生成するHTMLドキュメントの視覚的な一貫性とユーザビリティを向上させるためのCSSの微調整です。特に、コードブロック内のハイライト表示と選択範囲の表示に関する冗長なCSSルールを整理し、より簡潔に記述することを目的としています。また、アラートメッセージの色を純粋な赤から少し落ち着いた赤に変更することで、視覚的なインパクトを調整しています。これは、ユーザーインターフェースの細部への配慮と、コードの保守性の向上（CSSの重複排除）の一環として行われました。

前提知識の解説

godoc

godoc はGo言語の公式ドキュメンテーションツールです。Goのソースコードからコメントや宣言を解析し、HTML形式でドキュメントを生成したり、コマンドラインで表示したりする機能を提供します。Goのパッケージ、関数、型、変数などのドキュメントを自動的に生成するため、Go開発者にとって非常に重要なツールです。godoc が生成するHTMLページには、コードの例や定義が含まれており、これらはシンタックスハイライトされて表示されます。

CSS (Cascading Style Sheets)

CSSは、HTMLやXMLドキュメントの表示（レイアウト、色、フォントなど）を記述するためのスタイルシート言語です。ウェブページの見た目を定義し、コンテンツとデザインを分離することで、ウェブサイトの保守性やアクセシビリティを向上させます。

  • セレクタ: CSSルールが適用されるHTML要素を指定します。例: pre, .highlight, #heading。
  • プロパティ: スタイルを適用する対象の特性（例: background, color）を指定します。
  • 値: プロパティに設定する具体的な値（例: #FFFF00, #AA0000）を指定します。
  • pre タグ: HTMLの <pre> 要素は、整形済みテキスト（preformatted text）を表示するために使用されます。通常、等幅フォントで表示され、空白や改行がそのまま保持されます。コードブロックの表示によく使われます。
  • クラスセレクタ (.class-name): 特定のクラス属性を持つ要素にスタイルを適用します。
  • 色の指定 (Hex Color Codes): #RRGGBB 形式で色を指定します。
    • #FFFF00: 純粋な黄色 (Yellow)
    • #FF9632: オレンジ色 (Orange)
    • #375EAB: 青色 (Blue)
    • #FF0000: 純粋な赤色 (Red)
    • #AA0000: 暗い赤色 (Dark Red)

シンタックスハイライトと選択範囲の表示

プログラミングコードを表示する際、キーワード、コメント、文字列などを異なる色で表示することで、コードの可読性を高める技術をシンタックスハイライトと呼びます。また、ユーザーがテキストを選択した際に、その選択範囲を視覚的に強調表示することも一般的なUI/UXの要素です。

このコミットでは、pre タグ内のコードブロックにおける以下の状態のスタイルを扱っています。

  • .highlight: コードの一部がハイライトされている状態。
  • .highlight-comment: ハイライトされた部分がコメントである状態。
  • .selection: ユーザーが選択したテキストの範囲。
  • .selection-comment: ユーザーが選択したテキストの範囲がコメントである状態。
  • .selection-highlight: ユーザーが選択したテキストの範囲が、同時にハイライトもされている状態。
  • .selection-highlight-comment: ユーザーが選択したテキストの範囲がコメントであり、同時にハイライトもされている状態。

技術的詳細

このコミットの主要な変更点は、CSSのセレクタのグループ化と色の調整です。

  1. セレクタのグループ化による冗長性の排除: 変更前は、pre .highlight, pre .highlight-comment, pre .selection-highlight, pre .selection-highlight-comment のそれぞれに background: #FFFF00; が個別に記述されていました。これは冗長であり、将来的に背景色を変更する際に複数の箇所を修正する必要がありました。 変更後は、これらのセレクタをカンマで区切ってグループ化し、一つのルールブロックにまとめることで、コードの簡潔性と保守性を向上させています。 同様に、pre .selection と pre .selection-comment も background: #FF9632; の設定でグループ化されました。

    この変更は、CSSのベストプラクティスに従っており、DRY (Don't Repeat Yourself) 原則を適用したものです。これにより、スタイルシートのファイルサイズがわずかに減少し、読み込み速度に寄与する可能性がありますが、主な目的はコードの整理と管理の容易さです。

  2. アラートメッセージの色の調整: .alert クラスの color プロパティが #FF0000 (純粋な赤) から #AA0000 (暗い赤) に変更されました。

    • #FF0000 はRGB値で (255, 0, 0) であり、非常に鮮やかで強い印象を与えます。
    • #AA0000 はRGB値で (170, 0, 0) であり、純粋な赤よりも彩度が低く、少し落ち着いた印象を与えます。 この変更は、視覚的なバランスやブランドガイドライン、あるいは単にユーザーエクスペリエンスの観点から、アラートメッセージの緊急性を少し和らげる、または他の要素との調和を図るために行われたと考えられます。純粋な赤は非常に目立つため、場合によっては過度に攻撃的に感じられることがあります。より暗い赤にすることで、重要性は保ちつつも、視覚的な刺激を軽減する効果があります。

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

変更は doc/style.css ファイルのみで行われています。

  • 削除された行:

    • pre .highlight { background: #FFFF00; }
    • pre .highlight-comment { background: #FFFF00; color: #375EAB; }
    • pre .selection { background: #FF9632; }
    • pre .selection-comment { background: #FF9632; color: #375EAB; }
    • pre .selection-highlight { background: #FFFF00; }
    • pre .selection-highlight-comment { background: #FFFF00; color: #375EAB; }
    • .alert { color: #FF0000; }

  • 追加された行:

    • pre .highlight,
    • pre .highlight-comment,
    • pre .selection-highlight,
    • pre .selection-highlight-comment { background: #FFFF00; }
    • pre .selection,
    • pre .selection-comment { background: #FF9632; }
    • .alert { color: #AA0000; }

コアとなるコードの解説

このコミットの核心は、CSSのセレクタのグループ化と色の微調整です。

  1. ハイライト関連のスタイル統合:

    -pre .highlight {
-	background: #FFFF00;
-}
-pre .highlight-comment {
-	background: #FFFF00;
-	color: #375EAB;
-}
// ... (selection-highlight, selection-highlight-comment も同様に削除)
+pre .highlight,
+pre .highlight-comment,
+pre .selection-highlight,
+pre .selection-highlight-comment {
+    background: #FFFF00;
+}

    この変更により、pre 要素内のコードブロックで、通常のハイライト、コメントのハイライト、選択されたハイライト、選択されたコメントのハイライトの全てが、共通の背景色 #FFFF00 (黄色) を持つようになりました。これにより、これらの異なる状態が視覚的に一貫した「ハイライト」として認識されるようになります。color: #375EAB; のようなコメント固有のテキスト色は、pre .comment ルールで既に定義されているため、highlight-comment や selection-highlight-comment からは削除され、背景色のみが共通化されました。

  2. 選択範囲関連のスタイル統合:

    -pre .selection {
-	background: #FF9632;
-}
-pre .selection-comment {
-	background: #FF9632;
-	color: #375EAB;
-}
+pre .selection,
+pre .selection-comment {
+    background: #FF9632;
+}

    同様に、ユーザーがコードを選択した際の背景色も、通常の選択とコメントの選択で共通の #FF9632 (オレンジ色) に統一されました。これにより、選択範囲の視覚的な識別が明確になります。

  3. アラート色の変更:

    -.alert {
-	color: #FF0000;
-}
+.alert {
+	color: #AA0000;
+}

    .alert クラスが適用される要素（通常はエラーメッセージや警告）のテキスト色が、純粋な赤 (#FF0000) から少し暗い赤 (#AA0000) に変更されました。これは、視覚的なトーンを調整し、より洗練された、あるいは目に優しい印象を与えるための調整です。

これらの変更は、機能的な振る舞いを変更するものではなく、主に godoc が生成するドキュメントの視覚的なスタイルとCSSコードの品質を向上させるためのものです。

関連リンク

参考にした情報源リンク