[{"_1":2,"_125":-5,"_126":-5},"loaderData",{"_3":4},"routes/present",{"_5":6,"_7":8},"deckKey","luagate/html-css-basics","slides",[9,21,38,50,57,69,75,96,107,119],{"_10":11,"_12":13,"_13":14,"_15":16,"_17":18,"_19":20},"id",1,"type","title","HTMLとCSSって何が違うの？","category","Web制作の基本","section","図解5分でわかる","theme","light",{"_10":22,"_12":23,"_13":24,"_15":16,"_25":26,"_27":28,"_32":33,"_34":35,"_19":20,"_36":37},2,"content-image","Webページの仕組み","description","あなたが見ているWebページは、3つの技術でできています。","bullets",[29,30,31],"HTML — ページの「構造」を作る","CSS — ページの「見た目」を整える","JavaScript — ページに「動き」をつける","imageSrc","/assets/diagram-internet-globe.svg","imagePosition","right","icon","globe",{"_10":39,"_12":23,"_13":40,"_15":16,"_27":41,"_32":47,"_34":35,"_19":20,"_36":48,"_25":49},3,"HTMLとは",[42,43,44,45,46],"HyperText Markup Languageの略","Webページの「骨組み」を作る言語","タグ（

,
, ）で構造を記述","ブラウザがHTMLを読み取って画面に表示","HTMLだけだと白黒で味気ない見た目","/assets/illust-react-basics.svg","code","HTMLはWebページの骨組みを作る言語です。",{"_10":51,"_12":48,"_13":52,"_15":16,"_25":53,"_48":54,"_55":56,"_19":20,"_36":48},4,"HTMLのコード例","タグで囲んで構造を表現します。","\n \n My Page\n \n \n

Hello, World!

はじめてのWebページ

\n \n","language","HTML",{"_10":58,"_12":23,"_13":59,"_15":16,"_27":60,"_32":66,"_34":35,"_19":20,"_36":67,"_25":68},5,"CSSとは",[61,62,63,64,65],"Cascading Style Sheetsの略","Webページの「デザイン」を担当する言語","色・大きさ・配置・アニメーションを制御","HTMLの要素に「どう見せるか」を指定","レスポンシブ対応も可能","/assets/illust-typescript-basics.svg","droplet","CSSはWebページの見た目を整える言語です。",{"_10":70,"_12":48,"_13":71,"_15":16,"_25":72,"_48":73,"_55":74,"_19":20,"_36":48},6,"CSSのコード例","セレクタでHTML要素を指定し、プロパティで見た目を変えます。","h1 {\n color: #05B45B;\n font-size: 32px;\n}\n\np {\n line-height: 1.8;\n}\n\nbody { background: #F5F4ED; }","CSS",{"_10":76,"_12":77,"_13":78,"_15":16,"_79":80,"_35":88,"_19":20,"_25":95},7,"two-column","HTMLとCSSの役割比較","left",{"_81":82,"_27":83},"heading","HTML（構造）",[84,85,86,87],"ページの骨組みを作る","見出し・段落・画像を配置","「何があるか」を定義","例：家の間取り図",{"_81":89,"_27":90},"CSS（デザイン）",[91,92,93,94],"見た目を美しく整える","色・フォント・配置を指定","「どう見せるか」を定義","例：壁紙・家具・照明","HTMLとCSSの役割の違いを比較します。",{"_10":97,"_12":23,"_13":98,"_15":16,"_27":99,"_32":105,"_34":79,"_19":20,"_25":106},8,"ブラウザが表示するまで",[100,101,102,103,104],"1. URLを入力する","2. サーバーにリクエストを送る","3. HTMLファイルを受信する","4. CSSを適用して見た目を整える","5. 画面にページが表示される","/assets/diagram-https-request.svg","ブラウザがWebページを表示するまでの流れ。",{"_10":108,"_12":23,"_13":109,"_15":16,"_25":110,"_27":111,"_32":117,"_34":35,"_19":20,"_36":118},9,"まとめ","HTMLとCSSはWebの基本中の基本です。",[112,113,114,115,116],"HTML = ページの「構造」（骨組み）","CSS = ページの「見た目」（デザイン）","この2つだけで静的なWebページは作れる","JavaScriptを加えると動きのあるページに","まずはHTMLとCSSから始めよう！","/assets/illust-cloud-basic.svg","check-circle",{"_10":120,"_12":121,"_121":122,"_123":16,"_19":124},10,"quote","Webページは HTML で「何を伝えるか」を決め、CSS で「どう伝えるか」を整える。","source","accent","actionData","errors"]