この記事では、主に CSS を使用した、非常にシンプルなブラウザベースのコード エディターを作成する方法について説明します。これは元々、構(gòu)築中の CMS でユーザーに JSON を編集させる必要があったときに構(gòu)築しました。

コードと実際の例にジャンプしたいだけの場(chǎng)合は、ここからどうぞ。コードはここにあり、実際の例はここにあります

コンテンツ編集は最?lèi)櫎扦?..

獨(dú)自のコード エディターを構(gòu)築することを考えたことがあるなら、おそらく contenteditable に注目したことがあるでしょう。 contenteditable は多くの狀況に最適ですが、入力中のコンテンツの更新に関して大きな問(wèn)題が 1 つあります。エディターでコードが変更されたときにそのコードを構(gòu)文ハイライト表示した後、カーソルを元の場(chǎng)所に戻すことはほぼ不可能です。

私の場(chǎng)合、巨大で手のかかるライブラリに手を伸ばすことなく、非常に最小限のものを望んでいました。私は、主に CSS を使用し、JavaScript を使用して構(gòu)文強(qiáng)調(diào)表示された出力を作成し、プレビューを更新するだけの非常に単純なエディターを構(gòu)築できるかどうかを確認(rèn)することにしました。

通常の に入力したかったのですが、ただし、構(gòu)文が強(qiáng)調(diào)表示されたコードの別のプレビューを更新するだけです。 </p> <h2> 錯(cuò)覚の仕組み </h2> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173041269277729.jpg" class="lazy" alt="A Simple, mostly CSS code editor"></p> <h2> HTMLコード </h2> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <ul> <li>通常の <textarea>透明テキスト付き</li> <li>A <div>構(gòu)文を強(qiáng)調(diào)表示したコードが入力されます。 <li><textarea> をラップするコンテナそしてプレビュー <div>これにより、一緒にスクロールして整列したままにすることができます。 <h2> CSS </h2> <p>これがエディターに使用した CSS 全體です。<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h3> 要素を重ねる </h3> <p>ここでの重要な部分の 1 つは、表示グリッドを使用してテキストエリアとプレビューをオーバーレイすることです<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>コンテナ內(nèi)の 2 つの要素をオーバーラップさせるために fr ユニットを使用しています。 fr について詳しくは、こちらの CSSTricks をご覧ください。</p> <h3> テキストエリアとプレビューを同じように固定する </h3> <p>同じルールをプレビューとテキストエリアに適用していることに気づくかもしれません。これにより、正確にオーバーラップすることが保証されます。<br> </p> <pre class="brush:php;toolbar:false">#editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } </pre> <h3> テキストエリアを透明にする </h3> <p>テキストの色に rgba を使用すると、テキストを完全に透明にすることができるので、プレビューを選択して編集しているように見(jiàn)えます。<br> </p> <pre class="brush:php;toolbar:false">#editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <h2> ちょっとした Javascript </h2> <p>これをすべて結(jié)び付けるには、少量の Javascript が必要です。必要なものを見(jiàn)てみましょう。<br> </p> <pre class="brush:php;toolbar:false">const $preview = document.querySelector("#editor .preview"); const $code = document.querySelector("#editor .code"); function mirror() { // make textarea grow to height of content so we can scroll together $code.style.height = $code.scrollHeight; // update the preview underlay with the syntax highlight $preview.innerHTML = Prism.highlight( $code.value, Prism.languages.javascript, "javascript", ); } // insert two spaces on tab $code.addEventListener("keydown", (ev) => { if (ev.code === "Tab") { ev.preventDefault(); $code.setRangeText(" ", $code.selectionStart, $code.selectionStart, "end"); mirror(); } }); $code.addEventListener("input", mirror); mirror(); </pre> <blockquote> <p>これには Prism を使用しますが、お好きなものを使用してください。 </p> </blockquote> <h3> ここでは、mirror() 関數(shù)がいくつかのことを行っています。 </h3> <pre class="brush:php;toolbar:false"><div id="editor"> <div class="preview"></div> <textarea class="code" spellcheck="false"></textarea> </div> </pre> <p>これにより、入力中に <textarea> の高さが確実に変更されます。 <textarea> の代わりにコンテナがスクロールするように拡大します。自體。おそらく、これが「自動(dòng)拡張」テキストエリアの作成に使用されているのを見(jiàn)たことがあるでしょう。<br> </p> <pre class="brush:php;toolbar:false">html, body { height: 100vh; width: 100vw; padding: 0; margin: 0; } #editor { height: 100%; width: 100%; box-sizing: border-box; display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; padding: 2rem; background-color: #1a1723; } #editor .code, #editor .preview { all: unset; } #editor .code, #editor .preview { height: auto; grid-column: 1 / 1; grid-row: 1 / 1; font-family: Monaco, monospace; font-size: 16px; resize: none; line-height: 24px; white-space: pre-wrap; overflow: hidden; } #editor .preview { pointer-events: none; color: #ccc; } #editor .code { color: rgba(255, 255, 255, 0); caret-color: magenta; } </pre> <p>次に、Prism を使用して <textarea> からコードを取得します。構(gòu)文で強(qiáng)調(diào)表示し、結(jié)果をプレビューに配置します </p> <div> <h3> タブのインデントのサポート </h3> <p>コードを編集するときは常にインデントできる必要があります。このコードにより、誰(shuí)かがタブを押したときにスペースを追加し、mirror() を再度呼び出してプレビューを更新できます。<br> </p> <pre class="brush:php;toolbar:false">#editor { ... display: grid; grid-template: 1fr / 1fr; place-items: top; overflow: auto; ... } </pre> <p>最後に、<textarea> の入力用にeventListenerを追加します。変更するたびに、mirror() を使用してプレビューを更新します。次に、<textarea> にすでにコードがある場(chǎng)合に備えて、最初に Mirror() を呼び出します。ページ読み込み時(shí)。 </p> <p>それだけです!明らかに、何千行ものコードを編集している場(chǎng)合、構(gòu)文強(qiáng)調(diào)表示されたコードをすべて更新するとパフォーマンスの問(wèn)題が発生する可能性があります。このアイデアを改善する 1 つの方法は、「仮想」スクローラーを作成し、コンテナー ビューに表示されるコードのみを強(qiáng)調(diào)表示することです。これが VsCode のエディタのやり方です。 </p> <p>これを試してみたい場(chǎng)合は、<br> を見(jiàn)つけてください。 コードと GitHub 上の動(dòng)作例</p> </div> </div> </li> </div> </li> </ul><p>以上がシンプルで主に CSS コードエディターの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">このウェブサイトの聲明</div> <div>この記事の內(nèi)容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰屬します。このサイトは、それに相當(dāng)する法的責(zé)任を負(fù)いません。盜作または侵害の疑いのあるコンテンツを見(jiàn)つけた場(chǎng)合は、admin@php.cn までご連絡(luò)ください。</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819578.html" title="KB5060533を修正する方法Windows 10にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060533を修正する方法Windows 10にインストールできませんか？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819730.html" title="砂丘：覚醒 - 斷熱布を入手する場(chǎng)所" class="phpgenera_Details_mainR4_bottom_title">砂丘：覚醒 - 斷熱布を入手する場(chǎng)所</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819016.html" title="Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法" class="phpgenera_Details_mainR4_bottom_title">Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 か月前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819994.html" title="KB5060999を修正する方法Windows 11にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060999を修正する方法Windows 11にインストールできませんか？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819536.html" title="汚染された聖杯のギルドガイド：アバロンの崩壊" class="phpgenera_Details_mainR4_bottom_title">汚染された聖杯のギルドガイド：アバロンの崩壊</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ja/article.html">もっと見(jiàn)る</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットAIツール</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>脫衣畫(huà)像を無(wú)料で</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>リアルなヌード寫(xiě)真を作成する AI 搭載アプリ</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>寫(xiě)真から衣服を削除するオンライン AI ツール。</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI衣類(lèi)リムーバー</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ja/ai">もっと見(jiàn)る</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>人気の記事</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819578.html" title="KB5060533を修正する方法Windows 10にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060533を修正する方法Windows 10にインストールできませんか？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819730.html" title="砂丘：覚醒 - 斷熱布を入手する場(chǎng)所" class="phpgenera_Details_mainR4_bottom_title">砂丘：覚醒 - 斷熱布を入手する場(chǎng)所</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819016.html" title="Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法" class="phpgenera_Details_mainR4_bottom_title">Gmailログイン：Gmail -Minitoolからサインアップ、サインイン、またはサインアウトする方法</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 か月前</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819994.html" title="KB5060999を修正する方法Windows 11にインストールできませんか？" class="phpgenera_Details_mainR4_bottom_title">KB5060999を修正する方法Windows 11にインストールできませんか？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>3週間前</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/1796819536.html" title="汚染された聖杯のギルドガイド：アバロンの崩壊" class="phpgenera_Details_mainR4_bottom_title">汚染された聖杯のギルドガイド：アバロンの崩壊</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4週間前</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ja/article.html">もっと見(jiàn)る</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>ホットツール</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="メモ帳++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/toolset/development-tools/92" title="メモ帳++7.3.1" class="phpmain_tab2_mids_title"> <h3>メモ帳++7.3.1</h3> </a> <p>使いやすく無(wú)料のコードエディター</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 中國(guó)語(yǔ)版" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/toolset/development-tools/93" title="SublimeText3 中國(guó)語(yǔ)版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 中國(guó)語(yǔ)版</h3> </a> <p>中國(guó)語(yǔ)版、とても使いやすい</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ゼンドスタジオ 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/toolset/development-tools/121" title="ゼンドスタジオ 13.0.1" class="phpmain_tab2_mids_title"> <h3>ゼンドスタジオ 13.0.1</h3> </a> <p>強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="ドリームウィーバー CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/toolset/development-tools/469" title="ドリームウィーバー CS6" class="phpmain_tab2_mids_title"> <h3>ドリームウィーバー CS6</h3> </a> <p>ビジュアル Web 開(kāi)発ツール</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac版" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://miracleart.cn/ja/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神レベルのコード編集ソフト（SublimeText3）</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ja/ai">もっと見(jiàn)る</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>ホットトピック</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/gmailyxdlrkzn" title="Gmailメールのログイン入り口はどこですか？" class="phpgenera_Details_mainR4_bottom_title">Gmailメールのログイン入り口はどこですか？</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8518</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/java-tutorial" title="Java チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Java チュートリアル</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1744</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/cakephp-tutor" title="CakePHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">CakePHP チュートリアル</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1598</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/laravel-tutori" title="Laravel チュートリアル" class="phpgenera_Details_mainR4_bottom_title">Laravel チュートリアル</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1538</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://miracleart.cn/ja/faq/php-tutorial" title="PHP チュートリアル" class="phpgenera_Details_mainR4_bottom_title">PHP チュートリアル</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1397</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://miracleart.cn/ja/faq/zt">もっと見(jiàn)る</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796819239.html" title="一部のページにのみCSSを含めるにはどうすればよいですか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174957130281670.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="一部のページにのみCSSを含めるにはどうすればよいですか？" /> </a> <a href="http://miracleart.cn/ja/faq/1796819239.html" title="一部のページにのみCSSを含めるにはどうすればよいですか？" class="phphistorical_Version2_mids_title">一部のページにのみCSSを含めるにはどうすればよいですか？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 11, 2025 am 12:01 AM</span> <p class="Articlelist_txts_p">特定のページにCSSを選択的に含める方法は3つあります。1。インラインCSS。頻繁にアクセスされない、または一意のスタイルが必要なページに適しています。 2。柔軟性が必要な狀況に適したJavaScript條件を使用して、外部CSSファイルをロードします。 3。サーバー側(cè)に封じ込められ、サーバー側(cè)の言語(yǔ)を使用したシナリオに適しています。このアプローチは、ウェブサイトのパフォーマンスと保守性を最適化できますが、モジュール性とパフォーマンスのバランスが必要です。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796819001.html" title="Flexbox vsグリッド：CSSレイアウトの重要な違いを理解する" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/174948499050663.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Flexbox vsグリッド：CSSレイアウトの重要な違いを理解する" /> </a> <a href="http://miracleart.cn/ja/faq/1796819001.html" title="Flexbox vsグリッド：CSSレイアウトの重要な違いを理解する" class="phphistorical_Version2_mids_title">Flexbox vsグリッド：CSSレイアウトの重要な違いを理解する</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 12:03 AM</span> <p class="Articlelist_txts_p">flexBoxisidealforone-dimensionAllayouts、whilegridsuitStwo-dimension、complexLayouts.useflexboxforAliingemsinasinginasindgridgridgridgridgridgridgridgrololoveroversandcolumnsintigns。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796819129.html" title="HTMLポップオーバーを使用して自動(dòng)閉鎖通知を作成します" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174951991745342.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTMLポップオーバーを使用して自動(dòng)閉鎖通知を作成します" /> </a> <a href="http://miracleart.cn/ja/faq/1796819129.html" title="HTMLポップオーバーを使用して自動(dòng)閉鎖通知を作成します" class="phphistorical_Version2_mids_title">HTMLポップオーバーを使用して自動(dòng)閉鎖通知を作成します</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 10, 2025 am 09:45 AM</span> <p class="Articlelist_txts_p">HTMLポップオーバー屬性は、要素をボタンまたはJavaScriptで開(kāi)閉できるトップレイヤー要素に変換します。ポップオーバーは多くの方法で卻下することができますが、それらを自動(dòng)するオプションはありません。 Preethiにはあなたができるテクニックがあります</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796823628.html" title="「レンダリングブロッキングCSS」とは何ですか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="「レンダリングブロッキングCSS」とは何ですか？" /> </a> <a href="http://miracleart.cn/ja/faq/1796823628.html" title="「レンダリングブロッキングCSS」とは何ですか？" class="phphistorical_Version2_mids_title">「レンダリングブロッキングCSS」とは何ですか？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span> <p class="Articlelist_txts_p">ブラウザは、特にインポートされたスタイルシート、ヘッダーのインラインCSS、および最適化されていないメディアクエリスタイルを使用して、ブラウザがインラインおよび外部CSSをデフォルトで主要なリソースとして表示するため、ページレンダリングをブロックします。 1.重要なCSSを抽出し、HTMLに埋め込みます。 2。JavaScriptを介して非クリティカルなCSSの読み込みを遅らせる。 3.メディア屬性を使用して、印刷スタイルなどのロードを最適化します。 4.リクエストを減らすためにCSSを圧縮およびマージします。ツールを使用してキーCSSを抽出し、REL = "Preload"非同期負(fù)荷を組み合わせ、過(guò)度の分割と複雑なスクリプト制御を避けるためにメディア遅延荷重を合理的に使用することをお?jiǎng)幛幛筏蓼埂?/p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796820543.html" title="Figmaでロットを使用する方法" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174986743677204.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Figmaでロットを使用する方法" /> </a> <a href="http://miracleart.cn/ja/faq/1796820543.html" title="Figmaでロットを使用する方法" class="phphistorical_Version2_mids_title">Figmaでロットを使用する方法</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 14, 2025 am 10:17 AM</span> <p class="Articlelist_txts_p">次のチュートリアルでは、FigmaでLottieアニメーションを作成する方法を紹介します。 2つのカラフルなデザインを使用して、Figmaでアニメーション化する方法を説明し、FigmaからL(zhǎng)ottie Animationsに移行する方法を示します。必要なのは無(wú)料の図だけです</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796820287.html" title="境界の破壊：（s）CSSでタングラムパズルを構(gòu)築します" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/242/473/174978559468682.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="境界の破壊：（s）CSSでタングラムパズルを構(gòu)築します" /> </a> <a href="http://miracleart.cn/ja/faq/1796820287.html" title="境界の破壊：（s）CSSでタングラムパズルを構(gòu)築します" class="phphistorical_Version2_mids_title">境界の破壊：（s）CSSでタングラムパズルを構(gòu)築します</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 13, 2025 am 11:33 AM</span> <p class="Articlelist_txts_p">少なくとも低レベルのロジックとパズルの動(dòng)作に関しては、SASSがJavaScriptを置き換えることができることが判明しました。マップ、ミックス、機(jī)能、そしてたくさんの數(shù)學(xué)だけで、私たちはタングラムのパズルを生き生きとさせることができました。</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796822133.html" title="外部対內(nèi)部CSS：最良のアプローチは何ですか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="外部対內(nèi)部CSS：最良のアプローチは何ですか？" /> </a> <a href="http://miracleart.cn/ja/faq/1796822133.html" title="外部対內(nèi)部CSS：最良のアプローチは何ですか？" class="phphistorical_Version2_mids_title">外部対內(nèi)部CSS：最良のアプローチは何ですか？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span> <p class="Articlelist_txts_p">TheBestAppRoachforCSDependsonTheProject'sSpecificNeeds.forLargerProjects、externalCssissisbetterduetoMaintainasiladability; forsmallerProjectsOrsingLe-PageApplications、internalcsSmightBemoresuitable.it</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://miracleart.cn/ja/faq/1796821588.html" title="私のCSSは小文字でなければなりませんか？" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="私のCSSは小文字でなければなりませんか？" /> </a> <a href="http://miracleart.cn/ja/faq/1796821588.html" title="私のCSSは小文字でなければなりませんか？" class="phphistorical_Version2_mids_title">私のCSSは小文字でなければなりませんか？</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span> <p class="Articlelist_txts_p">いいえ、CSSDOESNOTHAVETOBEINLOWERCASE。</p> </div> </div> <a href="http://miracleart.cn/ja/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>福祉オンライン PHP トレーニング，PHP 學(xué)習(xí)者の迅速な成長(zhǎng)を支援します！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://miracleart.cn/ja/about/us.html">私たちについて</a> <a href="http://miracleart.cn/ja/about/disclaimer.html">免責(zé)事項(xiàng)</a> <a href="http://miracleart.cn/ja/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="1reio" class="pl_css_ganrao" style="display: none;"><menuitem id="1reio"></menuitem><ul id="1reio"></ul><rp id="1reio"></rp><var id="1reio"><dfn id="1reio"></dfn></var><th id="1reio"><b id="1reio"></b></th><sup id="1reio"></sup><font id="1reio"></font><acronym id="1reio"><thead id="1reio"><form id="1reio"></form></thead></acronym><p id="1reio"></p><strong id="1reio"><mark id="1reio"></mark></strong><span id="1reio"><abbr id="1reio"></abbr></span><i id="1reio"><sup id="1reio"><address id="1reio"><em id="1reio"></em></address></sup></i><var id="1reio"><meter id="1reio"><table id="1reio"><ul id="1reio"></ul></table></meter></var><optgroup id="1reio"><dl id="1reio"></dl></optgroup><nobr id="1reio"><td id="1reio"><address id="1reio"><style id="1reio"></style></address></td></nobr><address id="1reio"></address><legend id="1reio"><sub id="1reio"><listing id="1reio"></listing></sub></legend><progress id="1reio"></progress><dfn id="1reio"></dfn><i id="1reio"></i><form id="1reio"></form><strong id="1reio"></strong><small id="1reio"></small><nobr id="1reio"><tt id="1reio"><label id="1reio"><big id="1reio"></big></label></tt></nobr><fieldset id="1reio"></fieldset><tfoot id="1reio"></tfoot><td id="1reio"><thead id="1reio"></thead></td><option id="1reio"><bdo id="1reio"><em id="1reio"></em></bdo></option><b id="1reio"></b><pre id="1reio"></pre><dfn id="1reio"><i id="1reio"><th id="1reio"></th></i></dfn><strong id="1reio"></strong><font id="1reio"><th id="1reio"></th></font><strike id="1reio"></strike><legend id="1reio"></legend><dfn id="1reio"><pre id="1reio"></pre></dfn><form id="1reio"><li id="1reio"></li></form><i id="1reio"></i><video id="1reio"><style id="1reio"><font id="1reio"></font></style></video><ruby id="1reio"><acronym id="1reio"></acronym></ruby><ul id="1reio"></ul><rp id="1reio"></rp><samp id="1reio"></samp><em id="1reio"><strike id="1reio"><noframes id="1reio"></noframes></strike></em><thead id="1reio"><var id="1reio"><legend id="1reio"></legend></var></thead><var id="1reio"><legend id="1reio"><form id="1reio"><p id="1reio"></p></form></legend></var><b id="1reio"><dfn id="1reio"><progress id="1reio"><abbr id="1reio"></abbr></progress></dfn></b><nobr id="1reio"><blockquote id="1reio"></blockquote></nobr><ol id="1reio"></ol><tt id="1reio"></tt><bdo id="1reio"><address id="1reio"><strike id="1reio"><sub id="1reio"></sub></strike></address></bdo><dfn id="1reio"></dfn><form id="1reio"></form><mark id="1reio"><pre id="1reio"><tbody id="1reio"><acronym id="1reio"></acronym></tbody></pre></mark><menuitem id="1reio"></menuitem><code id="1reio"></code><track id="1reio"><small id="1reio"><div id="1reio"><dfn id="1reio"></dfn></div></small></track><ol id="1reio"></ol><font id="1reio"><bdo id="1reio"><em id="1reio"><big id="1reio"></big></em></bdo></font><div id="1reio"></div><dl id="1reio"><ul id="1reio"></ul></dl><pre id="1reio"><pre id="1reio"><rt id="1reio"><output id="1reio"></output></rt></pre></pre><ins id="1reio"></ins><pre id="1reio"></pre><cite id="1reio"><dl id="1reio"></dl></cite><tt id="1reio"><acronym id="1reio"><dfn id="1reio"><i id="1reio"></i></dfn></acronym></tt><thead id="1reio"></thead><tbody id="1reio"></tbody><nobr id="1reio"><div id="1reio"><em id="1reio"><b id="1reio"></b></em></div></nobr><strong id="1reio"></strong><nobr id="1reio"><tt id="1reio"><th id="1reio"><samp id="1reio"></samp></th></tt></nobr><menuitem id="1reio"></menuitem><progress id="1reio"></progress><listing id="1reio"><big id="1reio"></big></listing><pre id="1reio"><tbody id="1reio"><thead id="1reio"></thead></tbody></pre><dfn id="1reio"><dl id="1reio"><menuitem id="1reio"></menuitem></dl></dfn><pre id="1reio"><video id="1reio"><span id="1reio"></span></video></pre><source id="1reio"><th id="1reio"></th></source><big id="1reio"></big><track id="1reio"><form id="1reio"><th id="1reio"><address id="1reio"></address></th></form></track><sub id="1reio"></sub><u id="1reio"><th id="1reio"></th></u><thead id="1reio"></thead><ol id="1reio"></ol><acronym id="1reio"></acronym><var id="1reio"><dfn id="1reio"><big id="1reio"><u id="1reio"></u></big></dfn></var><button id="1reio"></button><thead id="1reio"><legend id="1reio"></legend></thead><menuitem id="1reio"><acronym id="1reio"></acronym></menuitem><abbr id="1reio"><pre id="1reio"><i id="1reio"></i></pre></abbr><i id="1reio"></i><ruby id="1reio"><wbr id="1reio"></wbr></ruby><dd id="1reio"><div id="1reio"></div></dd><kbd id="1reio"></kbd><form id="1reio"><meter id="1reio"></meter></form><em id="1reio"><strike id="1reio"><tt id="1reio"></tt></strike></em><acronym id="1reio"><strike id="1reio"><pre id="1reio"><thead id="1reio"></thead></pre></strike></acronym><th id="1reio"></th><nobr id="1reio"><tt id="1reio"><label id="1reio"></label></tt></nobr><center id="1reio"><td id="1reio"></td></center><output id="1reio"><input id="1reio"><ruby id="1reio"><object id="1reio"></object></ruby></input></output><strong id="1reio"><table id="1reio"><label id="1reio"><b id="1reio"></b></label></table></strong><nav id="1reio"><tfoot id="1reio"><strong id="1reio"><meter id="1reio"></meter></strong></tfoot></nav><em id="1reio"><strike id="1reio"><tt id="1reio"><delect id="1reio"></delect></tt></strike></em><nav id="1reio"><label id="1reio"><samp id="1reio"><strike id="1reio"></strike></samp></label></nav><em id="1reio"><big id="1reio"><dfn id="1reio"></dfn></big></em><sup id="1reio"></sup><nobr id="1reio"><th id="1reio"><wbr id="1reio"><code id="1reio"></code></wbr></th></nobr><thead id="1reio"><address id="1reio"><rp id="1reio"><p id="1reio"></p></rp></address></thead><sup id="1reio"><legend id="1reio"><nobr id="1reio"></nobr></legend></sup><strong id="1reio"><form id="1reio"><label id="1reio"><address id="1reio"></address></label></form></strong><div id="1reio"></div><dfn id="1reio"></dfn><blockquote id="1reio"></blockquote><sup id="1reio"></sup><tr id="1reio"><kbd id="1reio"><nav id="1reio"><optgroup id="1reio"></optgroup></nav></kbd></tr><tbody id="1reio"><thead id="1reio"></thead></tbody><small id="1reio"><font id="1reio"></font></small><label id="1reio"></label><pre id="1reio"></pre><acronym id="1reio"><style id="1reio"><i id="1reio"><sup id="1reio"></sup></i></style></acronym><meter id="1reio"><dl id="1reio"></dl></meter><acronym id="1reio"></acronym><menuitem id="1reio"></menuitem><em id="1reio"><strike id="1reio"><noframes id="1reio"></noframes></strike></em><ol id="1reio"><abbr id="1reio"></abbr></ol><thead id="1reio"></thead><strike id="1reio"><delect id="1reio"><abbr id="1reio"><legend id="1reio"></legend></abbr></delect></strike><tbody id="1reio"></tbody><wbr id="1reio"></wbr><dfn id="1reio"></dfn><kbd id="1reio"></kbd><legend id="1reio"><nobr id="1reio"></nobr></legend><noframes id="1reio"><fieldset id="1reio"><em id="1reio"><dl id="1reio"></dl></em></fieldset></noframes><em id="1reio"><big id="1reio"></big></em><span id="1reio"><meter id="1reio"><u id="1reio"></u></meter></span><style id="1reio"><pre id="1reio"></pre></style><output id="1reio"><input id="1reio"></input></output><blockquote id="1reio"></blockquote><sup id="1reio"></sup><kbd id="1reio"><nav id="1reio"></nav></kbd><listing id="1reio"><center id="1reio"></center></listing><output id="1reio"><center id="1reio"></center></output><legend id="1reio"><tt id="1reio"><th id="1reio"><form id="1reio"></form></th></tt></legend><abbr id="1reio"><input id="1reio"></input></abbr><ins id="1reio"></ins><pre id="1reio"><li id="1reio"></li></pre><tr id="1reio"></tr><u id="1reio"><acronym id="1reio"><mark id="1reio"></mark></acronym></u></div> </html>