[{"_path":"/","_draft":false,"_partial":false,"_empty":false,"title":"Hello Content","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"hello-content"},"children":[{"type":"text","value":"Hello Content"}]}]},"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"hello-content"},"children":[{"type":"text","value":"Hello Content"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:index.md","_source":"content","_file":"index.md","_extension":"md"},{"_path":"/memo/img-loading","_draft":false,"_partial":false,"_empty":false,"title":"レイアウトシフト回避したいついでにレスポンシブ画像とかいろいろな画像の読み込み方を整頓しとく","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"やりたいこと"},"children":[{"type":"text","value":"やりたいこと"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"画像の表示ってとても必要だけど、快適にサイトを見るには作るの結構気を使うんですよね～。あまり気を使えてないから、ちょっと今一度メモメモしといて、気を使えるようになろうかな～。"}]},{"type":"element","tag":"h2","props":{"id":"レイアウトシフト回避"},"children":[{"type":"text","value":"レイアウトシフト回避"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"読込が遅れてるコンテンツが表示されることで、今まで見てたコンテンツが急にガクンと場所が変わる現象、レイアウトシフト。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n利用者視点で見ると結構イラっとするんですよね。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nページ読み込みきる前に目的のもの見つけてタップしようとした瞬間にズレっとかね。\nでも、画像を全部読み込み終わるまでなにの描画もしないなんてね…"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nそれも困るから、どうしといたらいいのかメモメモ。"}]},{"type":"element","tag":"h3","props":{"id":"htmlにwidthheight属性を追加"},"children":[{"type":"text","value":"HTMLにwidth/height属性を追加"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"従来は"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width/height"}]},{"type":"text","value":"属性はピクセルの数値指定だったけど、現在は数値に単位を指定しないことで比率計算的(アスペクト比指定)に使えるらしい。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncssで↓的な指定をすれば、先祖要素をもとにレスポンシブ対応もできるよ。よきよき。"}]},{"type":"element","tag":"code","props":{"code":"img {\n width: 100%;\n height: auto;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"img {\n width: 100%;\n height: auto;\n}\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"cssでaspect-ratioを設定する"},"children":[{"type":"text","value":"CSSで"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"aspect-ratio"}]},{"type":"text","value":"を設定する"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"CSSで"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"aspect-ratio"}]},{"type":"text","value":"を設定しておくと、CSSのレイアウト指定の計算でプレースホルダーの領域をあらかじめ指定しておけるそうな。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nIEがサヨナラした現在は普通に使えるし、便利！ありがたい！"}]},{"type":"element","tag":"code","props":{"code":"img {\n width: 100%;\n aspect-ratio: 16 / 9;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"img {\n width: 100%;\n aspect-ratio: 16 / 9;\n}\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"パフォーマンス改善"},"children":[{"type":"text","value":"パフォーマンス改善"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ブラウザのリソース読込みに対して指定をすることで、ブラウザのローディングスレッドとコンテンツの表示のバランスをいい感じにして、早くユーザーさんにいい感じにコンテンツを届けましょ、っていう対応、それがパフォーマンス改善。"}]},{"type":"element","tag":"h3","props":{"id":"lazy-loading"},"children":[{"type":"text","value":"Lazy Loading"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lazy Loadingとは、視覚的ビューポート（現在表示されているところ）以外の読込を遅らせるということ。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n読込遅延を発生させることで、文章の読込を最適化させることができる。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ひと昔まえまでは、遅延によってSEOの影響があるだとか、ブラウザによる対応がマチマチすぎるマチマチ感があった…気がするのだけど、今は単純明解。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"読込が発生しない分、レイアウトシフトもおきるので、回避する設定を一緒に行うことを忘れずに。"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"loadingが取る値は↓"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"値"}]},{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"eager"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"既定値"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"すぐに画像読込開始"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"lazy"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ブラウザがこの画像が必要と判断するまで待て"}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading"}]}]}]},{"type":"element","tag":"h3","props":{"id":"読込み処理の指定decode"},"children":[{"type":"text","value":"読込み処理の指定（Decode）"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"とりあえず、書き方。"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"decodingが取る値は↓。意訳してるので違う場合は教えてください…"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"値"}]},{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"sync"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"他のコンテンツと同期的に読込みしてね"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"他のコンテンツと非同期的に読込みしてね"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"auto"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"既定値"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ブラウザにお任せ"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sync"}]},{"type":"text","value":"すると、他のコンテンツがこの画像を読み込むのを待ちます＝表示が遅れるかもしれないな～"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"async"}]},{"type":"text","value":"すると、この画像のことは置いといて、読み込む＝この画像は後から追っかけ表示になるかもな～"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading"}]}]}]},{"type":"element","tag":"h2","props":{"id":"レスポンシブ画像"},"children":[{"type":"text","value":"レスポンシブ画像"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"レスポンシブでサイトがつくられるのも当たり前になってるけど、表示されるスクリーンサイズは様々で。さらに言うと、みため小さいのに、高解像度なデバイスもあったり。"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ムダに大きい画像を読み込むのも負担だし、スクリーンの画角によっては表示させたい画像範囲が違ったり。"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"えぇい！ややこしい！"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"に立ち向かいつつ、いい感じの画像を表示しようよ、っていうのがレスポンシブ画像。"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参考"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"}]}]}]},{"type":"element","tag":"h3","props":{"id":"ひとつのimgタグで読込わけるsrcsetとsizes属性"},"children":[{"type":"text","value":"ひとつのimgタグで読込わける"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"と"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":"属性"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"画像のパスとサイズ"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"表示の条件"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"を指定することで、HTML上で条件をよみとって表示を切り替えることができる"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"HTMLの書き方は↓"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"属性はタグの必須要素なので、記載を忘れずに。候補画像のひとつとしても扱われるみたい。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"この方法は、"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"同じ画像のサイズ違いを表示させるというのが前提の方法"}]},{"type":"text","value":"。スクリーンサイズによって全然別のコンテンツを表示させたい場合には適さないので気をつけて！"}]},{"type":"element","tag":"h5","props":{"id":"画像のパスとサイズを指定する---srcset"},"children":[{"type":"text","value":"画像のパスとサイズを指定する - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"に【 "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"画像のパス"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"半角スペース"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"画像の横幅実寸ピクセルサイズ(単位:w)"}]},{"type":"text","value":"】をカンマ区切りで列挙。"}]},{"type":"element","tag":"code","props":{"code":"srcset=\"hoge-small.jpg 320w,\n hoge-medium.jpg 480w,\n hoge-large.jpg 800w\"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"srcset=\"hoge-small.jpg 320w,\n hoge-medium.jpg 480w,\n hoge-large.jpg 800w\"\n"}]}]}]},{"type":"element","tag":"h5","props":{"id":"表示の条件を指定する---sizes"},"children":[{"type":"text","value":"表示の条件を指定する - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":"に【"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"メディアクエリ"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"空白"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"条件成立時のソースサイズ(幅)"}]},{"type":"text","value":"】をリスト化。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n条件にあてはまらないときのデフォルトサイズとして、最後にメディアクエリ無しのものも記載しておきましょう。"}]},{"type":"element","tag":"code","props":{"code":"sizes= \"(max-width: 320px) 280px,\n (max-width: 480px) 440px,\n 800px\"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"sizes= \"(max-width: 320px) 280px,\n (max-width: 480px) 440px,\n 800px\"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"↑の例だと、"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"画面幅320px以下の時は280px位の横幅の画像"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"画面幅480px以下の時は440px位の横幅の画像"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"そうじゃないときは800px位の横幅の画像\nを、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"の画像から選ぶよ"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"な感じ。"}]},{"type":"element","tag":"h3","props":{"id":"表示サイズは同じ解像度だけでファイルを変えたい"},"children":[{"type":"text","value":"表示サイズは同じ。解像度だけでファイルを変えたい"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"は横幅(単位:w)ではなく、画面解像度(単位:x)でも指定可能。\n↓にしておくと、解像度によって表示画像を切り替えてくれるそうな～"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"そもそもがっつり素材を変更できるpicture"},"children":[{"type":"text","value":"そもそもがっつり素材を変更できる"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"とりあえず、HTMLの書き方から。"}]},{"type":"element","tag":"code","props":{"code":"\n \n \n \"hogeはhogeだよ\"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n \n \n \"hogeはhogeだよ\"\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"の中身は"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を0個以上、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を1つ。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"でリストアップされている中からブラウザが条件に合うものを選択。適切なものがなかったら"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を使う。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"に設定する値はこちら↓"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"プロパティ"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"media"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"表示の条件。メディアクエリを記載"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"前述の"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"での説明と同じ。"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"srcsetとセットで使うやつ。前述と一緒"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"MIMEタイプの宣言。宣言しておくと、その形式の対応ブラウザかどうかも指定できる"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前述の例に"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"をリストアップすることで、さらにいろいろよしなにブラウザに選んでもらえるようになるようで。"}]},{"type":"element","tag":"code","props":{"code":" \n \n \n \n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":" \n \n \n \n\n"}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照：\n"},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture"}]}]}]},{"type":"element","tag":"h3","props":{"id":"img-srcsetとpicture"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"と"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"はそもそも、同じ画像をサイズや解像度違いで準備していることを前提としているため、ブラウザによっては、先に大きい画像を読み込んでいるとウィンドウを小さい画像対応のものにリサイズしても、改めて読込直したり直さなかったりする…っぽい。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nに対して、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"はクライアントサイドの状態によって別のものを読み込むんじゃ～なタグ。"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"読み込むコンテンツの必要性によって使い分けれるといいね。"}]},{"type":"element","tag":"h2","props":{"id":"ファイルの圧縮と形式"},"children":[{"type":"text","value":"ファイルの圧縮と形式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最近使う系だと、この辺りでしょうか"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"形式(拡張子)"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"jpg"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"写真系の画像で使う非可逆圧縮な形式。適切に圧縮して使おうね"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"png"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"イラストとかで使うことが多い形式。透過部分がある画像にも使えるよ"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ベクター形式が使える=1ファイルでいろいろなサイズを画像の荒れなく表示できる形式"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"webp"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"jpgやpngより高い圧縮率で使える、今からいい感じな形式"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"これらのファイル形式を運用方式や制作制限等々にあわせて準備できるとよいですね～。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ちなみに、下記のように"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":"指定して書くと、"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svgが使えるブラウザにはsvg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"webpが使えるブラウザにはwebp"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"どちらも使えなかったらpng"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"のファイルが表示されるようにできるとよ。"}]},{"type":"element","tag":"code","props":{"code":"\n \n \n \"hogeなhoge画像\"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n \n \n \"hogeなhoge画像\"\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"おわり"},"children":[{"type":"text","value":"おわり"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"は～。ちょっとレイアウトシフトのこと書こうとしただけだったのに、いろいろ周辺情報付けたしたら長くなった…"}]}]},"draft":false,"publishedAt":"2022-8-16","eyecatch":"https://res.cloudinary.com/nieve/image/upload/q_auto:good,ar_1.0,c_lfill,w_600,h_248/v1661247274/memoThumb/img-loading.png","tags":["html","css"],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"やりたいこと"},"children":[{"type":"text","value":"やりたいこと"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"画像の表示ってとても必要だけど、快適にサイトを見るには作るの結構気を使うんですよね～。あまり気を使えてないから、ちょっと今一度メモメモしといて、気を使えるようになろうかな～。"}]},{"type":"element","tag":"h2","props":{"id":"レイアウトシフト回避"},"children":[{"type":"text","value":"レイアウトシフト回避"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"読込が遅れてるコンテンツが表示されることで、今まで見てたコンテンツが急にガクンと場所が変わる現象、レイアウトシフト。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n利用者視点で見ると結構イラっとするんですよね。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nページ読み込みきる前に目的のもの見つけてタップしようとした瞬間にズレっとかね。\nでも、画像を全部読み込み終わるまでなにの描画もしないなんてね…"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nそれも困るから、どうしといたらいいのかメモメモ。"}]},{"type":"element","tag":"h3","props":{"id":"htmlにwidthheight属性を追加"},"children":[{"type":"text","value":"HTMLにwidth/height属性を追加"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"124"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"従来は"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"width/height"}]},{"type":"text","value":"属性はピクセルの数値指定だったけど、現在は数値に単位を指定しないことで比率計算的(アスペクト比指定)に使えるらしい。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\ncssで↓的な指定をすれば、先祖要素をもとにレスポンシブ対応もできるよ。よきよき。"}]},{"type":"element","tag":"code","props":{"code":"img {\n width: 100%;\n height: auto;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"%"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"auto"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"cssでaspect-ratioを設定する"},"children":[{"type":"text","value":"CSSで"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"aspect-ratio"}]},{"type":"text","value":"を設定する"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"CSSで"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"aspect-ratio"}]},{"type":"text","value":"を設定しておくと、CSSのレイアウト指定の計算でプレースホルダーの領域をあらかじめ指定しておけるそうな。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nIEがサヨナラした現在は普通に使えるし、便利！ありがたい！"}]},{"type":"element","tag":"code","props":{"code":"img {\n width: 100%;\n aspect-ratio: 16 / 9;\n}\n","language":"css"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"%"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" aspect-ratio"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"16"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" / "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"9"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"}"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"パフォーマンス改善"},"children":[{"type":"text","value":"パフォーマンス改善"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ブラウザのリソース読込みに対して指定をすることで、ブラウザのローディングスレッドとコンテンツの表示のバランスをいい感じにして、早くユーザーさんにいい感じにコンテンツを届けましょ、っていう対応、それがパフォーマンス改善。"}]},{"type":"element","tag":"h3","props":{"id":"lazy-loading"},"children":[{"type":"text","value":"Lazy Loading"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lazy Loadingとは、視覚的ビューポート（現在表示されているところ）以外の読込を遅らせるということ。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n読込遅延を発生させることで、文章の読込を最適化させることができる。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ひと昔まえまでは、遅延によってSEOの影響があるだとか、ブラウザによる対応がマチマチすぎるマチマチ感があった…気がするのだけど、今は単純明解。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"読込が発生しない分、レイアウトシフトもおきるので、回避する設定を一緒に行うことを忘れずに。"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"width"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"300"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"height"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"124"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"loading"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"lazy"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"loadingが取る値は↓"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"値"}]},{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"eager"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"既定値"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"すぐに画像読込開始"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"lazy"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ブラウザがこの画像が必要と判断するまで待て"}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading"}]}]}]},{"type":"element","tag":"h3","props":{"id":"読込み処理の指定decode"},"children":[{"type":"text","value":"読込み処理の指定（Decode）"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"とりあえず、書き方。"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"decoding"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"decodingが取る値は↓。意訳してるので違う場合は教えてください…"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"値"}]},{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"sync"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"他のコンテンツと同期的に読込みしてね"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"async"}]},{"type":"element","tag":"td","props":{"align":null},"children":[]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"他のコンテンツと非同期的に読込みしてね"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"auto"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"既定値"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ブラウザにお任せ"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sync"}]},{"type":"text","value":"すると、他のコンテンツがこの画像を読み込むのを待ちます＝表示が遅れるかもしれないな～"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"async"}]},{"type":"text","value":"すると、この画像のことは置いといて、読み込む＝この画像は後から追っかけ表示になるかもな～"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Web/API/HTMLImageElement/loading"}]}]}]},{"type":"element","tag":"h2","props":{"id":"レスポンシブ画像"},"children":[{"type":"text","value":"レスポンシブ画像"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"レスポンシブでサイトがつくられるのも当たり前になってるけど、表示されるスクリーンサイズは様々で。さらに言うと、みため小さいのに、高解像度なデバイスもあったり。"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ムダに大きい画像を読み込むのも負担だし、スクリーンの画角によっては表示させたい画像範囲が違ったり。"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"えぇい！ややこしい！"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"に立ち向かいつつ、いい感じの画像を表示しようよ、っていうのがレスポンシブ画像。"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参考"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images"}]}]}]},{"type":"element","tag":"h3","props":{"id":"ひとつのimgタグで読込わけるsrcsetとsizes属性"},"children":[{"type":"text","value":"ひとつのimgタグで読込わける"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"と"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":"属性"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"画像のパスとサイズ"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"表示の条件"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"を指定することで、HTML上で条件をよみとって表示を切り替えることができる"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"HTMLの書き方は↓"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-small.jpg 320w,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":" hoge-medium.jpg 480w,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":" hoge-large.jpg 800w"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"(max-width: 320px) 280px,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":" (max-width: 480px) 440px,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":" 800px"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-large.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"属性はタグの必須要素なので、記載を忘れずに。候補画像のひとつとしても扱われるみたい。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"この方法は、"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"同じ画像のサイズ違いを表示させるというのが前提の方法"}]},{"type":"text","value":"。スクリーンサイズによって全然別のコンテンツを表示させたい場合には適さないので気をつけて！"}]},{"type":"element","tag":"h5","props":{"id":"画像のパスとサイズを指定する---srcset"},"children":[{"type":"text","value":"画像のパスとサイズを指定する - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"に【 "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"画像のパス"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"半角スペース"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"画像の横幅実寸ピクセルサイズ(単位:w)"}]},{"type":"text","value":"】をカンマ区切りで列挙。"}]},{"type":"element","tag":"code","props":{"code":"srcset=\"hoge-small.jpg 320w,\n hoge-medium.jpg 480w,\n hoge-large.jpg 800w\"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"srcset=\"hoge-small.jpg 320w,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" hoge-medium.jpg 480w,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" hoge-large.jpg 800w\""}]}]}]}]}]},{"type":"element","tag":"h5","props":{"id":"表示の条件を指定する---sizes"},"children":[{"type":"text","value":"表示の条件を指定する - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"sizes"}]},{"type":"text","value":"に【"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"メディアクエリ"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"空白"}]},{"type":"text","value":"+"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"条件成立時のソースサイズ(幅)"}]},{"type":"text","value":"】をリスト化。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n条件にあてはまらないときのデフォルトサイズとして、最後にメディアクエリ無しのものも記載しておきましょう。"}]},{"type":"element","tag":"code","props":{"code":"sizes= \"(max-width: 320px) 280px,\n (max-width: 480px) 440px,\n 800px\"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"sizes= \"(max-width: 320px) 280px,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" (max-width: 480px) 440px,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" 800px\""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"↑の例だと、"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"画面幅320px以下の時は280px位の横幅の画像"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"画面幅480px以下の時は440px位の横幅の画像"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"そうじゃないときは800px位の横幅の画像\nを、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"の画像から選ぶよ"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"な感じ。"}]},{"type":"element","tag":"h3","props":{"id":"表示サイズは同じ解像度だけでファイルを変えたい"},"children":[{"type":"text","value":"表示サイズは同じ。解像度だけでファイルを変えたい"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"は横幅(単位:w)ではなく、画面解像度(単位:x)でも指定可能。\n↓にしておくと、解像度によって表示画像を切り替えてくれるそうな～"}]},{"type":"element","tag":"code","props":{"code":"\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-low.jpg,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":" hoge-middle.jpg 1.5x,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":" hoge-high.jpg 2x"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-high.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"そもそもがっつり素材を変更できるpicture"},"children":[{"type":"text","value":"そもそもがっつり素材を変更できる"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"とりあえず、HTMLの書き方から。"}]},{"type":"element","tag":"code","props":{"code":"\n \n \n \"hogeはhogeだよ\"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"picture"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"media"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"(max-width: 680px)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-a.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"media"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"(max-width: 960px)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-b.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-b.jpg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hogeはhogeだよ"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"の中身は"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を0個以上、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を1つ。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"でリストアップされている中からブラウザが条件に合うものを選択。適切なものがなかったら"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を使う。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"に設定する値はこちら↓"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"プロパティ"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"media"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"表示の条件。メディアクエリを記載"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"前述の"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"での説明と同じ。"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"sizes"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"srcsetとセットで使うやつ。前述と一緒"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"MIMEタイプの宣言。宣言しておくと、その形式の対応ブラウザかどうかも指定できる"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前述の例に"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"srcset"}]},{"type":"text","value":"をリストアップすることで、さらにいろいろよしなにブラウザに選んでもらえるようになるようで。"}]},{"type":"element","tag":"code","props":{"code":" \n \n \n \n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"picture"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"media"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"(max-width: 680px)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge-small.png 720w, hoge-medium.png 1280w, hoge-large.png 1920w"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"/>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"media"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"(max-width: 960px)"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"fuga-small.png 720w, fuga-medium.png 1280w, fuga-large.png 1920w"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.png"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照：\n"},{"type":"element","tag":"a","props":{"href":"https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://developer.mozilla.org/ja/docs/Web/HTML/Element/picture"}]}]}]},{"type":"element","tag":"h3","props":{"id":"img-srcsetとpicture"},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"と"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"はそもそも、同じ画像をサイズや解像度違いで準備していることを前提としているため、ブラウザによっては、先に大きい画像を読み込んでいるとウィンドウを小さい画像対応のものにリサイズしても、改めて読込直したり直さなかったりする…っぽい。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nに対して、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"はクライアントサイドの状態によって別のものを読み込むんじゃ～なタグ。"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"読み込むコンテンツの必要性によって使い分けれるといいね。"}]},{"type":"element","tag":"h2","props":{"id":"ファイルの圧縮と形式"},"children":[{"type":"text","value":"ファイルの圧縮と形式"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最近使う系だと、この辺りでしょうか"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"形式(拡張子)"}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"説明"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"jpg"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"写真系の画像で使う非可逆圧縮な形式。適切に圧縮して使おうね"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"png"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"イラストとかで使うことが多い形式。透過部分がある画像にも使えるよ"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"svg"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"ベクター形式が使える=1ファイルでいろいろなサイズを画像の荒れなく表示できる形式"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"webp"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"jpgやpngより高い圧縮率で使える、今からいい感じな形式"}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"これらのファイル形式を運用方式や制作制限等々にあわせて準備できるとよいですね～。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ちなみに、下記のように"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":"指定して書くと、"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"svgが使えるブラウザにはsvg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"webpが使えるブラウザにはwebp"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"どちらも使えなかったらpng"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"のファイルが表示されるようにできるとよ。"}]},{"type":"element","tag":"code","props":{"code":"\n \n \n \"hogeなhoge画像\"\n\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"picture"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"image/svg+xml"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.svg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"source"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"image/webp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"srcset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.webp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hoge.png"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"alt"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"hogeなhoge画像"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"おわり"},"children":[{"type":"text","value":"おわり"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"は～。ちょっとレイアウトシフトのこと書こうとしただけだったのに、いろいろ周辺情報付けたしたら長くなった…"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"やりたいこと","depth":2,"text":"やりたいこと"},{"id":"レイアウトシフト回避","depth":2,"text":"レイアウトシフト回避","children":[{"id":"htmlにwidthheight属性を追加","depth":3,"text":"HTMLにwidth/height属性を追加"},{"id":"cssでaspect-ratioを設定する","depth":3,"text":"CSSでaspect-ratioを設定する"}]},{"id":"パフォーマンス改善","depth":2,"text":"パフォーマンス改善","children":[{"id":"lazy-loading","depth":3,"text":"Lazy Loading"},{"id":"読込み処理の指定decode","depth":3,"text":"読込み処理の指定（Decode）"}]},{"id":"レスポンシブ画像","depth":2,"text":"レスポンシブ画像","children":[{"id":"ひとつのimgタグで読込わけるsrcsetとsizes属性","depth":3,"text":"ひとつのimgタグで読込わけるsrcsetとsizes属性"},{"id":"表示サイズは同じ解像度だけでファイルを変えたい","depth":3,"text":"表示サイズは同じ。解像度だけでファイルを変えたい"},{"id":"そもそもがっつり素材を変更できるpicture","depth":3,"text":"そもそもがっつり素材を変更できる"},{"id":"img-srcsetとpicture","depth":3,"text":"と"}]},{"id":"ファイルの圧縮と形式","depth":2,"text":"ファイルの圧縮と形式"},{"id":"おわり","depth":2,"text":"おわり"}]}},"_type":"markdown","_id":"content:memo:img-loading.md","_source":"content","_file":"memo/img-loading.md","_extension":"md"},{"_path":"/memo/nuxt-content-component","_draft":false,"_partial":false,"_empty":false,"title":"【@nuxt/content V2】Proseコンポーネント/MDC Syntaxで記事のコンテンツタイプ/スタイルをもっと自由に","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"やりたいこと"},"children":[{"type":"text","value":"やりたいこと"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"待ちに待った@nuxt/contentのVue3対応。contentがV2になって、ちょっとばかり以前とクセが違ってたりする中で、おそらく前にはなかったProseコードを活用してみたので、メモメモ。"}]},{"type":"element","tag":"h2","props":{"id":"nuxtcontentについてを簡単に解説"},"children":[{"type":"text","value":"@nuxt/contentについてを簡単に解説"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".md"}]},{"type":"text","value":"形式を中心に、ルールにのっとってコンテンツを記載したファイルを作成することで簡易的にCMSとして活用できるNuxt用のモジュール。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nファイルの存在を確認して、テンプレートにコンテンツを表示したり、リストが作れたりとなにかと便利。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"詳細は"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"公式ドキュメント"}]},{"type":"text","value":"を確認。"}]},{"type":"element","tag":"h2","props":{"id":"proseコンポーネント"},"children":[{"type":"text","value":"Proseコンポーネント"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照："},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/prose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://content.nuxtjs.org/api/components/prose"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"まずは、あらかじめ@nuxt/content側で準備されているコンポーネント。\nmd形式で記載することで、自動でhtml変換してくれる。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"heading要素やリスト、リンク等いろいろとあるけれど、\nどんなものがあるのかは"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/prose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"参照に記載のURL"}]},{"type":"text","value":"を見ることとして、"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ここでメモメモしておきたいことは↓"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"[参照URLより]"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nTo overwrite a prose component, create a component with the same name in your project"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/"}]},{"type":"text","value":"directory (ex: components/content/ProseA.vue)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"[訳]"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nProseコンポーネントを上書きするには、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/"}]},{"type":"text","value":"ディレクトリに、同じ名前でコンポーネントを作ってね（例：components/content/ProseA.vue）"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例えばスタイリングのために要素を付けたしたい等々ある場合は、"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/ProseH1.vue"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/ProseUl.vue"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/ProseBlockquote.vue"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"と、ファイルを作って、mdに記入しているコンテンツを挿入する部分に"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を活用した↓のような記載をすれば、デフォルトから変更した要素のコンポーネントを作ることができるよ、ってこと。"}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"ProseH1.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"mdc-syntax"},"children":[{"type":"text","value":"MDC Syntax"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照：\n"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/mdc","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://content.nuxtjs.org/guide/writing/mdc"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"MDC(MarkDown Components) っていうのを活用して、前述の既存のコンポーネント以外にも作成することができるよ、って雰囲気で説明いいのだろうか…。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例えば"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/card.vue"}]},{"type":"text","value":"っていうコンポーネントを作成して"}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"card.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"コンテンツのmdファイルに↓のように書くと、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"card.vue"}]},{"type":"text","value":"の"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"部分にテキストが表示される。"}]},{"type":"element","tag":"code","props":{"code":"::card\ncardコンポーネントに記載するコンテンツ\n::\n","filename":"article.md","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"::card\ncardコンポーネントに記載するコンテンツ\n::\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"記事(mdファイル)のbody部分に↓を書いて、対応するコンポーネントを作成！これを覚えておこう。"}]},{"type":"element","tag":"code","props":{"code":"::コンポーネント名\nコンテンツ\n::\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"::コンポーネント名\nコンテンツ\n::\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"yaml-method"},"children":[{"type":"text","value":"YAML method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"YAMLを混ぜ込むことで、もっと活用の幅が広がるよ、ということで、前述のcardコンポーネントを拡張してみる。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"まずはコンポーネントの拡張。"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"defineProps"}]},{"type":"text","value":"すると、項目を定義できる。そして、VueのPropsデータとしてテンプレートに埋め込み。"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"card.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"コンテンツの方は"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"---"}]},{"type":"text","value":"で囲んだ内側にYAMLを書くとコンポーネントにPropsとして渡すことができる。"}]},{"type":"element","tag":"code","props":{"code":"::card\n---\ntitle: コンポーネントのタイトル\nimage: 画像のURL\n---\nコンポーネントの本文とか、ボディ要素的な。\n::\n","filename":"article.md","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"::card\n---\ntitle: コンポーネントのタイトル\nimage: 画像のURL\n---\nコンポーネントの本文とか、ボディ要素的な。\n::\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"かんた～ん！"}]},{"type":"element","tag":"h3","props":{"id":"codeブロック"},"children":[{"type":"text","value":"Codeブロック"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前バージョンの名残でわかるだろ、ってことなのか、記載がなくてちょっと悩んだのでメモメモ。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"デフォルトのCodeProseコンポーネントにはファイル名の表示がなく、追加したいのだけど、\nmd形式で記載すると、そのHTML変換が"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"
"}]},{"type":"text","value":"なので、内側に書くのも違う…"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"解決方法は↓"}]},{"type":"element","tag":"code","props":{"code":"---LangType [filename.html]\nhogehoge\n---\n","filename":"article.md","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"---LangType [filename.html]\nhogehoge\n---\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\n\n\n","filename":"ProseCode","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n\n"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"---LangType [ファイル名]"}]},{"type":"text","value":"と記載することで、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"filename"}]},{"type":"text","value":"propとして取得できた！"}]},{"type":"element","tag":"h5","props":{"id":"おまけコードハイライト"},"children":[{"type":"text","value":"おまけ：コードハイライト"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照：\n"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/configuration#highlight","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://content.nuxtjs.org/api/configuration#highlight"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以前のバージョンでは、"},{"type":"element","tag":"a","props":{"href":"https://prismjs.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"PrismJS"}]},{"type":"text","value":"を採用していたみたいなのだけど、"},{"type":"element","tag":"a","props":{"href":"https://shiki.matsu.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Shiki"}]},{"type":"text","value":"に変更。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n設定の仕方もシンプルに"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":"にテーマ名をちょっと追記するだけ。"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  content: {\n    highlight: {\n      theme: 'dracula-soft'\n    }\n  }\n})\n","filename":"nuxt.config.ts","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"export default defineNuxtConfig({\n  content: {\n    highlight: {\n      theme: 'dracula-soft'\n    }\n  }\n})\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"おわり"},"children":[{"type":"text","value":"おわり"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"シンプルながら多機能に使える"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/content"}]},{"type":"text","value":"。コンポーネントの拡張についてだけでも、まだまだできることあるっぽい。またなにかしたくなったら調べよう～"}]}]},"draft":false,"publishedAt":"2022-8-24","eyecatch":"https://res.cloudinary.com/nieve/image/upload/q_auto:good,ar_1.0,c_lfill,w_600,h_248/v1661272138/memoThumb/nuxt-content-component.png","tags":["Vue","Nuxt","nuxt/content"],"body":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"やりたいこと"},"children":[{"type":"text","value":"やりたいこと"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"待ちに待った@nuxt/contentのVue3対応。contentがV2になって、ちょっとばかり以前とクセが違ってたりする中で、おそらく前にはなかったProseコードを活用してみたので、メモメモ。"}]},{"type":"element","tag":"h2","props":{"id":"nuxtcontentについてを簡単に解説"},"children":[{"type":"text","value":"@nuxt/contentについてを簡単に解説"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":".md"}]},{"type":"text","value":"形式を中心に、ルールにのっとってコンテンツを記載したファイルを作成することで簡易的にCMSとして活用できるNuxt用のモジュール。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nファイルの存在を確認して、テンプレートにコンテンツを表示したり、リストが作れたりとなにかと便利。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"詳細は"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"公式ドキュメント"}]},{"type":"text","value":"を確認。"}]},{"type":"element","tag":"h2","props":{"id":"proseコンポーネント"},"children":[{"type":"text","value":"Proseコンポーネント"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照："},{"type":"element","tag":"br","props":{},"children":[]},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/prose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://content.nuxtjs.org/api/components/prose"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"まずは、あらかじめ@nuxt/content側で準備されているコンポーネント。\nmd形式で記載することで、自動でhtml変換してくれる。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"heading要素やリスト、リンク等いろいろとあるけれど、\nどんなものがあるのかは"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/components/prose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"参照に記載のURL"}]},{"type":"text","value":"を見ることとして、"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ここでメモメモしておきたいことは↓"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"[参照URLより]"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nTo overwrite a prose component, create a component with the same name in your project"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/"}]},{"type":"text","value":"directory (ex: components/content/ProseA.vue)"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"[訳]"}]},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nProseコンポーネントを上書きするには、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/"}]},{"type":"text","value":"ディレクトリに、同じ名前でコンポーネントを作ってね（例：components/content/ProseA.vue）"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例えばスタイリングのために要素を付けたしたい等々ある場合は、"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/ProseH1.vue"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/ProseUl.vue"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/ProseBlockquote.vue"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"と、ファイルを作って、mdに記入しているコンテンツを挿入する部分に"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"を活用した↓のような記載をすれば、デフォルトから変更した要素のコンポーネントを作ることができるよ、ってこと。"}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"ProseH1.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"1>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"><"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"mdc-syntax"},"children":[{"type":"text","value":"MDC Syntax"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照：\n"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/guide/writing/mdc","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://content.nuxtjs.org/guide/writing/mdc"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"MDC(MarkDown Components) っていうのを活用して、前述の既存のコンポーネント以外にも作成することができるよ、って雰囲気で説明いいのだろうか…。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例えば"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"components/content/card.vue"}]},{"type":"text","value":"っていうコンポーネントを作成して"}]},{"type":"element","tag":"code","props":{"code":"\n","filename":"card.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"コンテンツのmdファイルに↓のように書くと、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"card.vue"}]},{"type":"text","value":"の"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":""}]},{"type":"text","value":"部分にテキストが表示される。"}]},{"type":"element","tag":"code","props":{"code":"::card\ncardコンポーネントに記載するコンテンツ\n::\n","filename":"article.md","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"card"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"cardコンポーネントに記載するコンテンツ"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"記事(mdファイル)のbody部分に↓を書いて、対応するコンポーネントを作成！これを覚えておこう。"}]},{"type":"element","tag":"code","props":{"code":"::コンポーネント名\nコンテンツ\n::\n","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"コンポーネント名"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"コンテンツ"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"yaml-method"},"children":[{"type":"text","value":"YAML method"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"YAMLを混ぜ込むことで、もっと活用の幅が広がるよ、ということで、前述のcardコンポーネントを拡張してみる。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"まずはコンポーネントの拡張。"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"defineProps"}]},{"type":"text","value":"すると、項目を定義できる。そして、VueのPropsデータとしてテンプレートに埋め込み。"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"card.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"><"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">{{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"}}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"><"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  image"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"コンテンツの方は"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"---"}]},{"type":"text","value":"で囲んだ内側にYAMLを書くとコンポーネントにPropsとして渡すことができる。"}]},{"type":"element","tag":"code","props":{"code":"::card\n---\ntitle: コンポーネントのタイトル\nimage: 画像のURL\n---\nコンポーネントの本文とか、ボディ要素的な。\n::\n","filename":"article.md","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"::"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"card"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"---"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"title"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"コンポーネントのタイトル"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"image"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"画像のURL"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"---"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"コンポーネントの本文とか、ボディ要素的な。"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"::"}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"かんた～ん！"}]},{"type":"element","tag":"h3","props":{"id":"codeブロック"},"children":[{"type":"text","value":"Codeブロック"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"前バージョンの名残でわかるだろ、ってことなのか、記載がなくてちょっと悩んだのでメモメモ。"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"デフォルトのCodeProseコンポーネントにはファイル名の表示がなく、追加したいのだけど、\nmd形式で記載すると、そのHTML変換が"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"
"}]},{"type":"text","value":"なので、内側に書くのも違う…"},{"type":"element","tag":"br","props":{},"children":[]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"解決方法は↓"}]},{"type":"element","tag":"code","props":{"code":"---LangType [filename.html]\nhogehoge\n---\n","filename":"article.md","language":"md"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"---LangType ["}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"filename.html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"hogehoge"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"---"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"\n\n\n\n","filename":"ProseCode","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"code-box"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"span"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">{{"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"filename"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"}}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"slot"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" />"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"defineProps"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  filename"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"String"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"''"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"})"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"---LangType [ファイル名]"}]},{"type":"text","value":"と記載することで、"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"filename"}]},{"type":"text","value":"propとして取得できた！"}]},{"type":"element","tag":"h5","props":{"id":"おまけコードハイライト"},"children":[{"type":"text","value":"おまけ：コードハイライト"}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参照：\n"},{"type":"element","tag":"a","props":{"href":"https://content.nuxtjs.org/api/configuration#highlight","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://content.nuxtjs.org/api/configuration#highlight"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"以前のバージョンでは、"},{"type":"element","tag":"a","props":{"href":"https://prismjs.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"PrismJS"}]},{"type":"text","value":"を採用していたみたいなのだけど、"},{"type":"element","tag":"a","props":{"href":"https://shiki.matsu.io/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Shiki"}]},{"type":"text","value":"に変更。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n設定の仕方もシンプルに"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"nuxt.config.ts"}]},{"type":"text","value":"にテーマ名をちょっと追記するだけ。"}]},{"type":"element","tag":"code","props":{"code":"export default defineNuxtConfig({\n  content: {\n    highlight: {\n      theme: 'dracula-soft'\n    }\n  }\n})\n","filename":"nuxt.config.ts","language":"json"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"export default defineNuxtConfig({"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EE6666"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EE6666"}},"children":[{"type":"text","value":"highlight"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EE6666"}},"children":[{"type":"text","value":"theme"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#EE6666"}},"children":[{"type":"text","value":"'dracula-soft'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"})"}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"おわり"},"children":[{"type":"text","value":"おわり"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"シンプルながら多機能に使える"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"@nuxt/content"}]},{"type":"text","value":"。コンポーネントの拡張についてだけでも、まだまだできることあるっぽい。またなにかしたくなったら調べよう～"}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"やりたいこと","depth":2,"text":"やりたいこと"},{"id":"nuxtcontentについてを簡単に解説","depth":2,"text":"@nuxt/contentについてを簡単に解説"},{"id":"proseコンポーネント","depth":2,"text":"Proseコンポーネント"},{"id":"mdc-syntax","depth":2,"text":"MDC Syntax","children":[{"id":"yaml-method","depth":3,"text":"YAML method"},{"id":"codeブロック","depth":3,"text":"Codeブロック"}]},{"id":"おわり","depth":2,"text":"おわり"}]}},"_type":"markdown","_id":"content:memo:nuxt-content-component.md","_source":"content","_file":"memo/nuxt-content-component.md","_extension":"md"},{"_path":"/memo/vue-css-var","_draft":false,"_partial":false,"_empty":false,"title":"Vue単一コンポーネント内のjs・cssで変数を共有する","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h2","props":{"id":"やりたいこと"},"children":[{"type":"text","value":"やりたいこと"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"おなじファイルの中に書いてるんだから、JavaScriptとCSSで変数、共有できたらいいのに。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nサイズとか、色とか、状態とか。なんかできたほうが便利そう。"}]},{"type":"element","tag":"h2","props":{"id":"javascript---css"},"children":[{"type":"text","value":"JavaScript -> CSS"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"JavaScriptで定義した変数をCSSで利用するのは、シンプルだった。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nJavaScript側で"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"ref"}]},{"type":"text","value":"を使って定義、CSS側で"},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"v-bind"}]},{"type":"text","value":"を使って呼び出し。"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"child.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n"}]}]}]},{"type":"element","tag":"h2","props":{"id":"css---javascript"},"children":[{"type":"text","value":"CSS -> JavaScript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"CSSで定義した変数（カスタムプロパティ）をJavascriptで使う。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nJsからカスタムプロパティを定義したDOMのプロパティを取得する。"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n\n\n","filename":"child.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"\n\n\n\n\n"}]}]}]},{"type":"element","tag":"h3","props":{"id":"sassのfunctionに変数としてはつかえない"},"children":[{"type":"text","value":"Sassのfunctionに変数としてはつかえない"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sassの関数（function）に使う条件としては変数は使えない。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n例えば↓"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n","filename":"child.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"setup"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" color "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"ref"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"#008900"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":".canvas"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#97E1F1"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" v-bind("}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h2","props":{"id":"css---javascript"},"children":[{"type":"text","value":"CSS -> JavaScript"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"CSSで定義した変数（カスタムプロパティ）をJavascriptで使う。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nJsからカスタムプロパティを定義したDOMのプロパティを取得する。"}]},{"type":"element","tag":"code","props":{"code":"\n\n\n\n\n","filename":"child.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"v-for"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"i "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"of"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" canvasCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"box"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"key"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"i"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"data"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"      canvasCount"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"1"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"mounted"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" c "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"getComputedStyle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"(document."}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"querySelector"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":".box"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"))."}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"getPropertyValue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"--box-count"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":")"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BF9EEE"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":".canvasCount "}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" c"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F286C4"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#E7EE98"}},"children":[{"type":"text","value":"scss"}]},{"type":"element","tag":"span","props":{"style":{"color":"#DEE492"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"box"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  $"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"canvas-count:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" 6;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"  --"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"canvas-count:"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":" #{$"}]},{"type":"element","tag":"span","props":{"style":{"color":"#62E884"}},"children":[{"type":"text","value":"canvas-count"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F6F6F4"}},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tag":"h3","props":{"id":"sassのfunctionに変数としてはつかえない"},"children":[{"type":"text","value":"Sassのfunctionに変数としてはつかえない"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sassの関数（function）に使う条件としては変数は使えない。"},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\n例えば↓"}]},{"type":"element","tag":"code","props":{"code":"\n\n