CSS (Cascading Style Sheets)¶

一般的な HTML 文書と同様に Sphinx でも CSS を使用して文書内の見出しなどを装飾できます。

【トピックス】
・ 定義
・ 実行結果
・ その他の表現

定義¶

準備¶

CSS を使用するときの準備です。

_static フォルダー内に CSS を定義したファイル（ CSS ファイル）を配置する
conf.py ファイル内で CSS ファイルのパスを指定する

ファイルの配置¶

_static フォルダーは CSS などの定義ファイルの置き場所です。他の定義ファイルと分けるため今回は _static フォルダー内に css フォルダーを作成し、その中に CSS を定義した custom.css ファイルを置きます。

custom.css の内容です。

h1 {
  padding: 0.2em;
  border-top: solid 2px;
  border-bottom: solid 2px;
}

conf.py ファイル¶

conf.py ファイル内に html_css_files を使用して CSS ファイルのパスを指定します。パスは _static フォルダーを起点とした相対パスで指定します。

実行結果¶

rst ファイル

##################################################
部の見出し
##################################################
部の紹介文。

**************************************************
章の見出し
**************************************************
章の紹介文。

セクションの見出し
==================================================
セクションの紹介文。

サブセクションの見出し
--------------------------------------------------
サブセクションの紹介文。

サブサブセクションの見出し
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
サブサブセクションの紹介文。

パラグラフの見出し
""""""""""""""""""""""""""""""""""""""""""""""""""
パラグラフの紹介文。

CSS ファイル

h1 {
  padding: 0.2em;
  border-top: solid 2px;
  border-bottom: solid 2px;
}

CSS ファイルの指定なし
CSS ファイルの指定あり

CSS ファイルで h1 タグを変更しており、その内容が反映されます。

その他の表現¶

テーブルのセル内の折り返し¶

rst ファイル

##################################################
サンプル
##################################################

.. list-table::
   :header-rows: 1

   * - 項目
     - 値
   * - なまえ
     - じゅげむ、寿限無じゅげむ、五劫ごこうの擦すり切きれ、海砂利かいじゃり水魚すいぎょの、水行末すいぎょうまつ・雲来末うんらいまつ・風来末ふうらいまつ、喰う寝る処ところに住む処ところ、藪やぶら柑子こうじの藪柑子ぶらこうじ、パイポ・パイポ・パイポのシューリンガン、シューリンガンのグーリンダイ、グーリンダイのポンポコピーのポンポコナの、長久命ちょうきゅうめいの長助

CSS ファイル

.wy-table-responsive table td, .wy-table-responsive table th {
    white-space: normal;
}

CSS ファイルの設定なし

セル内の値が長いときはスクロールバーを表示します。
CSS ファイルの設定あり

セル内の値が長いときは折り返してすべて表示します。