CSS大解剖 2日目: 「文書とボックス木」

本稿は、2024年2月頃に書き溜めていたシリーズです。最後まで温存させるのが勿体ないので、未完成ですがそのまま公開します(公開日: 2025/9/21)。そのため、内容の重複や記述方針の不一致があるかもしれませんが、ご理解ください。

CSSの仕様を理解するために、1日ごとにテーマを決めて説明する企画2日目です。今日のテーマは「文書とボックス木」です。

文書

CSSの処理モデルにおいて、 文書 (document) とはCSSのスタイルが適用される対象のことです。これはほとんどの場合HTML文書なので、以降では文書はHTML文書のことであるとします。

DOM

HTML文書の形式的な構造はDOMで規定されています。DOMにおいて、文書はノードの木構造として定義されています。

ノードはNodeクラスのインスタンスですが、Nodeには様々なサブクラスがあります。

図: Nodeのクラス図。Document, Text, Elementが最も重要

この中でも重要なのが Element, Text, Document の3種類です。

Element はHTMLのタグ ( ～ ) で囲まれた部分に対応するノードです。



Text はHTMLでタグなどの特別な構文を使わずに書かれた部分(※文字参照は含む)です。

Document はDOMのルート (最上位ノード) をあらわす特別なノードで、JavaScriptの document に対応します。原則としてDocumentTypeノードと最上位要素の2つの子を持ちます。


最上位ノードと最上位要素は異なることに注意してください。最上位ノードは Document のインスタンス (document) であり、最上位要素は  要素です。  要素は HTMLHtmlElementの要素です。



 DOM: 要素、タグ、タグ名
「要素」と「タグ」の区別が曖昧であれば、ここで使い分けを確認しておきましょう。たとえば以下のコード断片を考えてみます。

h1>Welcome!h1>
p>Lorem ipsum dolor sit ametp>
p>The quick fox jumps overp>




タグ (tag) とは

狭義の タグ (tag) は、  と > で囲まれた部分です。先ほどのソースコードの場合、タグは , , , ,  (2個目),  (2個目) の6つです。

タグはHTMLソースコード上の概念であり、DOM上の概念としては存在しません。



タグ名 (tag name) のことをタグと呼ぶこともあります。先ほどのソースコードの場合、コード中に出現するタグ名は h1 と p の2種類です。



要素 (element) は、大まかには、対応する開きタグと閉じタグで囲まれた部分のことです。先ほどのソースコードの場合、要素は3つあります。



 DOM: 空白の扱い
HTML文書においては空白 (スペース文字、タブ、改行など) がある程度特別扱いされています。これは、DOMより前に処理されているものとDOMより後に処理されているものに大別できます。

 DOMより前に処理されるもの
DOMになった時点で元のデータが失われているので、CSSでどう設定しても元の状態を復元することはできません。
なお、JavaScriptでテキストノードを直接追加した場合はこれらの処理の影響を受けません。たとえば、この方法を使えばU+000D Carriage Returnを含むテキストノードを作ることもできます。

 改行の正規化
HTMLソースコード中に直接出現する改行文字は正規化されます。いわゆるCRやCRLF形式の改行はLF形式の改行に変換されます。

 早期空白文字
 より前の空白はパース時に除去されます。たとえば、以下のソースコードを考えます。


doctype html>
html>
  head>
    meta charset="utf-8">


ここで空白は以下のようにパースされます。

doctype html>html>head>⏎
␣␣␣␣meta charset="utf-8">⏎



 複数行テキスト領域の特別処理

, </code> および非推奨タグである <code><listing/></code> の直後に改行が来た場合、最初の1文字に限り<a rel="noopener nofollow" target="_blank" href="https://html.spec.whatwg.org/multipage/parsing.html#the-before-head-insertion-mode:~:text=Newlines%20at%20the%20start%20of%20pre%20blocks%20are%20ignored%20as%20an%20authoring%20convenience.">パース時に除去されます</a>。</p>
<h3 id="dom%E3%82%88%E3%82%8A%E3%82%82%E5%BE%8C%E3%81%AB%E5%87%A6%E7%90%86%E3%81%95%E3%82%8C%E3%82%8B%E3%82%82%E3%81%AE" data-line="82" class="code-line">
 DOMよりも後に処理されるもの</h3>
<p data-line="84" class="code-line">CSSの規定により空白が特殊処理されるケースがいくつかあります。ここではいくつかの例を抜粋します。</p>

<h2 id="dom%3A-%E3%82%B7%E3%83%A3%E3%83%89%E3%82%A6%E6%9C%A8" data-line="90" class="code-line">
 DOM: シャドウ木</h2>
<p data-line="92" class="code-line">DOMの要素はいわゆる「子ノード」とは別に<a rel="noopener nofollow" target="_blank" href="https://dom.spec.whatwg.org/#concept-element-shadow-root">(ノードに関連づけられた)<strong>シャドウルート (shadow root)</strong></a>を持つことがあります。シャドウルートは主に<a rel="noopener nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">Web Components</a>を実現するための要素技術で、たとえば</p>
<div class="code-block-container"><pre class="language-html"><code class="language-html code-line" data-line="94"><span class="token tag"><span class="token tag"><span class="token punctuation">custom-accordion</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>summary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>今日のごはん<span class="token tag"><span class="token tag"><span class="token punctuation"/>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">ul</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>details<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>ごはん<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>鶏もも肉の照り焼き<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>もやしのナムル<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>玉ねぎのバター炒めスープ<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"/>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"/>custom-accordion</span><span class="token punctuation">></span></span>
</span></span></span></span></span></span></span></code></pre>
</div>
<p data-line="106" class="code-line">のようなコードがあったときに、 <code><custom-accordion/></code> を展開して</p>
<div class="code-block-container">
<pre class="language-html"><code class="language-html code-line" data-line="108"><span class="token tag"><span class="token tag"><span class="token punctuation">details</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.custom-accordion-details<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">summary</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>.custom-accordion-summary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">div</span><span class="token punctuation">></span></span>今日のごはん<span class="token tag"><span class="token tag"><span class="token punctuation"/>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">ul</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>ごはん<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>鶏もも肉の照り焼き<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>もやしのナムル<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">li</span><span class="token punctuation">></span></span>玉ねぎのバター炒めスープ<span class="token tag"><span class="token tag"><span class="token punctuation"/>li</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation"/>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"/>details</span><span class="token punctuation">></span></span>
</span></span></span></span></span></span></span></span></code></pre>
</div>
<p data-line="120" class="code-line">のように描画するといったことを可能にします。</p>
<p data-line="122" class="code-line">このときに問題になるのが、「展開前のDOMツリー」と「展開後のDOMツリー」をどう共存させるかという問題です。ここで、展開前のDOMツリーは「子ノード」として、展開後のDOMツリーは「関連づけられたシャドウルート」として表現します。</p>
<p data-line="124" class="code-line">このようなケースでは、実際に描画したいのは<strong>展開後のDOMツリー</strong>です。そこで、CSS Scoping Module (※まだWorking Draft段階の仕様) では<a rel="noopener nofollow" target="_blank" href="https://www.w3.org/TR/css-scoping-1/#shadow-dom">シャドウルートが存在するときはそちらを描画し、子ノードは利用しない</a>よう指定されています。加えて、 <code><slot/></code> に割り当てられるノードがある場合は、 <code><slot/></code> は割り当てられたノードに展開され、子ノードは利用されません。これはCSS Scoping等の仕様では明記されていませんが、HTML仕様に<a rel="noopener nofollow" target="_blank" href="https://html.spec.whatwg.org/multipage/scripting.html#htmlslotelement:~:text=A%20slot%20element%20represents%20its%20assigned%20nodes%2C%20if%20any%2C%20and%20its%20contents%20otherwise.">それを推測させる記述があります</a>。</p>
<p data-line="126" class="code-line">いっぽうセレクタは、特に指定がない場合は、展開前のDOMツリーに基づいて実行されます。</p>
<h2 id="css%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E6%96%87%E6%9B%B8%E6%9C%A8" data-line="128" class="code-line">
 CSSにおける文書木</h2>
<p data-line="130" class="code-line">CSSにおける <strong>主役は「要素」</strong> です。テキストなど、要素以外のノードには原則として直接スタイルを当てることはできません。</p>
<p data-line="132" class="code-line">これは文書のルートノードであるDocumentインスタンスについても言えます。CSSの文脈では、木構造の<strong>ルートは <code/></strong> と考えます。Documentインスタンスは基本的にスタイルの適用対象ではありません。</p>
<p data-line="134" class="code-line"><code/> は原則として <code/> と <code/> の2つの子要素のみを持ちます。このうち、 <a rel="noopener nofollow" target="_blank" href="https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements"><code/> は表示しない</a>よう規定されているため、 <code/> の表示可能な子要素は <code/> ただひとつです。</p>
<p data-line="136" class="code-line">したがって、文書全体にスタイルを当てる場合は、 <code>html</code> に対して設定しても <code>body</code> に対して設定しても同じように動くプロパティも多く、このようなスタイル指定が <code>body</code> に対して一括指定されていることがあります。いっぽう、このような一括指定されがちなスタイルの中には、理屈の上では意図通りに作動しないはずのプロパティもあり、こういったケースに対処する特殊処理が実装されていることがあります。こういった特殊処理の中には、以下のようにCSS仕様中に明示されているものもあります。</p>
<h2 id="%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E6%9C%A8" data-line="141" class="code-line">
 ボックス木</h2>
<p data-line="143" class="code-line">CSS3で単に「<a rel="noopener nofollow" target="_blank" href="https://www.w3.org/TR/css-display-3/#box"><strong>ボックス (box)</strong></a>」と言った場合は、具体的な矩形ではなく、<strong>抽象的な描画対象</strong>を表します。</p>
<p data-line="145" class="code-line">これらの抽象的なボックスは親子関係を持ち、<strong>ボックス木 (box tree)</strong> という木構造を形成します。ボックス木はいわば、<strong>DOM木を描画の都合にあわせて変形したもの</strong>です。</p>
<p data-line="147" class="code-line">生成されるボックス木は原則としてDOM木の構造を反映していますが、 <a rel="noopener nofollow" target="_blank" href="https://www.w3.org/TR/CSS2/selector.html#before-and-after"><code>::before</code> / <code>::after</code> 擬似要素</a>や <a rel="noopener nofollow" target="_blank" href="https://www.w3.org/TR/css-display-3/#the-display-properties"><code>display</code> プロパティー</a>の値などに依存して異なる構造に変形されることがあります。</p>
<p data-line="149" class="code-line">また、DOMのテキストノードに対応する概念はボックス木では<a rel="noopener nofollow" target="_blank" href="https://www.w3.org/TR/css-display-3/#css-text-sequence"><strong>テキスト列 (text sequence)</strong></a>と呼ばれています。</p>
<p data-line="151" class="code-line">ボックス木において、ボックスはDOMとの対応づけに応じて以下の3種類に分かれます。</p>
<p data-line="158" class="code-line">要素に紐づくボックスと匿名ボックスの区別は、カスケードを議論するにあたって重要になります。意識しておきましょう。</p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="160" class="code-line">
 まとめ</h2>
<ul data-line="162" class="code-line">
<li data-line="162" class="code-line">CSSではDOMツリーの「要素」と「テキストノード」に注目してレイアウトを行う。</li>
<li data-line="163" class="code-line">これらは描画の都合に合わせて「ボックスツリー」という類似のデータ構造に変換されてから処理される。</li>
</ul>
</div>
<p><script data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" type="text/javascript">
var adstir_vars = {
  ver: "4.0",
  app_id: "MEDIA-8126b05a",
  ad_spot: 4,
  center: false
};
</script>
<script data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" type="text/javascript" src="https://js.ad-stir.com/js/adstir.js"></script>
<br />
<br /><a rel="noopener nofollow" target="_blank" href="https://zenn.dev/qnighy/articles/c80a3a3d8f3df4">Source link </a></p>
<p>Views: 0</p><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">共有:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-facebook-299480"
				class="share-facebook sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=facebook"
				target="_blank"
				aria-labelledby="sharing-facebook-299480"
				>
				<span id="sharing-facebook-299480" hidden>Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)</span>
				<span>Facebook</span>
			</a></li><li class="share-x"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-x-299480"
				class="share-x sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=x"
				target="_blank"
				aria-labelledby="sharing-x-299480"
				>
				<span id="sharing-x-299480" hidden>クリックして X で共有 (新しいウィンドウで開きます)</span>
				<span>X</span>
			</a></li><li class="share-linkedin"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-linkedin-299480"
				class="share-linkedin sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=linkedin"
				target="_blank"
				aria-labelledby="sharing-linkedin-299480"
				>
				<span id="sharing-linkedin-299480" hidden>クリックして LinkedIn で共有 (新しいウィンドウで開きます)</span>
				<span>LinkedIn</span>
			</a></li><li class="share-tumblr"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-tumblr-299480"
				class="share-tumblr sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=tumblr"
				target="_blank"
				aria-labelledby="sharing-tumblr-299480"
				>
				<span id="sharing-tumblr-299480" hidden>クリックして Tumblr で共有 (新しいウィンドウで開きます)</span>
				<span>Tumblr</span>
			</a></li><li class="share-pinterest"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-pinterest-299480"
				class="share-pinterest sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=pinterest"
				target="_blank"
				aria-labelledby="sharing-pinterest-299480"
				>
				<span id="sharing-pinterest-299480" hidden>クリックして Pinterest で共有 (新しいウィンドウで開きます)</span>
				<span>Pinterest</span>
			</a></li><li class="share-threads"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-threads-299480"
				class="share-threads sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=threads"
				target="_blank"
				aria-labelledby="sharing-threads-299480"
				>
				<span id="sharing-threads-299480" hidden>クリックして Threads で共有 (新しいウィンドウで開きます)</span>
				<span>Threads</span>
			</a></li><li class="share-bluesky"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-bluesky-299480"
				class="share-bluesky sd-button share-icon no-text"
				href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/?share=bluesky"
				target="_blank"
				aria-labelledby="sharing-bluesky-299480"
				>
				<span id="sharing-bluesky-299480" hidden>クリックして Bluesky で共有 (新しいウィンドウで開きます)</span>
				<span>Bluesky</span>
			</a></li><li class="share-end"></li></ul></div></div></div><div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-241714808-299480-68d0205736e9a' data-src='https://widgets.wp.com/likes/?ver=14.8#blog_id=241714808&post_id=299480&origin=inmobilexion.com&obj_id=241714808-299480-68d0205736e9a' data-name='like-post-frame-241714808-299480-68d0205736e9a' data-title='いいねまたはリブログ'><h3 class="sd-title">いいね:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>いいね</span></span> <span class="loading">読み込み中…</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>
<div id='jp-relatedposts' class='jp-relatedposts' >
	<h3 class="jp-relatedposts-headline"><em>関連</em></h3>
</div></div></div><div class="td_block_wrap tdb_single_tags tdi_53 td-pb-border-top td_block_template_1"  data-td-block-uid="tdi_53" >
<style>.tdb_single_tags{margin-bottom:2px;font-family:var(--td_default_google_font_1,'Open Sans','Open Sans Regular',sans-serif);font-weight:600}.tdb_single_tags span,.tdb_single_tags a{font-size:11px}.tdb_single_tags span{text-transform:uppercase}.tdb_single_tags a:hover{background-color:var(--td_theme_color,#4db2ec);border-color:var(--td_theme_color,#4db2ec);color:#fff}.tdb_single_tags ul{display:inline-block;margin:0;list-style-type:none;font-size:0}.tdb_single_tags li{display:inline-block;margin-left:0}.tdi_53 span{margin-right:4px;padding:2px 8px 3px;color:#fff;background-color:#222}.tdi_53 a{margin-right:4px;padding:1px 7px 2px;border:1px solid #ededed;color:#111}@media (min-width:1019px) and (max-width:1140px){.tdi_53 a{border:1px solid #ededed}}@media (min-width:768px) and (max-width:1018px){.tdi_53 a{border:1px solid #ededed}}@media (max-width:767px){.tdi_53 a{border:1px solid #ededed}}</style><div class="tdb-block-inner td-fix-index"><ul class="tdb-tags"><li><span>Tags</span></li><li><a href="https://inmobilexion.com/tag/2%e6%97%a5%e7%9b%ae/">#2日目</a></li><li><a href="https://inmobilexion.com/tag/css%e5%a4%a7%e8%a7%a3%e5%89%96/">CSS大解剖</a></li><li><a href="https://inmobilexion.com/tag/%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8/">文書とボックス木</a></li></ul></div></div><div class="wpb_wrapper td_block_separator td_block_wrap vc_separator tdi_55  td_separator_solid td_separator_center"><span style="border-color:#EBEBEB;border-width:1px;width:100%;"></span>
<style scoped>.tdi_55{margin-top:28px!important;margin-bottom:20px!important}</style></div><div class="td_block_wrap tdb_single_post_share tdi_56  td-pb-border-top td_block_template_1"  data-td-block-uid="tdi_56" >
<style>.tdi_56 .td-post-sharing-visible{align-items:flex-start}</style><div id="tdi_56" class="td-post-sharing tdb-block td-ps-bg td-ps-notext td-post-sharing-style1 "><div class="td-post-sharing-visible"><div class="td-social-sharing-button td-social-sharing-button-js td-social-handler td-social-share-text">
                                        <div class="td-social-but-icon"><i class="td-icon-share"></i></div>
                                        <div class="td-social-but-text">シェア</div>
                                    </div><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Finmobilexion.com%2Fcss%25e5%25a4%25a7%25e8%25a7%25a3%25e5%2589%2596-2%25e6%2597%25a5%25e7%259b%25ae-%25e3%2580%258c%25e6%2596%2587%25e6%259b%25b8%25e3%2581%25a8%25e3%2583%259c%25e3%2583%2583%25e3%2582%25af%25e3%2582%25b9%25e6%259c%25a8%25e3%2580%258d%2F" title="Facebook" ><div class="td-social-but-icon"><i class="td-icon-facebook"></i></div><div class="td-social-but-text">Facebook</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-twitter" href="https://twitter.com/intent/tweet?text=CSS%E5%A4%A7%E8%A7%A3%E5%89%96+2%E6%97%A5%E7%9B%AE%3A+%E3%80%8C%E6%96%87%E6%9B%B8%E3%81%A8%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E6%9C%A8%E3%80%8D&url=https%3A%2F%2Finmobilexion.com%2Fcss%25e5%25a4%25a7%25e8%25a7%25a3%25e5%2589%2596-2%25e6%2597%25a5%25e7%259b%25ae-%25e3%2580%258c%25e6%2596%2587%25e6%259b%25b8%25e3%2581%25a8%25e3%2583%259c%25e3%2583%2583%25e3%2582%25af%25e3%2582%25b9%25e6%259c%25a8%25e3%2580%258d%2F&via=inmobi_info" title="Twitter" ><div class="td-social-but-icon"><i class="td-icon-twitter"></i></div><div class="td-social-but-text">Twitter</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-pinterest" href="https://pinterest.com/pin/create/button/?url=https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/&media=https://inmobilexion.com/wp-content/uploads/2025/09/1758465694_og-base-w1200-v2.png&description=CSS%E5%A4%A7%E8%A7%A3%E5%89%96+2%E6%97%A5%E7%9B%AE%3A+%E3%80%8C%E6%96%87%E6%9B%B8%E3%81%A8%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E6%9C%A8%E3%80%8D" title="Pinterest" ><div class="td-social-but-icon"><i class="td-icon-pinterest"></i></div><div class="td-social-but-text">Pinterest</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-whatsapp" href="https://api.whatsapp.com/send?text=CSS%E5%A4%A7%E8%A7%A3%E5%89%96+2%E6%97%A5%E7%9B%AE%3A+%E3%80%8C%E6%96%87%E6%9B%B8%E3%81%A8%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E6%9C%A8%E3%80%8D %0A%0A https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/" title="WhatsApp" ><div class="td-social-but-icon"><i class="td-icon-whatsapp"></i></div><div class="td-social-but-text">WhatsApp</div></a><a class="td-social-sharing-button td-social-sharing-button-js td-social-network td-social-copy_url" href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/" title="Copy URL" ><div class="td-social-but-icon"><div class="td-social-copy_url-check td-icon-check"></div><i class="td-icon-copy_url"></i></div><div class="td-social-but-text">Copy URL</div></a></div><div class="td-social-sharing-hidden"><ul class="td-pulldown-filter-list"></ul><a class="td-social-sharing-button td-social-handler td-social-expand-tabs" href="#" data-block-uid="tdi_56" title="More">
                                    <div class="td-social-but-icon"><i class="td-icon-plus td-social-expand-tabs-icon"></i></div>
                                </a></div></div></div><div class="wpb_wrapper td_block_separator td_block_wrap vc_separator tdi_58  td_separator_solid td_separator_center"><span style="border-color:#EBEBEB;border-width:1px;width:100%;"></span>
<style scoped>.tdi_58{margin-bottom:30px!important}@media (max-width:767px){.tdi_58{margin-top:-7px!important}}</style></div><div class="td_block_wrap tdb_single_next_prev tdi_59 td-animation-stack td-pb-border-top td_block_template_1"  data-td-block-uid="tdi_59" >
<style>.tdi_59{margin-bottom:43px!important}</style>
<style>.tdb_single_next_prev{*zoom:1}.tdb_single_next_prev:before,.tdb_single_next_prev:after{display:table;content:'';line-height:0}.tdb_single_next_prev:after{clear:both}.tdb-next-post{font-family:var(--td_default_google_font_2,'Roboto',sans-serif);width:48%;float:left;transform:translateZ(0);-webkit-transform:translateZ(0);min-height:1px;line-height:1}.tdb-next-post span{display:block;font-size:12px;color:#747474;margin-bottom:7px}.tdb-next-post a{font-size:15px;color:#222;line-height:21px;-webkit-transition:color 0.2s ease;transition:color 0.2s ease}.tdb-next-post a:hover{color:var(--td_theme_color,#4db2ec)}.tdb-post-next{margin-left:2%;text-align:right}.tdb-post-prev{margin-right:2%}.tdb-post-next .td-image-container{display:inline-block}.tdi_59 .td-module-container{display:flex;flex-direction:column}.tdi_59 .tdb-post-next .td-module-container{align-items:flex-end}.tdi_59 .td-image-container{display:block;order:0}.ie10 .tdi_59 .next-prev-title,.ie11 .tdi_59 .next-prev-title{flex:auto}.tdi_59 .td-module-title a{box-shadow:inset 0 0 0 0 #000}@media (min-width:768px){.tdi_59 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}@media (min-width:1019px) and (max-width:1140px){.tdi_59 .td-module-title a{box-shadow:inset 0 0 0 0 #000}@media (min-width:768px){.tdi_59 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}}@media (min-width:768px) and (max-width:1018px){.tdi_59 .td-module-title a{box-shadow:inset 0 0 0 0 #000}@media (min-width:768px){.tdi_59 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}}@media (max-width:767px){.tdi_59 .td-module-title a{box-shadow:inset 0 0 0 0 #000}@media (min-width:768px){.tdi_59 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}}</style><div class="tdb-block-inner td-fix-index"><div class="tdb-next-post tdb-next-post-bg tdb-post-prev"><span>前の記事</span><div class="td-module-container"><div class="next-prev-title"><a href="https://inmobilexion.com/%e3%80%8c%e5%af%9d%e4%b8%8d%e8%b6%b3%e3%81%bb%e3%81%a9%e8%87%aa%e8%99%90%e3%83%bb%e6%82%aa%e5%8f%a3%e5%a2%97%e5%8a%a0%e4%b8%ad%ef%bc%81%e3%80%8d/">「寝不足ほど自虐・悪口増加中！」</a></div></div></div><div class="tdb-next-post tdb-next-post-bg tdb-post-next"><span>次の記事</span><div class="td-module-container"><div class="next-prev-title"><a href="https://inmobilexion.com/%e6%9e%97%e5%ae%b6%e3%83%9a%e3%83%bc%e8%87%aa%e5%ae%85%e7%81%ab%e7%81%bd%e3%81%ae%e7%9c%9f%e7%9b%b8%e3%81%af%e6%bc%8f%e9%9b%bb%ef%bc%81%e9%a9%9a%e3%81%8d%e3%81%ae%e3%80%8c%e3%83%90%e3%83%bc%e3%83%b3/">林家ペー自宅火災の真相は漏電！驚きの「バーン！」体験とは？</a></div></div></div></div></div><div class="td_block_wrap td_flex_block_1 tdi_60 td_with_ajax_pagination td-pb-border-top td_block_template_1 td_flex_block"  data-td-block-uid="tdi_60" >
<style>.tdi_60 .td-image-wrap{padding-bottom:70%}.tdi_60 .entry-thumb{background-position:center 50%}.tdi_60 .td-module-container{flex-direction:column;border-color:#eaeaea!important}.tdi_60 .td-image-container{display:block;order:0}.ie10 .tdi_60 .td-module-meta-info,.ie11 .tdi_60 .td-module-meta-info{flex:auto}body .tdi_60 .td-favorite{font-size:36px;box-shadow:1px 1px 4px 0px rgba(0,0,0,0.2)}.tdi_60 .td-module-meta-info{border-color:#eaeaea}.tdi_60 .td_module_wrap{width:33.33333333%;float:left;padding-left:10px;padding-right:10px;padding-bottom:10px;margin-bottom:10px}.rtl .tdi_60 .td_module_wrap{float:right}.tdi_60 .td_block_inner{margin-left:-10px;margin-right:-10px}.tdi_60 .td-module-container:before{bottom:-10px;border-color:#eaeaea}.tdi_60 .td-post-vid-time{display:block}.tdi_60 .td-post-category:not(.td-post-extra-category){display:inline-block}.tdi_60 .td-author-photo .avatar{width:20px;height:20px;margin-right:6px;border-radius:50%}.tdi_60 .td-excerpt{display:none;column-count:1;column-gap:48px}.tdi_60 .td-audio-player{opacity:1;visibility:visible;height:auto;font-size:13px}.tdi_60 .td-read-more{display:none}.tdi_60 .td-author-date{display:inline}.tdi_60 .td-post-author-name{display:none}.tdi_60 .td-post-date,.tdi_60 .td-post-author-name span{display:none}.tdi_60 .entry-review-stars{display:inline-block}.tdi_60 .td-icon-star,.tdi_60 .td-icon-star-empty,.tdi_60 .td-icon-star-half{font-size:15px}.tdi_60 .td-module-comments{display:none}.tdi_60 .td_module_wrap:nth-child(3n+1){clear:both}.tdi_60 .td_module_wrap:nth-last-child(-n+3){margin-bottom:0;padding-bottom:0}.tdi_60 .td_module_wrap:nth-last-child(-n+3) .td-module-container:before{display:none}.tdi_60 .td-module-title a{box-shadow:inset 0 0 0 0 #000}.tdi_60 .td-module-exclusive .td-module-title a:before{display:inline-block}.tdi_60 .entry-title{font-size:13px!important;line-height:1.4!important;font-weight:500!important}html:not([class*='ie']) .tdi_60 .td-module-container:hover .entry-thumb:before{opacity:0}@media (min-width:768px){.tdi_60 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}@media (min-width:1019px) and (max-width:1140px){.tdi_60 .td_module_wrap{padding-bottom:10px;margin-bottom:10px;clear:none!important;padding-bottom:10px!important;margin-bottom:10px!important}.tdi_60 .td-module-container:before{bottom:-10px}.tdi_60 .td_module_wrap:nth-child(3n+1){clear:both!important}.tdi_60 .td_module_wrap:nth-last-child(-n+3){margin-bottom:0!important;padding-bottom:0!important}.tdi_60 .td_module_wrap .td-module-container:before{display:block!important}.tdi_60 .td_module_wrap:nth-last-child(-n+3) .td-module-container:before{display:none!important}.tdi_60 .td-module-title a{box-shadow:inset 0 0 0 0 #000}@media (min-width:768px){.tdi_60 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}}@media (min-width:768px) and (max-width:1018px){.tdi_60 .td_module_wrap{padding-left:7.5px;padding-right:7.5px;padding-bottom:7.5px;margin-bottom:7.5px;clear:none!important;padding-bottom:7.5px!important;margin-bottom:7.5px!important}.tdi_60 .td_block_inner{margin-left:-7.5px;margin-right:-7.5px}.tdi_60 .td-module-container:before{bottom:-7.5px}.tdi_60 .td-video-play-ico{width:24px;height:24px;font-size:24px}.tdi_60 .td_module_wrap:nth-child(3n+1){clear:both!important}.tdi_60 .td_module_wrap:nth-last-child(-n+3){margin-bottom:0!important;padding-bottom:0!important}.tdi_60 .td_module_wrap .td-module-container:before{display:block!important}.tdi_60 .td_module_wrap:nth-last-child(-n+3) .td-module-container:before{display:none!important}.tdi_60 .td-module-title a{box-shadow:inset 0 0 0 0 #000}.tdi_60 .entry-title{font-size:12px!important}@media (min-width:768px){.tdi_60 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}}@media (max-width:767px){.tdi_60 .td-image-container{flex:0 0 30%;width:30%;display:block;order:0}.ie10 .tdi_60 .td-image-container,.ie11 .tdi_60 .td-image-container{flex:0 0 auto}.tdi_60 .td-module-container{flex-direction:row}.ie10 .tdi_60 .td-module-meta-info,.ie11 .tdi_60 .td-module-meta-info{flex:1}.tdi_60 .td-module-meta-info{margin:0 0 0 16px;padding:0px}.tdi_60 .td_module_wrap{width:100%;float:left;padding-left:7.5px;padding-right:7.5px;padding-bottom:13px;margin-bottom:13px;padding-bottom:13px!important;margin-bottom:13px!important}.rtl .tdi_60 .td_module_wrap{float:right}.tdi_60 .td_block_inner{margin-left:-7.5px;margin-right:-7.5px}.tdi_60 .td-module-container:before{bottom:-13px}.tdi_60 .td-video-play-ico{width:24px;height:24px;font-size:24px}.tdi_60 .td-post-date,.tdi_60 .td-post-author-name span{display:inline-block}.tdi_60 .td_module_wrap:nth-last-child(1){margin-bottom:0!important;padding-bottom:0!important}.tdi_60 .td_module_wrap .td-module-container:before{display:block!important}.tdi_60 .td_module_wrap:nth-last-child(1) .td-module-container:before{display:none!important}.tdi_60 .td-module-title a{box-shadow:inset 0 0 0 0 #000}.tdi_60 .entry-title{margin:0 0 6px 0;font-size:14px!important}@media (min-width:768px){.tdi_60 .td-module-title a{transition:all 0.2s ease;-webkit-transition:all 0.2s ease}}}</style><script data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore">var block_tdi_60 = new tdBlock();
block_tdi_60.id = "tdi_60";
block_tdi_60.atts = '{"title_tag":"div","modules_on_row":"eyJhbGwiOiIzMy4zMzMzMzMzMyUiLCJwaG9uZSI6IjEwMCUifQ==","limit":"3","modules_category":"image","show_btn":"none","show_excerpt":"none","ajax_pagination":"next_prev","sort":"","category_id":"_related_cat","f_title_font_size":"eyJwaG9uZSI6IjE0IiwiYWxsIjoiMTMiLCJwb3J0cmFpdCI6IjEyIn0=","f_title_font_line_height":"eyJwaG9uZSI6IjEuNCIsImFsbCI6IjEuNCJ9","modules_gap":"eyJhbGwiOiIyMCIsInBvcnRyYWl0IjoiMTUiLCJwaG9uZSI6IjE1In0=","show_com":"none","show_date":"eyJhbGwiOiJub25lIiwicGhvbmUiOiJpbmxpbmUtYmxvY2sifQ==","show_author":"none","image_height":"70","f_title_font_weight":"500","all_modules_space":"eyJhbGwiOiIyMCIsImxhbmRzY2FwZSI6IjIwIiwicG9ydHJhaXQiOiIxNSIsInBob25lIjoiMjYifQ==","custom_title":"RELATED ARTICLES","image_floated":"eyJwaG9uZSI6ImZsb2F0X2xlZnQifQ==","image_width":"eyJwaG9uZSI6IjMwIn0=","meta_info_align":"","meta_margin":"eyJwaG9uZSI6IjAgMCAwIDE2cHgifQ==","meta_padding":"eyJwaG9uZSI6IjAifQ==","video_icon":"eyJwb3J0cmFpdCI6IjI0IiwicGhvbmUiOiIyNCJ9","image_size":"td_485x360","art_title":"eyJwaG9uZSI6IjAgMCA2cHggMCJ9","block_type":"td_flex_block_1","separator":"","custom_url":"","block_template_id":"","mc1_tl":"","mc1_title_tag":"","mc1_el":"","post_ids":"-299480","taxonomies":"","category_ids":"","in_all_terms":"","tag_slug":"","autors_id":"","installed_post_types":"","include_cf_posts":"","exclude_cf_posts":"","popular_by_date":"","linked_posts":"","favourite_only":"","locked_only":"","offset":"","open_in_new_window":"","show_modified_date":"","time_ago":"","time_ago_add_txt":"ago","time_ago_txt_pos":"","review_source":"","el_class":"","td_query_cache":"","td_query_cache_expiration":"","td_ajax_filter_type":"","td_ajax_filter_ids":"","td_filter_default_txt":"All","td_ajax_preloading":"","container_width":"","m_padding":"","modules_border_size":"","modules_border_style":"","modules_border_color":"#eaeaea","modules_border_radius":"","modules_divider":"","modules_divider_color":"#eaeaea","h_effect":"","image_alignment":"50","image_radius":"","hide_image":"","show_favourites":"","fav_size":"2","fav_space":"","fav_ico_color":"","fav_ico_color_h":"","fav_bg":"","fav_bg_h":"","fav_shadow_shadow_header":"","fav_shadow_shadow_title":"Shadow","fav_shadow_shadow_size":"","fav_shadow_shadow_offset_horizontal":"","fav_shadow_shadow_offset_vertical":"","fav_shadow_shadow_spread":"","fav_shadow_shadow_color":"","video_popup":"yes","video_rec":"","spot_header":"","video_rec_title":"","video_rec_color":"","video_rec_disable":"","autoplay_vid":"yes","show_vid_t":"block","vid_t_margin":"","vid_t_padding":"","video_title_color":"","video_title_color_h":"","video_bg":"","video_overlay":"","vid_t_color":"","vid_t_bg_color":"","f_vid_title_font_header":"","f_vid_title_font_title":"Video pop-up article title","f_vid_title_font_settings":"","f_vid_title_font_family":"","f_vid_title_font_size":"","f_vid_title_font_line_height":"","f_vid_title_font_style":"","f_vid_title_font_weight":"","f_vid_title_font_transform":"","f_vid_title_font_spacing":"","f_vid_title_":"","f_vid_time_font_title":"Video duration text","f_vid_time_font_settings":"","f_vid_time_font_family":"","f_vid_time_font_size":"","f_vid_time_font_line_height":"","f_vid_time_font_style":"","f_vid_time_font_weight":"","f_vid_time_font_transform":"","f_vid_time_font_spacing":"","f_vid_time_":"","excl_show":"inline-block","excl_txt":"","excl_margin":"","excl_padd":"","all_excl_border":"","all_excl_border_style":"solid","excl_radius":"","excl_color":"","excl_color_h":"","excl_bg":"","excl_bg_h":"","all_excl_border_color":"","excl_border_color_h":"","f_excl_font_header":"","f_excl_font_title":"Label text","f_excl_font_settings":"","f_excl_font_family":"","f_excl_font_size":"","f_excl_font_line_height":"","f_excl_font_style":"","f_excl_font_weight":"","f_excl_font_transform":"","f_excl_font_spacing":"","f_excl_":"","meta_info_horiz":"layout-default","meta_width":"","meta_space":"","art_btn":"","meta_info_border_size":"","meta_info_border_style":"","meta_info_border_color":"#eaeaea","meta_info_border_radius":"","modules_category_margin":"","modules_category_padding":"","modules_cat_border":"","modules_category_radius":"0","show_cat":"inline-block","modules_extra_cat":"","author_photo":"","author_photo_size":"","author_photo_space":"","author_photo_radius":"","show_review":"inline-block","review_space":"","review_size":"2.5","review_distance":"","art_excerpt":"","excerpt_col":"1","excerpt_gap":"","excerpt_middle":"","excerpt_inline":"","show_audio":"block","hide_audio":"","art_audio":"","art_audio_size":"1.5","btn_title":"","btn_margin":"","btn_padding":"","btn_border_width":"","btn_radius":"","pag_space":"","pag_padding":"","pag_border_width":"","pag_border_radius":"","prev_tdicon":"","next_tdicon":"","pag_icons_size":"","f_header_font_header":"","f_header_font_title":"Block header","f_header_font_settings":"","f_header_font_family":"","f_header_font_size":"","f_header_font_line_height":"","f_header_font_style":"","f_header_font_weight":"","f_header_font_transform":"","f_header_font_spacing":"","f_header_":"","f_ajax_font_title":"Ajax categories","f_ajax_font_settings":"","f_ajax_font_family":"","f_ajax_font_size":"","f_ajax_font_line_height":"","f_ajax_font_style":"","f_ajax_font_weight":"","f_ajax_font_transform":"","f_ajax_font_spacing":"","f_ajax_":"","f_more_font_title":"Load more button","f_more_font_settings":"","f_more_font_family":"","f_more_font_size":"","f_more_font_line_height":"","f_more_font_style":"","f_more_font_weight":"","f_more_font_transform":"","f_more_font_spacing":"","f_more_":"","f_title_font_header":"","f_title_font_title":"Article title","f_title_font_settings":"","f_title_font_family":"","f_title_font_style":"","f_title_font_transform":"","f_title_font_spacing":"","f_title_":"","f_cat_font_title":"Article category tag","f_cat_font_settings":"","f_cat_font_family":"","f_cat_font_size":"","f_cat_font_line_height":"","f_cat_font_style":"","f_cat_font_weight":"","f_cat_font_transform":"","f_cat_font_spacing":"","f_cat_":"","f_meta_font_title":"Article meta info","f_meta_font_settings":"","f_meta_font_family":"","f_meta_font_size":"","f_meta_font_line_height":"","f_meta_font_style":"","f_meta_font_weight":"","f_meta_font_transform":"","f_meta_font_spacing":"","f_meta_":"","f_ex_font_title":"Article excerpt","f_ex_font_settings":"","f_ex_font_family":"","f_ex_font_size":"","f_ex_font_line_height":"","f_ex_font_style":"","f_ex_font_weight":"","f_ex_font_transform":"","f_ex_font_spacing":"","f_ex_":"","f_btn_font_title":"Article read more button","f_btn_font_settings":"","f_btn_font_family":"","f_btn_font_size":"","f_btn_font_line_height":"","f_btn_font_style":"","f_btn_font_weight":"","f_btn_font_transform":"","f_btn_font_spacing":"","f_btn_":"","mix_color":"","mix_type":"","fe_brightness":"1","fe_contrast":"1","fe_saturate":"1","mix_color_h":"","mix_type_h":"","fe_brightness_h":"1","fe_contrast_h":"1","fe_saturate_h":"1","m_bg":"","color_overlay":"","shadow_shadow_header":"","shadow_shadow_title":"Module Shadow","shadow_shadow_size":"","shadow_shadow_offset_horizontal":"","shadow_shadow_offset_vertical":"","shadow_shadow_spread":"","shadow_shadow_color":"","title_txt":"","title_txt_hover":"","all_underline_height":"","all_underline_color":"","cat_style":"","cat_bg":"","cat_bg_hover":"","cat_txt":"","cat_txt_hover":"","cat_border":"","cat_border_hover":"","meta_bg":"","author_txt":"","author_txt_hover":"","date_txt":"","ex_txt":"","com_bg":"","com_txt":"","rev_txt":"","audio_btn_color":"","audio_time_color":"","audio_bar_color":"","audio_bar_curr_color":"","shadow_m_shadow_header":"","shadow_m_shadow_title":"Meta info shadow","shadow_m_shadow_size":"","shadow_m_shadow_offset_horizontal":"","shadow_m_shadow_offset_vertical":"","shadow_m_shadow_spread":"","shadow_m_shadow_color":"","btn_bg":"","btn_bg_hover":"","btn_txt":"","btn_txt_hover":"","btn_border":"","btn_border_hover":"","pag_text":"","pag_h_text":"","pag_bg":"","pag_h_bg":"","pag_border":"","pag_h_border":"","ajax_pagination_next_prev_swipe":"","ajax_pagination_infinite_stop":"","css":"","tdc_css":"","td_column_number":1,"header_color":"","color_preset":"","border_top":"","class":"tdi_60","tdc_css_class":"tdi_60","tdc_css_class_style":"tdi_60_rand_style","live_filter":"cur_post_same_categories","live_filter_cur_post_id":299480,"live_filter_cur_post_parent_id":0}';
block_tdi_60.td_column_number = "1";
block_tdi_60.block_type = "td_flex_block_1";
block_tdi_60.post_count = "3";
block_tdi_60.found_posts = "9999";
block_tdi_60.header_color = "";
block_tdi_60.ajax_pagination_infinite_stop = "";
block_tdi_60.max_num_pages = "3333";
tdBlocksArray.push(block_tdi_60);
</script><div class="td-block-title-wrap"><div class="block-title td-block-title"><span class="td-pulldown-size">RELATED ARTICLES</span></div></div><div id=tdi_60 class="td_block_inner td-mc1-wrap">
        <div class="td_module_flex td_module_flex_1 td_module_wrap td-animation-stack td-cpt-post">
            <div class="td-module-container td-category-pos-image">
                                    <div class="td-image-container">
                        <a href="https://inmobilexion.com/%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9/%e3%83%86%e3%83%83%e3%82%af%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9/" class="td-post-category" >テックニュース</a>                        <div class="td-module-thumb"><a href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-1%e6%97%a5%e7%9b%ae-%e3%80%8c%e4%bb%95%e6%a7%98%e6%9b%b8%e3%80%8d/"  rel="nofollow bookmark" class="td-image-wrap " title="CSS大解剖 1日目: 「仕様書」" ><span class="entry-thumb td-thumb-css" data-type="css_image" data-img-url="https://inmobilexion.com/wp-content/uploads/2025/09/1758469852_og-base-w1200-v2-485x360.png"  ></span></a></div>                                                                    </div>
                
                <div class="td-module-meta-info">
                                        
                    <h3 class="entry-title td-module-title"><a href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-1%e6%97%a5%e7%9b%ae-%e3%80%8c%e4%bb%95%e6%a7%98%e6%9b%b8%e3%80%8d/"  rel="bookmark" title="CSS大解剖 1日目: 「仕様書」">CSS大解剖 1日目: 「仕様書」</a></h3>
                    
                                            <div class="td-editor-date">
                                                        
                                                            <span class="td-author-date">
                                                                                                            <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2025-09-22T00:50:51+09:00" >2025年9月22日</time></span>                                                                                                        </span>
                                                    </div>
                    
                    
                    
                                    </div>
            </div>
        </div>

        
        <div class="td_module_flex td_module_flex_1 td_module_wrap td-animation-stack td-cpt-post">
            <div class="td-module-container td-category-pos-image">
                                    <div class="td-image-container">
                        <a href="https://inmobilexion.com/%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9/%e3%83%86%e3%83%83%e3%82%af%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9/" class="td-post-category" >テックニュース</a>                        <div class="td-module-thumb"><a href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-3%e6%97%a5%e7%9b%ae-%e3%80%8c%e9%96%b2%e8%a6%a7%e7%92%b0%e5%a2%83-1-3%e3%80%8d/"  rel="nofollow bookmark" class="td-image-wrap " title="CSS大解剖 3日目: 「閲覧環境 1/3」" ><span class="entry-thumb td-thumb-css" data-type="css_image" data-img-url="https://inmobilexion.com/wp-content/uploads/2025/09/1758461730_og-base-w1200-v2-485x360.png"  ></span></a></div>                                                                    </div>
                
                <div class="td-module-meta-info">
                                        
                    <h3 class="entry-title td-module-title"><a href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-3%e6%97%a5%e7%9b%ae-%e3%80%8c%e9%96%b2%e8%a6%a7%e7%92%b0%e5%a2%83-1-3%e3%80%8d/"  rel="bookmark" title="CSS大解剖 3日目: 「閲覧環境 1/3」">CSS大解剖 3日目: 「閲覧環境 1/3」</a></h3>
                    
                                            <div class="td-editor-date">
                                                        
                                                            <span class="td-author-date">
                                                                                                            <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2025-09-21T22:35:29+09:00" >2025年9月21日</time></span>                                                                                                        </span>
                                                    </div>
                    
                    
                    
                                    </div>
            </div>
        </div>

        
        <div class="td_module_flex td_module_flex_1 td_module_wrap td-animation-stack td-cpt-post">
            <div class="td-module-container td-category-pos-image">
                                    <div class="td-image-container">
                        <a href="https://inmobilexion.com/%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9/%e3%83%86%e3%83%83%e3%82%af%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%b9/" class="td-post-category" >テックニュース</a>                        <div class="td-module-thumb"><a href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-4%e6%97%a5%e7%9b%ae-%e3%80%8c%e9%96%b2%e8%a6%a7%e7%92%b0%e5%a2%83-2-3%e3%80%8d/"  rel="nofollow bookmark" class="td-image-wrap " title="CSS大解剖 4日目: 「閲覧環境 2/3」" ><span class="entry-thumb td-thumb-css" data-type="css_image" data-img-url="https://inmobilexion.com/wp-content/uploads/2025/09/1758457711_og-base-w1200-v2-485x360.png"  ></span></a></div>                                                                    </div>
                
                <div class="td-module-meta-info">
                                        
                    <h3 class="entry-title td-module-title"><a href="https://inmobilexion.com/css%e5%a4%a7%e8%a7%a3%e5%89%96-4%e6%97%a5%e7%9b%ae-%e3%80%8c%e9%96%b2%e8%a6%a7%e7%92%b0%e5%a2%83-2-3%e3%80%8d/"  rel="bookmark" title="CSS大解剖 4日目: 「閲覧環境 2/3」">CSS大解剖 4日目: 「閲覧環境 2/3」</a></h3>
                    
                                            <div class="td-editor-date">
                                                        
                                                            <span class="td-author-date">
                                                                                                            <span class="td-post-date"><time class="entry-date updated td-module-date" datetime="2025-09-21T21:28:31+09:00" >2025年9月21日</time></span>                                                                                                        </span>
                                                    </div>
                    
                    
                    
                                    </div>
            </div>
        </div>

        </div><div class="td-next-prev-wrap"><a href="#" class="td-ajax-prev-page ajax-page-disabled" aria-label="prev-page" id="prev-page-tdi_60" data-td_block_id="tdi_60"><i class="td-next-prev-icon td-icon-font td-icon-menu-left"></i></a><a href="#"  class="td-ajax-next-page" aria-label="next-page" id="next-page-tdi_60" data-td_block_id="tdi_60"><i class="td-next-prev-icon td-icon-font td-icon-menu-right"></i></a></div></div>

<script data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore" data-jetpack-boost="ignore">

var tdb_login_sing_in_shortcode="on";

</script>

<div class="td_block_wrap tdb_single_comments tdi_61 tdb-comm-layout1 td-pb-border-top td_block_template_1"  data-td-block-uid="tdi_61" >
<style>.tdb_single_comments input[type=text]{min-height:34px;height:auto}.tdb_single_comments .comments,.tdb_single_comments .comment-respond:last-child,.tdb_single_comments .form-submit{margin-bottom:0}.is-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.tdb-comm-layout3 form,.tdb-comm-layout5 form{display:flex;flex-wrap:wrap}.tdb-comm-layout3 .td-form-comment,.tdb-comm-layout5 .td-form-comment,.tdb-comm-layout3 .form-submit,.tdb-comm-layout5 .form-submit{flex:0 0 100%;order:1}.tdb-comm-layout3 .td-form-author,.tdb-comm-layout3 .td-form-email,.tdb-comm-layout3 .td-form-url{flex:0 0 32%}.tdb-comm-layout5 .td-form-author,.tdb-comm-layout5 .td-form-email{flex:0 0 49%}.tdb-comm-layout5 .td-form-url{flex:0 0 100%}.tdb-comm-leave_reply_top .comments{display:flex;flex-direction:column}.tdb-comm-leave_reply_top .td-comments-title{order:0;margin-bottom:14px}.tdb-comm-leave_reply_top .comment-respond .form-submit{order:1;margin-bottom:21px}.tdb-comm-leave_reply_top .comment-list{order:2}.tdb-comm-leave_reply_top .comment-pagination{order:3}.tdi_61 .comment-link{display:inline-block}.tdi_61 .comment{border-bottom-style:dashed}.tdi_61 .comment .children{border-top-style:dashed}@media (min-width:767px){.tdb-comm-layout2 form,.tdb-comm-layout4 form{margin:0 -10px}.tdb-comm-layout2 .logged-in-as,.tdb-comm-layout4 .logged-in-as,.tdb-comm-layout2 .comment-form-input-wrap,.tdb-comm-layout4 .comment-form-input-wrap,.tdb-comm-layout2 .form-submit,.tdb-comm-layout4 .form-submit,.tdb-comm-layout2 .comment-respond p,.tdb-comm-layout4 .comment-respond p{padding:0 10px}.tdb-comm-layout2 .td-form-author,.tdb-comm-layout2 .td-form-email{float:left;width:33.3333%}.tdb-comm-layout2 .td-form-url{width:33.3333%}.tdb-comm-layout2 .td-form-url{float:left}.tdb-comm-layout4 .td-form-author,.tdb-comm-layout4 .td-form-email{float:left;width:50%}.tdb-comm-layout3 .td-form-author,.tdb-comm-layout5 .td-form-author,.tdb-comm-layout3 .td-form-email{margin-right:2%}}@media (max-width:767px){.tdb-comm-layout3 .td-form-author,.tdb-comm-layout3 .td-form-email,.tdb-comm-layout3 .td-form-url,.tdb-comm-layout5 .td-form-author,.tdb-comm-layout5 .td-form-email{flex:0 0 100%}}</style><div class="tdb-block-inner td-fix-index"><div class="comments" id="comments">	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">返事を書く <small><a rel="nofollow" id="cancel-comment-reply-link" href="/css%e5%a4%a7%e8%a7%a3%e5%89%96-2%e6%97%a5%e7%9b%ae-%e3%80%8c%e6%96%87%e6%9b%b8%e3%81%a8%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e6%9c%a8%e3%80%8d/#respond" style="display:none;">返事をキャンセル</a></small></h3><form action="https://inmobilexion.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><div class="clearfix"></div>
                        <div class="comment-form-input-wrap td-form-comment">
                            <textarea 
                                placeholder="コメント：" 
                                id="comment" 
                                name="comment" 
                                cols="45" 
                                rows="8" 
                                aria-required="true"
                            >
                            コメント：
                            あなたのコメントを入力してください。


                                
                                名前：*
                                ここにあなたの名前を入力してください



                                
                                Eメール：*
                                間違ったメールアドレスを入力しました。
                                ここにあなたのEメールアドレスを入力してください
                            

                            
                            ウェブサイト：
                         

                            
                            次回の私のコメントのためにこのブラウザに私の名前、電子メール、そしてウェブサイトを保存してください。
                          
 

Δ

CSS大解剖 2日目: 「文書とボックス木」

文書

DOM

DOM: 要素、タグ、タグ名

DOM: 空白の扱い

DOMより前に処理されるもの

改行の正規化

早期空白文字

複数行テキスト領域の特別処理

ABOUT US

FOLLOW US

CSS大解剖 1日目: 「仕様書」

正門良規、anan初表紙！ずぶ濡れで男らしさ全開！

「異次元の収容」開幕！新シナリオでデビエーションを捕えろ！

CSS大解剖 2日目: 「文書とボックス木」

文書

DOM

DOM: 要素、タグ、タグ名

DOM: 空白の扱い

DOMより前に処理されるもの

改行の正規化

早期空白文字

複数行テキスト領域の特別処理

ABOUT US

FOLLOW US