【HTML＆CSS】CSSの基本／CSSグリッドでタイル型に並べよう

おはようございます！

8月22日木曜日。曇り。（天気予報は曇り一時雨）
最高気温31℃（東京）。気温は高くないけど湿度が高いので不快指数100です。
(|||´Д`)=3
　

・不快指数🤢

Copilot！不快指数ってどうやって求めるの？

不快指数は、気温と湿度を基にして計算されます。具体的な計算式は以下の通りです。

　不快指数＝0.81×気温+0.01×湿度x(0.99×温度－14.3)+46.3

例えば、気温が30℃で湿度が60%の場合、不快指数は次のように計算されます。

　不快指数=0.81×30+0.01×60×(0.99×30−14.3)+46.3

　　　　　＝79.84

このようにして、不快指数を求めることができます。

不快指数の値とその感じ方について教えて？

・・・

･･･Copilotは答えてくれたんですが、リンク先と内容が微妙に違っていたのでリンク先の内容を記載すると、

不快指数	体感
～55	寒くてたまらない
50〜55	寒い
55〜60	肌寒い
60〜65	何も感じない
65〜70	快適
70〜75	不快感を持つ人が出始める
75〜80	半数以上が不快に感じる
80〜85	全員が不快に感じる
85〜	暑くてたまらない

＜引用元：不快指数 – Wikipedia＞

60～65の「何も感じない」っていうのはどういう感覚なんだろ。。

まあいいや

Copilot！今の東京の不快指数を教えて？

現在の東京の気温は29℃で、湿度は約64%です。これを基に不快指数を計算すると、以下のようになります：

　不快指数=0.81×29+0.01×64×(0.99×29−14.3)+46.3≈76.7

したがって、現在の東京の不快指数は約76.7です。

なるほど、75～80の「半数以上が不快に感じる」か。

うん、不快。

すみません、不快指数100ではありませんでした。
でも、不快なのです。。。😓

雨が降ってきた。。。☔

天候のせいか、なんだか気乗りしませんが、、

気合いで、なんとか気合いで学びをスタートさせていきます！

学んでいこー！！

今日の教材は例の如くこちら、

よしやっていこう！

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

CHAPTER３－１７

CSSグリッドでタイル型に並べよう

◆CSSグリッドでタイル型にしよう

CSSグリッドの基本的な書き方

　・flexboxと同様、親要素と子要素が必要

　・グリッドコンテナーで全体を囲む（親要素）

　・親要素の中にグリッドアイテムを配置（子要素）

　・グリッドアイテムの間の空白スペースをグリッドキャップという

CSSグリッドの書き方

　CSSには、グリッドコンテナーである「.container」に「display: grid;」を記述。

＜CSS記述例＞

.container {
　display: grid;
}

.item {
　background: blue;
　color: yellow;
　padding: 10px;
}

＜HTML記述例＞

実装すると

　⇒この時点では、「君たちはグリッドコンテナーの中のグリッドアイテムだよ～！」と言い放っただけなので、子要素は縦に並んでいるだけ。

グリッドアイテム（子要素）の横幅

　grid-template-columnsプロパティで各グリッドアイテムの幅を指定。

＜１行に３つずつ、各横幅を200pxにする＞

.container {
　display: grid;
　grid-template-columns: 200px␣200px␣200px;　←半角スペースで区切る
}

.item {
　background: blue;
　color: yellow;
　padding: 10px;
}

実装すると

　⇒要素同士区切られてはいないが、１つの横幅が200pxの子要素が１行に３つ配置できた。

グリッドアイテム（子要素）同士の余白

　子要素同士で区切られていないため見づらいので、gapプロパティで余白の値を指定。

＜子要素間に10pxの隙間を作る＞

.container {
　display: grid;
　grid-template-columns: 200px 200px 200px;
　gap: 10px;
}

.item {
　background: blue;
　color: yellow;
　padding: 10px;
}

実装すると

　⇒10px分の隙間ができた。

　※gapプロパティはFlexboxでも使用可能。

CSSグリッドで使える単位「fr」

　CSSグリッドで使える単位「fr」は「fraction（比率）」の略で、親要素から見た子要素の大きさを割合で指定。

＜pxで指定した場合＞

　⇒画面の幅を縮めると見切れてしまう。

＜frで指定するCSSの記述例＞

.container {
　display: grid;
　grid-template-columns: 1fr 1fr 1fr;　←「1:1:1」の意味
　gap: 10px;
}

.item {
　background: blue;
　color: yellow;
　padding: 10px;
}

実装すると

横幅を縮めると

　⇒「1:1:1」の割合のままで縮まる

グリッドアイテム（子要素）の高さ

　grid-template-rowsプロパティでグリッドアイテムの高さを指定。

＜2行の高さを2行とも200pxにする場合＞

.container {
　display: grid;
　grid-template-columns: 1fr 1fr 1fr;
　grid-template-rows: 200px 200px;
　gap: 10px;
}

.item {
　background: blue;
　color: yellow;
　padding: 10px;
}

実装すると

　⇒1行の高さ200pxの子要素が2行できた。

いったんブレーイク！

今日は、
二十四節気の「処暑」
七十二候の「綿柎開（わたのはなしべひらく）」

Copilot！「処暑」ってどんな季節？

　処暑（しょしょ）は、二十四節気の一つで、8月23日頃から始まります。この時期は、暑さが和らぎ始める頃を指します。以下は処暑の特徴です：

１．暑さが収まる: 処暑は「暑さが止まる」という意味があり、夏のピークが過ぎて徐々に涼しくなってくる時期です。
２．朝晩の涼しさ: 日中はまだ暑い日が続くこともありますが、朝晩には涼しい風が吹くようになります。
３．季節の変わり目: 暦の上では秋に入っており、秋の気配を感じ始める時期です。
４．体調管理: 朝晩と日中の寒暖差が大きくなるため、体調管理に注意が必要です。
５．旬の食べ物: 処暑の時期には、ぶどうやいちじく、さつまいもなどの野菜や果物が旬を迎えます。また、秋刀魚（さんま）もこの時期に出回り始めます。

　処暑は夏の終わりを感じさせる季節の変わり目であり、秋の訪れを楽しむ時期でもあります。

＜引用元：¹: HANKYU FOOD ²: サライ.jp＞

リンク先見てみると毎年同じ日付ってわけではないとのこと。
今年は8月22日なんだね。　

「綿柎開」はどんな季節？

　「綿柎開（わたのはなしべひらく）」は、七十二候の一つで、二十四節気の「処暑」の初候にあたります。この時期は、8月23日から8月27日頃に該当します。

　「綿柎開」とは、綿の実を包んでいる萼（がく）が開き始める頃を意味します。綿の花が咲いた後、実ができ、その実が割れると中から白い綿が顔を出します。

　この時期は、夏の終わりを感じさせる季節の変わり目でもあります。綿の実がはじけてふわふわの綿花が見える様子は、秋の訪れを感じさせますね。

＜引用元：¹: tenki.jp ²: こよみる＞

なるほど～。。。

調べた結果、、、秋刀魚が食べたい。(º﹃º〃)

◆読みやすいレイアウトとは

　レイアウトによってWebサイト全体のイメージは大きく変わる。

視線の流れを理解する

　ユーザーが画面を見る時、その視線の流れには決まった法則がある。

＜Z型＞

視線は左上から右上、次に左下、そして右下へと動く。チラシやポスターなどでよくつかわれる。

＜F型＞

視線は左上から右上に水平に進み、少し下がってまた左から右へ進む動き。ニュースサイトやブログなど、文章が多いページに適している。

教材には記載はないがもう一つ、

＜グーテンベルク・ダイヤグラム＞

均等に配置された情報を見るときに、視線は左上から右下に斜めに動く。印刷物に多く見られる。
具体的には、ページを４つの領域に分けて考え、左上が視線の始点で右下が視線の終点となるため、左上と右下のゾーンに重要な情報を配置するとよい。
逆に、右上と左下のゾーンに重要な情報を配置すると読み飛ばされてしまう可能性があるためので、サブ情報やメニュー・補足情報や注意書きなどを配置するとよい。