CSS 手習い

CSS とは

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

トピックス

これから充実させたい。

スタイルシートの記述方法

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

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

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

特定の要素のスタイル記述

<div style="text-align: right;">...</div>

これは、その場限りの右揃えをしている。

HTML のヘッダ部でのスタイル定義

<head>
<style>
(スタイルを記述するコード)
</style>
</head>

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

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>

表示例

富士
鷹
なすび

例 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. 静岡県
2. 山梨県
鷹
なすび
1. ナス属
  1. トマト
  2. ナス
  3. ジャガイモ
2. トウガラシ属
3. ペチュニア属

参考:

https://developer.mozilla.org/ja/docs/Web/CSS/counter
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
https://webnetamemo.com/coding/css/201507161181
https://www.koikikukan.com/archives/2014/09/12-015555.php
http://aizack.net/ol-nest/

隣接する段落間の余白

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

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

参考

margin - CSS:カスケーディングスタイルシート(developer.mozilla.org)

表の制御

表の罫線などの制御で、すべての表に適用させたいときは次のとおりでいい。

		table {
		border-collapse: collapse;
		border: 2px solid rgb(200, 200, 200);
		letter-spacing: 1px;
		font-size: 0.8rem;
		}
		
		th td,
		th {
		border: 1px solid rgb(190, 190, 190);
		padding: 10px 20px;
		}
		
		th {
		background-color: rgb(235, 235, 235);
		}
		
		th td {
		text-align: center;
		}
		
		tr:nth-child(even) td {
		background-color: rgb(250, 250, 250);
		}
		
		tr:nth-child(odd) td {
		background-color: rgb(245, 245, 245);
		}

特定のクラスにのみ制御を適用させたい場合は、.クラス名 で修飾する。

		.normal {
		}
		
		.normal th td,
		.normal th {
		border: 1px solid rgb(190, 190, 190);
		padding: 10px 20px;
		}
		
		.normal th {
		background-color: rgb(235, 235, 235);
		}
		
		.normal th td {
		text-align: center;
		}
		
		.normal tr:nth-child(even) td {
		background-color: rgb(250, 250, 250);
		}
		
		.normal tr:nth-child(odd) td {
		background-color: rgb(245, 245, 245);
		}

デフォルトの表は次のとおりである。

あ＼い	い	い
1	a	b
い	c	d
2	e	f
う	g	h

クラスとして normal を適用させたときは次のようになる。

あ＼い	い	い
1	a	b
い	c	d
2	e	f
う	g	h

表の一部に枠線を表示したり、逆に表の一部から枠線を消去したりしたいときがある。自分のページの統計モデル入門や、入門実験計画法などで使っている。

斜線の引き方

CSS だけでも斜線を引くことができる。

hr 要素を使う

ここでは、hr 要素で水平線を引き、その水平線を CSS で定められた rotate を用いて回転させることで斜線を実現している。

::after 擬似要素を使う

::after 擬似要素を使う方法もある。

linear-gradient を使う方法

linear-gradient を使う方法がある。

A

あい	うえ	かき	くけ