007.64-1 📘〔独学〕作って学ぶ HTML+CSS グリッドレイアウト エビスコム 著 より ーASADA Misuzu' study.ー浅田総合研究事務所 (兵庫県)

P 40　フローレイアウト制御しやすくするために生まれたもの (2) CSSフレームワーク https://bootsrapdocs.com/ アドレスはアクセスができないようです。 この後のアドレスは携帯ではちょっと無理です。 以後、アドレスは割愛させて頂きます。 P41   フローリアウトを制御しやすくするために生まれたもの(3) フクロウセレクタ P42   「Every Layout」の Stack P43   ◻️  フロウセレクタ登場以前 Spacing The Bottom of Modules P44   https://css-tricks.com/spacing-the-bottom-of-modules/ これはアクセスできました。 P45 ◻️   フクロウセレクタの登場 P46  マージンと間隔の確保 P 47      公理的CSSとロボトミー手術を受けたフクロウ               https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ P48     ◻️　Tailwind CSS や WordPressブロックエディターで活用されるフクロウセレクタ P49   WordPressのブロックエディターでは、レイアウトの機能を持つブロックにフクロウ セレクタの仕組みで間隔をコントロールする機能が搭載されている。 P50　フローレイアウトを制御しやすくするために生まれたもの (4) P51     ◻️ リセットCSS https://githup.com/tailwindlabs/taiwindcss/blob/master/src/css/preflight.css こんなアドレスないので見つかりません  次のも割愛します。 P52 ◻️ ユーティリティクラスをベースとしたスタイリング ◻️参考文献 アドレスがアクセスできなさそうなものが多いので割...

1️⃣ Web のCodingについての質問です。 2026/04/25 9:55 (JST) flot inline - block clearfix UAスタイルシート これらをご説明ください。 2️⃣ April 25, 2026 17:06(JST) ありがとうございます。 頓挫しておりまして、 ご解説いただいたのをノートに写しましたがちょっと不明点があったので h1 これの普通の意味 高さを表しますか？ ulこれは？ aこれは、ハイパーインクを着てる時に最初に書くものですよね。 a herf だったかもですが、 最後のところでこれら4つはって書いてくださっているのですが、 どれを指して4つ っておっしゃってるのですか？ 3️⃣ April 25, 2026 17:06(JST) ありがとうございます。 頓挫しておりまして、 ご解説いただいたのをノートに移しましたがちょっと不明点があったので h1 これの普通の意味 高さを表しますか？ ulこれは？ aこれは、ハイパーインクを着てる時に最初に書くものですよね。 a herf だったかもですが、 最後のところでこれら4つはって書いてくださっているのですが、 どれを指して4つ っておっしゃってるのですか？ 4️⃣ 何かおかしいです。 Crayonsiteのことです。 5️⃣ エビスコム著では、横配置になってるけれどもCrayonsiteでは縦配置になるのは？ 6️⃣ CrayonsiteのHTMLでは、打ち込んだタグが全部テキストになってしまいます。 7️⃣ (ClaudeOpus4.6(Anthropic)が組んでくれたタグをCrayonsiteに貼ってみたら) このタグには対応していないらしくて テキストが横並びに出ただけです。 8️⃣ (Claude Opus 4.6(Anthropic)が組んでくれたタグをBloggerにはったら) ...HTMLの部分... この部分だけが表示されて後のタグは全部白紙になってます。 やはり新しいCSSに対応したターミナルがいるので新しいMacの購入について相談しました。 学習の方法としてはノートに移したりCrayonsiteの非公開のCoding練習用のPageに検索🔍️しなくてもいつでも見れるように記録しておきました。記録が増えてきたら 重要なところだけを...

 ❙ フローアウトの限界   <button> Documentを見る</button> これはセルにピタッと ついてしまうので、普通のタグが表示されてましたセルから少し離れるように って事で、ただのタイプのタグはBloggerでは表示さらないかもです。 フローレイアウトはドキュメント以外の複雑なレイアウトに適していない。(エビスコム 2024) 〔Practice〕 Documentを見る Documentを見る このボタンのタグは Claude Opus 4.6 (Anthropic)に組んでもらいました。 ボタンの幅が広くなり緑なのですね。 〔参考文献〕 エビスコム『作って学ぶHTML＋CSS グリッドレイアウト』マイナビ出版, 2024 © 2016 ASADA Misuzu

 フローレイアウトでレイアウトを自由に制御するために何をすればいいか 1. フローレイアウトのルールを理解する 2. 全ての要素のスタイルを把握 3. 要素の相互関係でレイアウト組む A                    B                   C                    D                    B の高さが小さくなると CD の配置が上へシフトされる A                        B               C                    D                    A のマージンが大きくなると BD の配置が下へシフトする 参考文献　作って学ぶ　HTML+CSS グリッドレイアウト ©Civic Notes

▦ 左右のautoのマージンの扱い ・要素の種類で変わる。 <div> 全体をグループ化。ブロックレベルな要素 左右にautoマージンを入れると中央に配置される。 〔実践〕 div { width:800px;margin-inline：auto;} タグになっていない？ フローレイアウトでは 要素の種類や設定によって { width:800px;margin-inline：auto;} <div>にしたら<div>は消えたが⋯？ この本は本当に解かりにくい Bloggerの中央揃えのタグは <div><div style=“text-align：center;“> ときっちり中央っていうのが 入ってますね。 これは本書の figure {text-align：center;}に近いです。 画像を配置させたら たくさんタグが入ってます。 Bloggerはタグをコピーできないのです。 画像にして Google レンズで読み込んで間違えたところを直したりしながら そしてそれをまた ChatGPT-5(OpenAI)に添削してもらいました。 <div class="separator" style="clear: both; align: center;><href="https://⋯⋯⋯⋯⋯JPG" style="margin-left: 1em; lem ;margin-right: 1em ;> <img border="0"data- orginal-height="1621"data-orginal-width="1231"height"320"src"https://⋯⋯⋯⋯JPG"width="243"/></a></div> こんな感じですけども もしかしたら間違えてるかもしれません。 これらのタグの解説もしてくれたのですがそれはご自身で あなたのアシスタントのAI におききになってみて下さい。 〔参考文献〕 エビスコム『作って学ぶHTML+CSSグ...

エビスコム著 作って学ぶ HTML+CSSグリッドレイアウト It is kind of you. 32px 1em;16px 全然できていない。 ▓ 隣接要素の上下マージンが相殺される　　P28 <h1>の下マージン　32px <figure> の上マージン　32px 文書のレイアウト <h1> の下マージン　32px <p> の上下マージン　1em (16px) <figure> の上マージン　32px 🧑‍💻 ChatGPT-5先生 (OpenAI) に相談しました。 なるほど、P28「隣接要素の上下マージンが相殺される（マージンの相殺／margin collapse）」のところですね。 この部分はHTMLタグの書き方の問題というよりも、**CSSの「仕様上の挙動」**が原因です。 --- 🔹 まず前提 次のようなHTMLを書いたとします： <h1>見出し</h1> <figure>   <img src="sample.jpg" alt=""> </figure> そしてCSSで h1 {   margin-bottom: 32px; } figure {   margin-top: 32px; } とした場合、本来なら合計64pxの余白ができそうに思えますよね。 ところが、ブラウザで見ると 実際の間隔は32pxだけ になります。 --- 🔹 なぜか？ これが「マージンの相殺（margin collapse）」です。 > 上下に隣接するブロック要素の margin は重なって相殺され、より大きい方だけが有効になる。 つまり： <h1> の下マージン 32px <figure> の上マージン 32px → どちらも同方向（上下）なので、重なって 32px のままになります。 --- 🔹 消えないタグというより、「タグではなくボックスの性質」 これはHTMLタグの問題ではなく、 ブラウザのボックスモデル（CSSレイアウトエンジン）の仕様によるものです。 つまり「タグを入れたのに効かない」のではなく、 ブラウザが「まとめて計算して1つのmarginにした」...