CSS

作成日：2017-02-04
最終更新日：

CSS とは

CSS とは Cascading Style Sheet の略であり、HTML の表示について定めた仕様である。

スタイルシートの記述方法は次の３通りある。

  1. 特定の要素のスタイル記述
  2. HTML のヘッダ部でのスタイル定義
  3. CSS のみを記述したスタイル定義外部ファイルへの参照

これらが複数指定された場合、1が最も強く、2がその次で、3が一番弱い。 一般には3が推奨されている。

１行に中央揃えと右揃えを混在させる

1 行に中央揃えと右揃えを混在させる方法を試したがうまくいかない。

複数種類の下線

複数種類の下線を引くにはどうすればよいか。(作成中)

傍点

傍点を打つには、CSS で次のように記述する：
strong { text-emphasis: (open|filled) (circle|double-circle|dot|triangle|sesame) (|color); }

均等割り付けと幅いっぱいの割付

1 行だけからなるセルの幅いっぱいに文字を割りつけるときには、text-align justify; とするのではなく、 text-align-last: justify; とすればよい。(2021-12-22)
参考：https://nabetaro.hatenablog.com/entry/2015/12/23/220942

ol 要素の変奏

CSS を使って、ol 要素の表示をいろいろ変えることができる。

例 1 番号にカッコをつける

CSS

ol.paren li{
  list-style-type: none;
  counter-increment: cnt;
}
ol.paren li:before{
  content: "(" counter(cnt) ") ";
}

HTML

<ol class="paren">
	<li>富士</li>
	<li>鷹</li>
	<li>なすび</li>
</ol>

表示例

  1. 富士
  2. 鷹
  3. なすび

例 2 親の番号を子に受け継がせる

ol 要素が入れ子になっているときに、親の ol 要素によって与えられた番号を子の ol 要素に受け継がせることができる。

ol.hered {
    list-style: none;
    counter-reset: cnt;
}
ol.hered li ol{
    list-style: none;
	counter-reset: cnt
}
ol.hered li:before {
    content : counters(cnt, '-') '. ';
    counter-increment : cnt;
}

HTML

<ol class="hered">
  <li>富士<ol><li>静岡県</li><li>山梨県</li></ol></li>
  <li>鷹</li>
  <li>なすび
    <ol>
      <li>ナス属<ol><li>トマト</li><li>ナス</li><li>ジャガイモ</li></ol></li>
      <li>トウガラシ属</li>
      <li>ペチュニア属</li>
    </ol>
  </li>
</ol>

表示例

  1. 富士
    1. 静岡県
    2. 山梨県
  2. 鷹
  3. なすび
    1. ナス属
      1. トマト
      2. ナス
      3. ジャガイモ
    2. トウガラシ属
    3. ペチュニア属

参考:

隣接する段落間の余白

上下に隣接する段落と段落のあいだの余白を調節する。 

CSS 
div.sample p {
  margin: 0.0em 0px;
  text-indent: 1em;
}
HTML
<div class="sample"<
	<p>段落1</p<
	<p>段落2</p<
</div<

参考