Chapter 2 ❙ CSS グリッドの誕生とその特徴 – AIRO

-

Chapter 2　

＊ed.より

これまで 丁寧に読み過ぎて行ったので、2025年6月15日に購入したエビスコム著の本書は2026年5月16日で、52ページまでしか読めてませんでした。


全体的に ベースアップをはろうと思ってますので 今日は一気に、「Chapter 2」を読み終えました。


Chapter 2　項目のみ記載

❙CSS グリッドの誕生とその特徴


2.1 ハックを使わないレイアウトの始まり⋯⋯54

2.2 フレックスボックス レイアウトの登場⋯⋯58

2.3 フローレイアウトとフレックスボックスでは不十分だったレイアウト制御⋯⋯64

2.4 CSS グリッドレイアウトの登場⋯⋯70

2.5 CSS グリッドのベースとなっている概念⋯⋯78

#トラック

#ライン

#テンプレート


📖 グリッドシステムとは


20世紀後半にスイスのグラフィックデザイナー、ヨゼフ・ミュラー=ブロックマン

(Josef Müller - Brockmann)

著書「Grid system in graphic design」


この本が「さまざまなデザイン制作には欠かせないものになっている」と、本書の筆者が記述している。


2.7⋯⋯92 割愛

2.8⋯⋯94 割愛


付箋にもつけた重要な参考文

❙ displayで指定できる値⋯⋯98


〔Chapter 2 で 紹介されていたWebSiteの一つ〕

The Story CSS Grid, from Creatore


CSS Gridの物語：開発者による解説

アーロン・グスタフソン著 2017年10月19日

CSS、レイアウト＆グリッドのカテゴリに掲載

https://alistapart.com/article/the-story-of-css-grid-from-its-creators/


〔参考文献〕

エビスコム『作って学ぶ HTML+CSS グリッドレイアウト』マイナビ, 2024 📷Photo Photo ASADA Misuzu
エビスコム『作って学ぶ HTML+CSS グリッドレイアウト』マイナビ, 2024
📷Photo Photo ASADA Misuzu


このブログの人気の投稿

🧑‍💻絶対位置指定された要素 (position: absoluteまたはfixedが適用された要素)の場合

-
イメージ
👩‍💼こんばんは 今日は 同じページなのですけども 絶対位置指定された要素 (position: absoluteまたはfixedが適用された要素)の場合 このことが3行ほどで説明されているのですが 通常フローから独立して扱われる 包含ブロック 横幅や高さがautoの場合 端折ってますが こんなこと書いてます。 ChatGPT-5.2先生なら どのように説明されますか？ 🧑‍💻 ChatGPT-5.2 (OpenAI)   こんばんは 😊 ではご要望どおり、教科書の3行分を「ChatGPT-5.2流」に噛み砕いて説明しますね。 （Blogger実技・エビスコム本の文脈にぴったり合わせます。 🟦 絶対位置指定された要素（position: absolute / fixed）の本質 ― ChatGPT-5.2先生の説明 ― ①「通常フローから独立して扱われる」とは？ ②「包含ブロック」とは？ ③「横幅や高さが auto の場合」はどうなる？ 〔詳細は個人保有とさせていただきます〕 🟩 3行でまとめると（本の要約＋理解版） > 絶対位置指定された要素は、 通常の文書フローから外れて独立して配置される。 位置は包含ブロック（親要素または画面）を基準に決まり、 幅や高さが auto の場合は中身のサイズに従う。 🧠 Misuzuさん向け・一発で腑に落ちる比喩 通常フロー：文章の行進 float：横に避けて歩く absolute：行進から抜けて「指定席」に座る fixed：画面にテープで貼り付ける 🎯 実技訓練で確認するとしたら（超おすすめ） 〔詳細は個人保有とさせていただきます〕 この体感ができると、 教科書の3行は一生忘れません 😊 〔参考文献〕 エビスコム著『作って学ぶ 　HTML+CSS グリッドレイアウト』2024, 27頁 📷  Photo Photo 浅田美鈴 Discussing Data, Debating Ideas — 茶都新聞🎐・分析と対話の現場から https://2etw9.crayonsite.net/ 茶都新聞が2025年12月の最初 ぐらいから受けている Google のオーバービューからの名誉毀損生成についての記録ブログです https://chato-press-overview-n...
続きを読む

🧑‍💻👩‍💼 ChromeブラウザのCSS (UAスタイルシート)に含まれる主なスタイルでHTMLに影響するもの

-
イメージ
👩‍💼 本日は エビスコム著『作って学ぶ HTML + CSS グリッドレイアウト』 の　P25 📷Photo Photo 浅田美鈴 Chrome ブラウザのCSS (UAスタイルシート)に含まれる主なスタイルで上記のHTMLに影響するもの の タグの左側の説明を ChatGPT-5 にしてもらいました。 🧑‍💻 OpenAI ChatGPT-5先生   UAスタイルシートとは UA（ User Agent ）スタイルシート とは、 ブラウザが自動で適用している初期設定のCSS のことです。 UA = User Agent（＝ブラウザのこと） スタイルシート = 見た目を定義するCSSファイル つまり「あなたが何もCSSを書かなくても、ブラウザが裏で最低限の見た目を設定している」という意味です。 --- 🧩 例：ChromeのUAスタイルの一部 あなたが最初の質問で書いてくださったこの部分👇 まさに ChromeのUAスタイルシートに含まれるデフォルトCSS です。 要素 デフォルト設定（例） 意味 html display: block; HTML全体をブロック要素として扱う head display: none; 表示しない（メタ情報だから） body display: block; margin: 8px; ページの本文全体に8pxの余白をつける h1 display: block; font-size: 2em; font-weight: bold; margin-block-start: 0.67em; margin-block-end: 0.67em; 見出しを大きく太く、上下に余白を設定 --- 🧠 つまりどういうこと？ あなたがHTMLだけを書いても、見出しが大きく太字になったり、本文に余白があるのは―― 実は Chromeが最初からそう設定してくれているから なんです。 これを「UAスタイルシートの影響」と言います。 --- 🧮 もし自分で変えたい場合 自分でCSSを書いて上書きできます： body {   margin: 0; /* UAスタイルの8pxを上書きして余白ゼロに */ } h1 {   font-size: 1.5em; /* Chromeの2em設定を変更 */  ...
続きを読む