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

P40 フロー フローレイアウト　FlowLayout    CSS Framework　CSS フレームワーク グリッドシステム 　　 カラム　CSS 2009  960 Grid System 2011  Bootstrap 1.0.0 フローレ アルト (←❌️改ざん)を　タイトルの改ざん(名誉毀損)-Administor 詳しくは コチラへ

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グ...