cssを用いたコーディング例・・・舞子の浜／HTMLガイド

見出し関係　　　　　title、midasi、midasi-slim、midasi-line
メモ・注釈・脚注　　note、note-white、note-gray、note-green
表示の形を整える　　col2、liststyle

当ホムページ「舞子の浜」は、開設以来 html4を主体にしてコーディングしてきましたが、インターネットを取り巻く環境の変化に伴い、2020年、html5に切り替えました。
このページは、html4.1から html5への切り替えに際し、base.cssファイルを作成した際のメモです。
この項の記述については、当ページ内の 箇条書きの飾りを変更する をご覧下さい

見出し用（中央揃え色は maroonのみ）・・・midasi、midasi-slim、midasi-line、title

他の色に変えるときは styleで color:《色名または色コード》、border-color:《色名または色コード》を指定する

base.css　.midasi

.midasiの色は"maroon"のみ　色を変えるときは、styleで色を指定

上の枠内は・・・
　文字色（color）と線の色（border-color）は crimson、
　文字の太さ（font-weight）は normal、
　背景色（background-color）は papayawhip を指定しています。

　htmlのタグの中で style="・・・" と細かな指定をせずに、あらかじめ cssファイルの中で指定をするほうが、「文（書きたいこと）は html で、形を整えるのは css で」という原則に沿うので望ましいという意見があります。
　私は、めったに使わないであろう定義をしておく必要はないと考え、見出しの色は maroonのみを定義しておき、色を変える場合は styleで指定することにしています。

base.css　.midasi-slim

base.css　.midasi-line

脚注用に字下げを大きく（16em）取り、文字の大きさを80%に縮小した
noteの範囲が分かるように点線で囲っている

　note-white／gray／green はmargin-left:4em;margin-right:1em によって左右に隙間を空け、枠内に薄い色を付ける。

　文字を囲むときに使用
　box-green は文字を細線で囲む。文字線の間に隙間を作らない。
　siege-green は太い文字の前後を少し空けて、太い線で囲む。

base.css　画面分割　.calc

　画面を2分割して表示する　「舞子の浜」の表紙で、トピックス（最近の 20タイトル）を表示するのに使用しています。
　Windowsの幅（表示領域）を変えても、2段組となるように設定しました。

base.css　箇条書きの飾りを変更する　.liststyle-orange

箇条書きは、<ol>（番号付き）、<ul>（番号なし）を使用しますが、少し目先を変えて先頭にのマークを付けてみました。
注釈に使用することを想定して、 class="note"で左端を少し大きめに空け（16em）、文字を小さくしました。

↓　　　↓　　　↓

箇条書きは、<ol>（番号付き）、<ul>（番号なし）を使用します。少し目先を変えて、<ol>（番号付き）で、数字の代わりにのマークを付けてみました。
注釈に使用することを想定して、 class="note"で左端を少し大きめに空け（16em）、文字を小さく（0.8em）しました。