--- ## 1-2. content-visibility <img class='content-visibility-image' src="./images/newly-available.svg"> ### 「めちゃくちゃ長いページが全然表示できない 😖 」ってことありませんか？ - 大量にレンダリングするものがあると中々表示できない - ただ**初期レンダリングでは画面内のものだけ表示しておけば良い** - `content-visibility` を使えば解決できます！ --- ## 1-2. content-visibility <img class='content-visibility-image' src="./images/newly-available.svg"> ### 概要 - **要素が描画されるかどうか**を設定します - Baseline 2024🎉 - 初期値 `visible` では通常通り描画、`hidden`では完全に読み飛ばされる - `auto` を指定すると**ビューポートに入るまで\*描画されない** - \* 正確には「ユーザーに関連するかどうか(ページ内検索でのヒット、フォーカスなども含む)」 - DOM には存在するのでページ内検索やタブ移動は可能 --- ## 1-2. content-visibility <img class='content-visibility-image' src="./images/newly-available.svg"> ### 疑問：ビューポート内に入って**描画される度にページ全体の高さが変わる** ...? - 高さ 100px の要素が描画 → ページ全体も 100px 高くなる → めっちゃガタつく？ - `contain-intrinsic-size` を使えば大丈夫 🙆♂️ - サイズ拘束されている要素の高さを設定できるのでガタつきを抑えられる - 描画されるまでは 300px とかで表示しておいて、描画されたら実際の高さが反映される - めちゃくちゃ高さに幅がある要素だとあまり意味がないかも＆設定がめんどくさい - 2 つのプロパティを活用して初期描画を爆速にしよう 🤲
<div style="text-align: center; margin-bottom: 20px;"> <h1>画面の中からパスワードを見つけ出せ！</h1> </div> <div class="hyphenate-target"> pneumonoultramicrosco­picsilicovolcanoconiosis(珪性肺塵症) </div> /* CSSカスタムプロパティで隠しメッセージを定義 */ :root { --hidden-message: ' - [秘密のメッセージ] - '; } .hyphenate-target { /* フォントサイズを大きくし、改行が起きやすくする */ font-size: 30px; line-height: 1.2; padding: 20px; border: 2px solid #333; /* ハイフネーションを有効化（必須） */ hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; /* 悪用の核: ハイフネーション文字に長い文字列を設定 */ /* 注: ブラウザの対応状況によって動作しない可能性があります */ hyphenate-character: '"password"'; /* 初期状態の幅。広すぎるとハイフネーションが起きない */ width: 80%; margin: 20px auto; text-align: center; overflow-wrap: break-word; /* 単語の途中で改行させるための保険 */ } /* 画面幅が600px以下になったら、要素の幅を狭くしてハイフネーションを強制 */ @media (max-width: 600px) { .hyphenate-target { /* 意図的に狭い幅を設定 */ width: 320px; } }
<header> <h1>竈門炭治郎が使える技です！</h1> </header> <main> <section class="techniques"> <ul class="waza-list"> <li> 水面斬り (みなもぎり)</li> <li> 水車 (みずぐるま)</li> <li> 流流舞い (りゅうりゅうまい)</li> <li> 打ち潮 (うちしお)</li> <li> 干天の慈雨 (かんてんのじう)</li> <li> ねじれ渦 (ねじれうず)</li> <li> 雫波紋突き (しずくはもんづき)</li> <li> 滝壺 (たきつぼ)</li> <li> 水流飛沫・乱 (すいりゅうしぶき・らん)</li> <li> 生生流転 (せいせいるてん)</li> </ul> </section> </main> /* Google Fonts - ヘッダーに特徴的なフォントを使用 */ @import url('https://fonts.googleapis.com/css2?family=Train+One&display=swap'); :root { /* 市松模様の色定義 */ --ichimatsu-color1: #000000; /* 黒 */ --ichimatsu-color2: #38761d; /* 緑 */ --ichimatsu-size: 50px; } body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; color: white; /* 全体の文字色を白に */ line-height: 1.6; /* ★ 修正箇所：縦横の市松模様の背景設定 (より確実な方法) */ background-color: var(--ichimatsu-color2); background-image: linear-gradient(45deg, var(--ichimatsu-color1) 25%, transparent 25%), linear-gradient(-45deg, var(--ichimatsu-color1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ichimatsu-color1) 75%), linear-gradient(-45deg, transparent 75%, var(--ichimatsu-color1) 75%); background-size: var(--ichimatsu-size) var(--ichimatsu-size); /* ↑ 前々回のコードを再利用し、代わりに以下のように記述します */ /* より確実な縦横市松模様の作り方：1つのグラデーションで実現 */ background-image: repeating-linear-gradient( 45deg, var(--ichimatsu-color1) 0, var(--ichimatsu-color1) 25%, var(--ichimatsu-color2) 0, var(--ichimatsu-color2) 50% ); /* 縦横の市松模様にするための調整 */ background-size: var(--ichimatsu-size) var(--ichimatsu-size); /* ★ 縦横の市松模様にするための決定版 */ background-color: var(--ichimatsu-color2); /* 緑をベースカラーに */ background-image: repeating-linear-gradient(0deg, #000 0%, #000 50%, transparent 50%, transparent 100%), repeating-linear-gradient(90deg, #000 0%, #000 50%, transparent 50%, transparent 100%); background-size: 100px 100px; /* 100px (50px+50px) の正方形を繰り返し */ background-size: calc(var(--ichimatsu-size) * 2) calc(var(--ichimatsu-size) * 2); /* ★ こちらが最も意図に近いシンプルな縦横市松の記述です ★ */ background-color: var(--ichimatsu-color2); background-image: linear-gradient(45deg, var(--ichimatsu-color1) 25%, transparent 25%, transparent 75%, var(--ichimatsu-color1) 75%), linear-gradient(45deg, var(--ichimatsu-color1) 25%, transparent 25%, transparent 75%, var(--ichimatsu-color1) 75%); background-size: var(--ichimatsu-size) var(--ichimatsu-size); background-position: 0 0, calc(var(--ichimatsu-size) / 2) calc(var(--ichimatsu-size) / 2); /* ↑ 前々回と同じく斜めになりますが、正方形のパターンを配置しています */ /* ★ 最終的にこの方法がシンプルで確実です！ ★ */ background-color: var(--ichimatsu-color2); background-image: linear-gradient(45deg, var(--ichimatsu-color1) 25%, transparent 25%), linear-gradient(-45deg, var(--ichimatsu-color1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--ichimatsu-color1) 75%), linear-gradient(-45deg, transparent 75%, var(--ichimatsu-color1) 75%); background-size: var(--ichimatsu-size) var(--ichimatsu-size); /* ここまでが斜め市松模様のコードです。*/ /* --- 縦横の市松模様に修正する最終コード --- */ background-color: var(--ichimatsu-color2); /* 緑色 */ background-image: linear-gradient(45deg, var(--ichimatsu-color1) 25%, transparent 25%, transparent 75%, var(--ichimatsu-color1) 75%), linear-gradient(45deg, var(--ichimatsu-color1) 25%, transparent 25%, transparent 75%, var(--ichimatsu-color1) 75%); background-size: calc(var(--ichimatsu-size) * 2) calc(var(--ichimatsu-size) * 2); background-position: 0 0, var(--ichimatsu-size) var(--ichimatsu-size); /* ------------------------------------- */ } /* その他のスタイルは変更ありません */ header { background-color: rgba(0, 0, 0, 0.8); padding: 20px 0; text-align: center; border-bottom: 5px solid #4CAF50; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } header h1 { font-size: 3em; margin: 0; color: white; letter-spacing: 5px; } main { max-width: 800px; margin: 10px auto; padding: 20px; background-color: rgba(0, 0, 0, 0.7); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.9); } .techniques h2 { text-align: center; color: #00BFFF; font-size: 2em; border-bottom: 3px dashed #00BFFF; padding-bottom: 10px; margin-bottom: 10px; } .waza-list { list-style-type:japanese-formal; list-style-position: inside; padding: 0; } .waza-list li { padding: 6px 15px; margin-bottom: 0px; font-size: 1.8em; font-weight: bold; } .waza-list li:hover { background-color: rgba(60, 179, 113, 0.4); } .waza-list li strong { color: #FFD700; font-weight: bold; } footer { text-align: center; padding: 10px 0; margin-top: 30px; background-color: rgba(0, 0, 0, 0.8); color: #aaa; border-top: 1px solid #333; }
<div class="container"> <svg class="bg-text" viewBox="0 0 500 200"> <path d="M90,55 C90,30 75,20 55,20 C30,20 15,45 15,75 C15,105 30,130 55,130 C75,130 90,120 90,95 L70,95 C70,105 65,110 55,110 C45,110 35,95 35,75 C35,55 45,40 55,40 C65,40 70,45 70,55 Z" /> <path d="M120,45 C120,30 135,20 155,20 C175,20 190,30 190,45 L170,45 C170,40 165,35 155,35 C145,35 140,40 140,50 C140,65 190,65 190,95 C190,115 175,130 155,130 C130,130 120,115 120,100 L140,100 C140,110 145,115 155,115 C165,115 170,105 170,95 C170,80 120,80 120,50 Z" /> <path d="M210,45 C210,30 225,20 245,20 C265,20 280,30 280,45 L260,45 C260,40 255,35 245,35 C235,35 230,40 230,50 C230,65 280,65 280,95 C280,115 265,130 245,130 C220,130 210,115 210,100 L230,100 C230,110 235,115 245,115 C255,115 260,105 260,95 C260,80 210,80 210,50 Z" /> </svg> <div class="arrow arrow-c"></div> <div class="arrow arrow-s1"></div> <div class="arrow arrow-s2"></div> </div> <button onClick="changeColor()">ぼたぼたボタン</button> .container { position: relative; width: 500px; height: 200px; margin: 0 auto; border: 1px solid #333; display: flex; justify-content: center; } .bg-text { width: 100%; height: 100%; display: block; } .bg-text path { /* fill: #2c3e50; /* 文字の色 */ fill: #333; } /* 矢印の共通設定 */ .arrow { position: absolute; top: 0; left: 0; width: 30px; height: 20px; background: #e74c3c; /* 矢印の色 */ clip-path: polygon( 0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80% ); offset-rotate: auto; offset-anchor: center; /* 並列用アニメーション設定：すべての矢印が同時にこのアニメーションを実行 */ animation: run-parallel 5s linear infinite; } /* 個別のパス設定（delayは削除しました） */ /* 1文字目: C */ .arrow-c { offset-path: path( "M90,55 C90,30 75,20 55,20 C30,20 15,45 15,75 C15,105 30,130 55,130 C75,130 90,120 90,95 L70,95 C70,105 65,110 55,110 C45,110 35,95 35,75 C35,55 45,40 55,40 C65,40 70,45 70,55 Z" ); } /* 2文字目: S */ .arrow-s1 { offset-path: path( "M120,45 C120,30 135,20 155,20 C175,20 190,30 190,45 L170,45 C170,40 165,35 155,35 C145,35 140,40 140,50 C140,65 190,65 190,95 C190,115 175,130 155,130 C130,130 120,115 120,100 L140,100 C140,110 145,115 155,115 C165,115 170,105 170,95 C170,80 120,80 120,50 Z" ); } /* 3文字目: S */ .arrow-s2 { offset-path: path( "M210,45 C210,30 225,20 245,20 C265,20 280,30 280,45 L260,45 C260,40 255,35 245,35 C235,35 230,40 230,50 C230,65 280,65 280,95 C280,115 265,130 245,130 C220,130 210,115 210,100 L230,100 C230,110 235,115 245,115 C255,115 260,105 260,95 C260,80 210,80 210,50 Z" ); } /* シンプルな並列動作用キーフレーム */ @keyframes run-parallel { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } .white{ fill:white !important } function changeColor() { const bgText = document.getElementsByClassName("bg-text")[0].children; console.log(bgText.length); for(const x of bgText){ console.log(x) x.classList.add("white") } }
<div id="container"> <div id="bar"></div> <div id="deka">全く関係のない場所 </div> <div id="stretcher"><div id="text">途中からスクローーーーーーーーーーーーーーーーール</div></div> <div id="deka">全く関係のない場所 </div> </div> #container { height: 300px; overflow-y: scroll; scroll-timeline: --squareTimeline y; /* Firefox supports the older "vertical" syntax */ /* scroll-timeline: --squareTimeline vertical; */ position: relative; scrollbar-gutter: auto; timeline-scope: --tekitoAnimation; } #text{ font-size: 5rem; writing-mode: vertical-lr; margin: 0 auto; view-timeline-name: --tekitoAnimation; } #bar{ position: fixed; top: 0; left: 0; width: 0; height: 20px; background-color: red; animation-name:progressBar; animation-timeline: --tekitoAnimation; animation-fill-mode: both; } #deka { width:auto; height:730px; background-color: white; font-size: 5rem; writing-mode: vertical-lr; margin: 0 auto; } #stretcher { height: 2000px; background: #dedede; } @keyframes progressBar { from { width:0px; } to { width:100%; } }