【HTML＆CSS】 CSSの基本／リストを装飾しよう

おはようございます！

8月19日月曜日。雲多少ありの晴れ🌞
最高気温35℃。一週間前の週間天気予報では気温が徐々に下がっていく感じだったんですが、、、(´×ω×`)

次の週間天気予報に期待。（※東京）

この下がり具合に淡い期待を抱きつつ今日も学んでまいります。

今日の教材はこちら、

よしやっていこう。

CHAPTER３　Webのデザインを作る！CSSの基本

CHAPTER３－１４

リストを装飾しよう

◆リストマーカーの種類

　リスト項目の先頭に表示されるマークをリストマーカーという。リストには「箇条書きリスト」と「順序付きリスト」があるが、デフォルトのリストマーカーは以下の通り、「黒丸（disc）」と「数字（decimal）」となる。

＜箇条書きリスト（デフォルト）＞

箇条書きリスト（デフォルト）
箇条書きリスト（デフォルト）
箇条書きリスト（デフォルト）

＜順序付きリスト（デフォルト）＞

順序付きリスト（デフォルト）
順序付きリスト（デフォルト）
順序付きリスト（デフォルト）

これらの表示方法は、list-style-typeプロパティで変更できる。

＜CSS記述例＞

ul {
　list-style-type: circle;
}

ol {
　list-style-type: katakana;
}

＜箇条書きリスト（circle、白丸）＞

箇条書きリスト
箇条書きリスト
箇条書きリスト

＜順序付きリスト（カタカナ）＞

順序付きリスト
順序付きリスト
順序付きリスト

その他、list-style-typeプロパティで指定できる値

＜箇条書きリスト＞

値	説明	例
disc	黒丸（デフォルト）	・
circle	白丸	○
square	黒四角	■
none	リストマーカーを非表示

＜順序付きリスト＞

値	説明	例
decimal	数字（デフォルト）	1. 2. 3. ･･･
decimal-leading-zero	ゼロ付き数字	01. 02. 03. ･･･
lower-roman	小文字のローマ字	i. ii. iii. ･･･
upper-roman	大文字のローマ字	I. II. III. ･･･
cjk-ideographic	漢数字	一、二、三、･･･
hiragana	ひらがな	あ、い、う、･･･
katakana	カタカナ	ア、イ、ウ、･･･
hiragana-iroha	ひらがなのいろは	い、ろ、は、･･･
katakana-iroha	カタカナのイロハ	イ、ロ、ハ、･･･
lower-alpha, lower-latin	小文字のアルファベット（※２つの値の表示に違いなし）	a. b. c. ･･･
upper-alpha, upper-latin	大文字のアルファベット（※２つの値の表示に違いなし）	A. B. C. ･･･
lower-greek	小文字の古典的なギリシャ文字	α. β. γ. ･･･
hebrew	ヘブライ数字 ※右の欄の同じ行にヘブライ数字で1.2.3.って入力しようとしたらなんか順番バグる。。（ので改行して記載）	א. ב. ג. ･･･
armenian	アルメニア数字	Ա. Բ. Գ. ･･･
georgian	グルジア数字	ა. ბ. გ. ･･･

◆リストマーカーの表示位置

　list-style-positionプロパティでリストマーカーをどの位置に表示させるかを指定。

＜指定できる値＞

値	説明
outside	リスト項目のテキストの外側にマーカーを配置（デフォルト）
inside	リスト項目のテキストの内側にマーカーを配置

＜outside＞

箇条書きリスト（外側）
箇条書きリスト（外側）
箇条書きリスト（外側）

　⇒１つ目と２つ目の<li>タグに背景色をつけると、リストマーカーがテキストの外側に表示される。

＜inside＞

箇条書きリスト（内側）
箇条書きリスト（内側）
箇条書きリスト（内側）

　⇒２つ目と３つ目の<li>タグに背景色をつけると、リストマーカーがテキストの内側に表示される。

◆リストマーカーに使う画像

　list-style-imageプロパティでリストマーカーとして表示させる画像を設定する。

＜CSS記述例＞

ul {
　list-style-image: url(saturn.jpg);
}

＜HTML実装例＞

※指定できるのは1種類のみなので、基本的に箇条書きリストのみで指定することになる。

◆リストマーカーに関する装飾をまとめて指定

　list-style-type、list-style-position、list-style-imageの３つのプロパティをlist-styleプロパティでまとめて書くことができる。値は順不同でスペースで区切って記載する。

※list-style-typeに関する値とlist-style-imageに関する値を同時に指定した場合は、list-style-imageプロパティでの設定が優先される。

＜CSS記述例＞

ul {
　list-style: square url(saturn.jpg) outside;
}

　⇒上記の場合、url(saturn.jpg)の設定が優先される。

◆リストマーカーの効果的な使い方

　長文の中で箇条書きリストや順序付きリストを表示させる場合は、文章のじゃまにならないようシンプルにするほうがよい。

　逆に、手順の説明など、リスト自体を目立たせたい場合はリストマーカーをうまく装飾するとよい。

　なお、リストマーカーのスタイルは、ドキュメント全体で一貫性を保つことが重要。これにより、ユーザーが情報をより簡単に理解できる。

＜シンプルな表示＞

– 機能紹介
– 料金プラン
– 導入事例

＜目立たせた表示＞

① 項目1
② 項目2
③ 項目3

１セクション分完遂！！

湿度が高いとHPの減りが早いな。。。

ここでブレイク

Copilot～、湿度と人の集中力の因果関係を教えて～

湿度は人の集中力に大きな影響を与えることが知られています。以下に、湿度と集中力の関係についてのポイントをまとめます。

低湿度の影響
・乾燥: 湿度が低いと、空気が乾燥し、肌や目、喉が乾燥することがあります。これにより、不快感が増し、集中力が低下することがあります。
・健康問題: 乾燥した環境では、ドライアイや肌のかゆみ、喉の痛みなどが発生しやすくなり、これが集中力に悪影響を及ぼすことがあります。

高湿度の影響
・不快感: 湿度が高すぎると、汗が蒸発しにくくなり、体温調節が難しくなります。これにより、不快感が増し、疲れやすくなり、集中力が低下することがあります。
・疲労感: 高湿度の環境では、体が疲れやすくなり、集中力が持続しにくくなることがあります。

最適な湿度
・快適な湿度: 一般的に、快適な湿度は40%から60%とされています。この範囲内であれば、集中力を維持しやすくなります。

湿度だけでなく、温度や空気の質も集中力に影響を与える要因です。快適な作業環境を整えるためには、これらの要素をバランスよく管理することが重要です。