CSS｜behavior・ime-mode・layout-grid・marker-offset・include-source・layer-background（廃止・非推奨）

ホームページ内のページ統廃合や長期間運用してきたページのリニューアルを進める際、デザインの刷新やコンテンツの整理と並行して行いたいのがソースコードの見直しです。とくに何年も前に制作されたまま手つかずになっているページには、現在のWeb標準ではすでに「廃止」や「非推奨」となっている古いCSSプロパティが残存しているケースが少なくありません。

かつてのWeb制作の現場では、Internet Explorer（IE）をはじめとする特定のブラウザだけで動作する独自仕様や、標準化される前に消えてしまった草案段階の仕様が多く利用されていました。現在のChromeやSafari、Edgeといったモダンブラウザ環境において、これらのレガシーなプロパティは単に無視される仕様となっています。そのため、そのまま放置しておいてもレイアウトが大きく崩れるなどの直接的な悪影響を引き起こすことは稀です。

しかし、機能しない無駄なコードが蓄積されると、ソースコード全体の可読性が著しく低下します。「この記述は今のレイアウトに影響しているのだろうか」とサイト管理の担当者が迷う原因になり、今後のメンテナンス作業における大きな妨げとなるのです。また、塵も積もればファイルサイズの増加にもつながり、パフォーマンス最適化の観点からもメリットはありません。クリーンで保守性の高いWebサイトを構築するためには、こうした過去の遺産を思い切って断捨離することが大切です。

ここでは、サイトの統合や移行作業のコード大掃除において、「見つけたら削除して問題ない」代表的なCSSプロパティを7つ（behavior、ime-mode、layout-grid、marker-offset、include-source、layer-background-image、layer-background-color）ピックアップしました。IE独自のスクリプト適用や日本語タイポグラフィ仕様、古い時代の名残など、それぞれがどのような目的で使われ、なぜ現在では不要になったのかを詳しく解説しています。

古いコードを整理することは、ホームページを健全に保つために重要です。過去のソースコードに埋もれているこれらのプロパティを発見した際の、安全に削除するための判断基準としてぜひ本記事をお役立てください。

behavior 外部スクリプトを適用（IE）

behavior: ;

behavior（ビヘイビア）は、外部スクリプトを適用するときに使用します。HTC（HTML Component）ファイルをhtml上で使用する際に使用します。

behaviorプロパティの歴史的背景と現代のWeb標準

CSSのbehaviorプロパティは、かつてInternet Explorer（IE）が独自に実装していた拡張機能であり、HTC（HTML Component）ファイルと呼ばれる外部スクリプトを呼び出して、特定のHTML要素に独自の挙動や動的なエフェクトを適用するために使用されていました。現代のホームページ制作の標準仕様（W3C規格）には含まれておらず、IEのサポート終了にともなって現在では完全に廃止された技術知識ですが、ホームページ（ウェブサイト）の動的な表現手法の変遷を知る上で非常に興味深い背景を持っています。

過去のIE対策におけるbehaviorの役割

かつてのホームページ制作において、IEは他の主要なブラウザと比べてCSSの最新機能のサポートが遅れており、表示崩れの原因になることが頻発していました。たとえば、角丸を表現する「border-radius」や、要素に影をつける「box-shadow」といったCSS3のプロパティは、古いバージョンのIEでは認識されませんでした。これを解決するために、behaviorプロパティを用いて「ie-css3.htc」などの外部スクリプトを読み込ませ、古いIEであっても強引にモダンなWebデザインを再現する手法が広く採用されていました。ブラウザ間の表示差異を埋め、多くのユーザーに均一な情報を届けるための苦肉の策として、当時は重要な役割を担っていました。

JavaScript（JavaScript API）への完全な移行

behaviorプロパティのような特定のブラウザに依存する記述は、ホームページの動作を不安定にさせたり、ページの表示速度を著しく低下させたりする原因となっていました。現在のホームページ制作では、HTMLで構造を定義し、CSSで外観・デザインを装飾し、動的な挙動やインタラクションに関してはJavaScriptを用いて制御するという役割分担が完全に確立されています。最新のブラウザ環境では、高度な演出であっても標準的なJavaScriptや、Web Animations APIなどを用いて安全かつスマートに実装できるようになっています。ホームページ（ウェブサイト）のソースコードを標準仕様に則ってクリーンに保つことは、表示崩れやシステムエラーを防ぎ、事業のWeb集客を最大化するためのSEO対策やスムーズな運用管理を行う上で重要となります。

behavior: ;

ホームページ制作・Webデザインの1ポイント

ホームページで使用するファイル関連の指定は、原則的にHTMLの方で設定しますが、まれにCSSで設定できるものや、CSS側で設定しないとうまく反映されないものもあります。

ime-mode テキスト入力時のIMEの状態を指定（IE）

ime-mode: ;

ime-mode（imeモード）は、Internet Explorer独自追加プロパティで、ホームページ制作・作成において、テキスト入力時のIME（Input Method Editor、日本語入力ソフト）の状態を指定します。

auto

無指定　ブラウザやOSの現在のIME状態をそのまま引き継ぎます。

active

初期値が日本語入力モード　入力欄にフォーカスした際、初期状態を「日本語入力オン（全角）」にします。

inactive

初期値が英数字入力モード　入力欄にフォーカスした際、初期状態を「日本語入力オフ（半角英数）」にします。入力中のユーザーによる手動での切り替えは可能です。

disabled

英数字入力モード。ユーザーの操作によるモードの変更不可　日本語入力を完全に無効化し、半角英数しか入力できない状態に固定します。パスワード入力欄などで多用されました。

しかしながら、スタイルシート（CSS）は見栄えを制御する言語であり、入力システムの挙動まで制御するのは役割が異なるといった背景もあり、この機能はW3Cの国際的なWeb標準には採用されませんでした。現在では仕様から「非推奨（廃止）」となっており、Google ChromeやSafari、Edgeなどのモダンブラウザでは機能しないため、現在のホームページ制作で記述しても意図した制御は行われない点に注意が必要です。

type属性やinputmode属性

特にスマートフォンの普及に伴い、入力内容に応じた最適なソフトウェアキーボード（テンキーや英字キーボードなど）を自動的に呼び出すことが重要になっています。現代のWeb標準では、入力欄の「type属性（type=”email”やtype=”tel”など）」や、「inputmode属性（inputmode=”numeric”やinputmode=”email”など）」を活用して実装します。

これにより、電話番号の入力欄をタップした際には自動的に数字用のキーボードが立ち上がり、ユーザーが入力モードを手動で切り替えるストレスを無くすことができます。

事業用ホームページにおいて、ユーザーに負担を感じさせないエントリーフォーム（EFO：入力フォーム最適化）を構築することは、Web集客の成果を最大化させるための大きな鍵となります。古い独自仕様に頼るのではなく、現代の閲覧環境に即した標準技術を正しく選択してユーザビリティを高めていくことが極めて重要です。

ime-mode: ;

ホームページ制作の1ポイント

この項目ime-modeは、フォーム入力などユーザーが入力する際のIMEモードに関するものですので、ホームページ制作におけるWebデザインとは関連性がない項目です。

layout-grid グリッドの指定をまとめて行う（IE）

layout-grid: ;

layout-grid（レイアウトグリッド）は、グリッドの指定をまとめて行う場合に使用するプロパティです。日本語などの文字を一文字ずつグリッドに入れてレイアウトします。

• layout-grid-mode
• layout-grid-type
• layout-grid-line
• layout-grid-char

の各プロパティの値をスペース区切りで指定します。

一括指定プロパティ「layout-grid」の概要と現代のCSS Gridへの技術的変遷

ホームページ（ウェブサイト）の文字組みにおいて、日本語の文章を格子（グリッド）に沿って規則正しく整列させたいケースがあります。かつてInternet Explorer（IE）独自の拡張仕様として提供されていた一括指定プロパティ「layout-grid」は、こうした日本語特有の原稿用紙のような文字配置（グリッド設定）をまとめて行うためのプロパティでした。より専門的には、この古い仕様の仕組みと、現代のWeb標準における「CSS Grid Layout」への進化という技術的な変遷を正しく理解しておくことが重要です。

layout-gridによるショートハンドの記述ルール

layout-gridプロパティは、グリッドに関する4つの個別設定（モード、タイプ、行高、文字幅）を半角スペースで区切り、任意の順序で1行にまとめて記述できる便利なショートハンド（一括指定）でした。例えば以下のように記述して利用されていました。

layout-grid: both fixed 20px 16px;

この記述により、「縦横両方のグリッドを有効にし（both）」「文字種に関わらず中心に等幅配置し（fixed）」「行間グリッドを20pxに設定し（layout-grid-line）」「文字幅グリッドを16pxに固定する（layout-grid-char）」という複雑な日本語用文字組みが一括で適用できました。
しかしながら、これらはIE専用の非標準仕様であったため、現代の主要なブラウザ（Chrome、Safari、Edge、Firefoxなど）では完全に廃止されており、現在のホームページ（ウェブサイト）制作において記述しても一切機能しない点に注意が必要です。

現代のWeb制作を支える「CSS Grid Layout」との違い

現代のホームページ制作において「グリッド」という言葉を使う場合、それは古いIE仕様のことではなく、世界標準である「CSS Grid Layout（ディスプレイ：grid）」のことを指します。

かつてのlayout-gridが「テキスト（文字）を一文字ずつ格子に嵌め込むための仕組み」であったのに対し、現代のCSS Grid Layoutは「ページ全体のレイアウト（枠組み）を格子状に分割し、要素（画像、テキスト、ボタンなど）を自由自在に配置するための仕組み」です。

現代のCSS Gridを活用することで、以下のような記述を用いて、2カラムや3カラムといった複雑な事業用ホームページのレイアウトを極めて柔軟に構築できます。

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;

これにより、画面サイズに応じて格子の数や幅を動的に変化させる高度なレスポンシブデザインが容易になり、スマートフォンやタブレットなどあらゆる閲覧環境において、要素が重なったり崩れたりすることのない堅牢なホームページ（ウェブサイト）が実現できます。

古い文字組み仕様としてのグリッドは、現在のWeb標準では「writing-mode（縦書き指定）」や「letter-spacing（文字間微調整）」にその役割が引き継がれています。一方で、現代のレイアウトを統括する「CSS Grid Layout」を適切にプログラミングしていくことが、ユーザーにとって見やすく操作しやすいユーザーインターフェースを構築し、Web集客の成果を持続させるための必須の技術となっています。

layout-grid: ;

ホームページ制作・Webデザインの1ポイント

layout-grid（レイアウトグリッド）などCSSで簡易指定をするときは半角スペースで区切りながら一括指定します。この時に、必須指定の部分が無指定の場合は、指定した値自体が全て無効になることがありますので、注意が必要です。

layout-grid系プロパティ

ホームページ制作で使用する他のlayout-grid系プロパティです。

layout-grid-char　文字グリッドの幅（IE）
layout-grid-line　行グリッドの高さ（IE）
layout-grid-mode　グリッドに文字を乗せるかどうかを指定（IE）
layout-grid-type　グリッドへの文字の乗せ方（IE）

layout-grid-char 文字グリッドの幅を指定

layout-grid-char: ;

layout-grid-char（レイアウトグリッドチャー）は、文字グリッドの幅（縦書きの場合は高さ）を指定します。

layout-grid-char : none

文字グリッドの幅を指定しない（初期値）

layout-grid-char : auto

最も大きな文字に合わせて文字グリッドの幅が設定

layout-grid-char : 数値

単位はpx・em・exなど

layout-grid-char : %

親ボックスのサイズに対する割合を%値で指定

文字グリッド幅のレガシー仕様と現代のWeb標準における均等配置設計

ホームページ（ウェブサイト）の文字組みにおいて、文字と文字の間隔を一定の格子（グリッド）に合わせ、原稿用紙のように美しく整列させたいケースがあります。かつてInternet Explorer（IE）独自の拡張プロパティとして利用されていた「layout-grid-char」は、要素内の文字グリッドの幅（縦書きの場合は高さ）を指定するための設定でした。より専門的には、このプロパティの仕様的な役割と、現代の標準的なホームページ制作における最適な代替アプローチを理解しておく必要があります。

layout-grid-charの指定値とその目的

layout-grid-charは、テキストを配置するための「1文字分の格子幅」を明示的に指定し、フォントの種類に関わらず一定の文字間隔を維持するために使われていました。指定できる値には以下のものがありました。

・none（初期値）
文字グリッドの幅を指定せず、フォント本来の幅に基づいて通常通りテキストを配置します。

・auto（自動）
配置されている最も大きな文字のサイズに合わせて、自動で文字グリッドの幅を均等に算出します。

・数値または%
pxやemなどの単位を用いた具体的な数値、あるいは親ボックスに対する割合で、1文字分の格子幅を固定します。これにより、全角文字や半角英数字の配置を一定の間隔に揃えるコントロールが可能でした。

しかしながら、これらの仕様はIEの終了に伴い、現代のWeb標準（Chrome、Safari、Edge、Firefoxなど）の仕様からは完全に除外されています。そのため、現在のホームページ制作において記述しても機能しない点に注意が必要です。

現代のホームページ（ウェブサイト）における等幅配置の実装手法

現在のWeb標準環境において、文字をきれいに格子状に整列させたり、均等な文字間隔を持った美しい日本語タイポグラフィを表現したりするためには、別の洗練されたCSSプロパティを組み合わせてプログラミングを行います。

最も確実なアプローチは、フォント自体の特性を制御する「font-variant-numeric: tabular-nums;」の指定や、すべての文字が同じ横幅を持つ等幅フォント（monospaceなど）をファミリーに指定する方法です。

さらに、文字と文字の間の余白を微調整する「letter-spacing」をem単位（例：letter-spacing: 0.1em;）で適切に設定し、テキストの配置を均等に割り振る「text-align: justify;（両端揃え）」を併用することで、古い独自仕様に頼ることなく、あらゆるデバイスで均整のとれた可読性の高いレイアウトを再現できます。

事業用ホームページの制作において、洗練された文字組みの美しさを取り入れつつ、検索エンジン（SEO）に最適化された強固なソースコードを維持するためには、現代の閲覧環境に即した標準技術を正しく選択していくことが極めて重要です。

layout-grid-char: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作時にCSSの指定においてパーセントで値を指定した場合、ブラウザ解像度に合わせて柔軟に対応できるメリットもありますが、メディアクエリで幅が小さくなったときの取り扱いを指定しておかないと、ブラウザの幅によっては非常に窮屈なレイアウトになってしまうことがあります。

layout-grid-line 行グリッドの高さを指定

layout-grid-line: ;

layout-grid-line（レイアウトグリッドラインを使用することで、行グリッドの高さ（縦書きの場合は幅）を指定します。

layout-grid-line : none

無指定（初期値）

layout-grid-line : auto

最も大きな文字に合わせて行グリッドの高さを設定

layout-grid-line : %

親ボックスのサイズに対する割合を%値で指定

layout-grid-line : 数値

単位はpx・em・exなど

古典的な行グリッド仕様と現代のWeb標準における行間設計の最適化

ホームページ（ウェブサイト）上で日本語の文章を縦書きで表示したり、特定の行幅に美しく整列させたりしたい場面があります。かつてInternet Explorer（IE）独自の拡張プロパティとして提供されていた「layout-grid-line」は、要素内の行グリッドの高さ（縦書きの場合は幅）を指定するための設定でした。より専門的には、このプロパティの仕様的な役割と、現代の標準的なホームページ制作における最適な行間設計の手法を理解しておく必要があります。

layout-grid-lineの指定値とその役割

layout-grid-lineは、テキストを配置するための「行の格子」の間隔を明示的に指定し、文字のフォントサイズに関わらず一定のベースラインを維持するために使われていました。指定できる値には以下のものがありました。

・none（無指定）
行グリッドを設定せず、ブラウザの標準的なテキスト配置を行います。

・auto（自動）
配置されている最も大きな文字のサイズに合わせて、自動で行グリッドの高さを均等に算出します。

・数値または%
pxやemなどの単位を用いた具体的な数値、あるいは親ボックスに対する割合で、行の高さの基準となるグリッドラインの間隔を固定します。

しかしながら、これらの仕様はIEの終了に伴い、現代のWeb標準（Chrome、Safari、Edge、Firefoxなど）の仕様からは完全に除外されています。そのため、現在のホームページ制作において記述しても機能しない点に注意が必要です。

現代のホームページ（ウェブサイト）における行間設計の実装手法

現在のWeb標準環境において、読みやすく均整のとれた日本語の行間や、縦書きにおける美しい行の並びを表現するためには、別の洗練されたCSSプロパティを組み合わせてプログラミングを行います。

最も基本かつ重要なプロパティは「line-height」です。line-heightに単位のない数値（例：line-height: 1.7;）を指定することで、フォントサイズに比例した均等で美しい行高をすべてのモダンブラウザで安全に再現できます。
また、縦書きを実装する「writing-mode: vertical-rl;」を適用した環境において、行同士の間隔（横方向の並び）をコントロールしたい場合は、line-heightによる制御に加えて、要素間の余白を調整する「margin」や「padding」を適切に組み合わせて設計します。

事業用ホームページの制作において、日本の伝統的な文字組みの美しさを取り入れつつ、検索エンジン（SEO）に最適化された強固で保守性の高いソースコードを維持するためには、古い独自仕様に頼るのではなく、現代の閲覧環境に即した標準技術を正しく選択していくことが極めて重要です。これにより、訪問者がストレスなく読み進められるユーザーインターフェースを構築できます。

layout-grid-line: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作におけるCSSの設定で閉じ忘れがあると、CSSが全く効かなくなり、ホームページのレイアウトやカラーの設定が一切反映されなくなってしまう事がありますので注意が必要です。場合によってはレイアウト崩れなどが起こることがありますので、Webデザインの調整などの際には、閉じ忘れに十分注意しましょう。

layout-grid-mode グリッドに文字を乗せるかを指定

layout-grid-mode: ;

layout-grid-mode（レイアウトグリッドモード）を使用することで日本語などの文字列をグリッドに乗せるかを指定します。

both

横方向・縦方向ともグリッドに乗せる（初期値）

none

横方向・縦方向ともグリッドに乗せない

line

行グリッド（横書きの場合の高さ）のみを有効

char

文字グリッド（横書きの場合の幅）のみを有効 チャー

文字配置の有効化と現代のコーディング規約に沿ったグリッド設計

ホームページ（ウェブサイト）を制作する際、日本語の文章の行方向や列方向の整列状態を細かくコントロールしたい場面があります。かつてInternet Explorer（IE）独自の拡張プロパティとして提供されていた「layout-grid-mode」は、要素内の文字列をあらかじめ定義されたレイアウトグリッド（格子）に沿わせるかどうか、あるいはどの方向のグリッドを有効にするかを指定するための設定でした。より専門的には、このプロパティの挙動の特徴と、現在のモダンなWeb制作においてどのように設計を置き換えるべきかを理解しておく必要があります。

layout-grid-modeの指定値とその挙動

layout-grid-modeは、文字グリッド（横方向の間隔）と行グリッド（縦方向の間隔）のどちらを有効化するかを以下の指定値によって制御していました。

・both（両方）
縦方向と横方向の双方のグリッドを有効にし、文字を完全に格子状に配置します。日本語の原稿用紙のようなきっちりとした文字組みを実現する際の標準的な設定でした。

・none（なし）
どちらのグリッドも適用せず、文字本来の幅やブラウザの標準的な行間計算に基づいて通常通りテキストを描画します。

・line（行のみ）
行グリッド（横書きの場合は行の高さ、縦書きの場合は行の幅）のみを有効にし、文字間のグリッドは無視してプロポーショナルに配置します。

・char（文字のみ）
文字グリッド（横書きの場合は文字の幅、縦書きの場合は文字の高さ）のみを有効にし、行間は通常の計算に基づいて描画します。

これらの仕様は、レガシーブラウザであるIEの終了とともに現代のWeb標準（ChromeやSafariなど）からは除外されたため、現在のホームページ（ウェブサイト）制作で記述しても機能しません。

現代のWeb標準における文字組みのグリッド制御

現在のホームページ制作において、文字の配置ルールを整えたり、美しく整列した日本語タイポグラフィを実装したりするためには、最新の標準CSSプロパティを活用してプログラミングを行います。

縦書きにおいて行の間隔を高精度に制御したい場合は、「writing-mode: vertical-rl;」を指定した上で、行間を制御する「line-height」や、要素間の余白を調整する「margin」「padding」を適切に組み合わせて設計します。

また、文字同士の横方向の整列を美しく保つためには、「letter-spacing」による文字間隔の微調整や、「text-align: justify;（両端揃え）」を併用することで、IE時代の仕様に頼ることなく、あらゆるデバイスで均整のとれた可読性の高いレイアウトを再現できます。

事業用ホームページにおいて、東アジア圏の美しい文字組みの文化を取り入れつつ、検索エンジン（SEO）に最適化された強固なソースコードを維持するためには、現在の閲覧環境に即したWeb標準の設計ルールを正しく選択していくことが重要です。

layout-grid-mode: ;

ホームページ制作・Webデザインの1ポイント

ホームページ制作では、親要素の指定値との相対的な数値で子要素を設定するケースがあります。その親要素の指定値を少し変更した場合、意図せず子要素の指定値も影響を受けることがあります。メディアクエリの利用などの際には、相対指定を再設定する必要がある場合がありますのでスマートフォン表示がおかしい場合は、確認してみましょう。

layout-grid-type グリッドへの文字の乗せ方を指定

layout-grid-type: ;

layout-grid-type（レイアウトグリッドタイプ）を使用することで、グリッドのタイプ（グリッドへの文字の乗せ方）を指定します。

fixed

すべての文字をグリッドの中心

loose

全角文字や半角カナはグリッド幅を空けて、半角英数はその半分の幅を空けて表示（初期値） ルース

strict

全角文字や半角カナはグリッドの中心に、半角英数はそのまま表示

日本語の原稿用紙組み表現と現代のWeb標準における代替設計

ホームページ（ウェブサイト）上で日本語の文章を縦書きで表示したり、原稿用紙のように文字の格子（グリッド）に美しく整列させたりしたい場面があります。かつてInternet Explorer（IE）独自のプロパティとして登場した「layout-grid-type」は、こうした東アジア圏特有の文字組み（グリッドへの文字の乗せ方）を制御するための設定でした。より専門的には、このプロパティの歴史的背景と、現代の標準的なホームページ制作における代替アプローチを理解しておくことが求められます。

layout-grid-typeの役割と指定値による挙動

layout-grid-typeは、あらかじめ設定されたグリッドに対して、全角文字や半角英数文字をどのように配置するかを細かくコントロールするプロパティです。指定できる値には以下のものがありました。

・fixed（固定）
すべての文字の種類に関わらず、一律でグリッドの中心に合わせて均等に配置します。等幅フォントのようなカチッとした原稿用紙風の文字組みを表現できます。

・loose（ルース）
全角文字や半角カタカナはグリッドに合わせて配置し、半角英数文字に関してはその半分の幅のグリッドを適用して自然な文字間隔で表示します。

・strict（ストリクト）
全角文字などはグリッドの中心に配置しつつも、半角英数文字についてはグリッドに縛られず、プロポーショナル（文字ごとの本来の幅）でそのまま表示します。

しかしながら、これらのプロパティはW3Cの国際的なWeb標準仕様には採用されず、IE独自のレガシーな機能として残ったため、現代の主要なブラウザ（Chrome、Edge、Safari、Firefoxなど）ではサポートされていません。そのため、現在のホームページ制作で記述しても意図した通りの表示は再現されない点に注意が必要です。

現代のホームページにおける文字組みグリッドの実装手法

現在のWeb標準環境において、日本語の文字を格子状にきれいに整列させたり、縦書きの美しい文字組みを実現したりするためには、別の洗練されたCSSプロパティを組み合わせてプログラミングを行います。

まず、文字を縦書きにする場合は「writing-mode: vertical-rl;」プロパティを使用します。これにより、日本語特有の右から左へ流れる縦書きレイアウトが最新のブラウザでも安全に再現できるようになります。

さらに、文字の等幅配置（グリッドのような整列）を実現するためには、フォントの設定を制御する「font-variant-numeric: tabular-nums;」や、文字幅を等幅に固定するフォントファミリー（monospaceなど）の指定が効果的です。また、文字と文字の間隔を一定に保つ「letter-spacing」や、テキストの配置を均等に割り振る「text-align: justify;（両端揃え）」を適切に組み合わせることで、IE時代の古い仕様に頼ることなく、あらゆるデバイスで均整のとれた美しい日本語タイポグラフィを表現できます。

事業用ホームページにおいて、伝統的な縦書き文書の美しさを取り入れつつ、検索エンジン（SEO）にも正しくインデックスされる堅牢なマークアップを維持するためには、こうした最新の標準技術に基づいた設計ルールを採用していくことが極めて重要です。

layout-grid-type: ;

ホームページ制作・Webデザインの1ポイント

テンプレートなどを使用して制作されたホームページの場合、CSSの設計が詳しく把握できていないままホームページのレイアウトを変更してしまうと、親要素の設定を子要素が解釈する部分などでズレが出ることがあります。デベロッパーツールなどで要素の関係性を確認するとエラー箇所が分かる場合がありますので利用を検討しましょう。

marker-offset マーカーとの間隔を指定

marker-offset: ;

marker-offset（マーカーオフセット）は、リストマーカーとリスト内容との間である、「マーカーとの間隔」を指定します。

marker-offsetは、一般的なブラウザでサポートされていないため、一般的には、margin、paddingでリストの余白を指定します。

marker-offset: auto

自動設定（初期値）

marker-offset: 数値

単位はpxなど

リストデザインとUIの微調整におけるmarker-offsetの役割

ホームページ（ウェブサイト）を構築する際、箇条書きの見やすさはテキストの視認性を大きく左右します。通常、リストの文頭に表示されるマーカー（点や数字）と本文テキストとの間隔はブラウザによって自動的に計算されますが、デザインの細部にこだわる場合、この余白を正確にコントロールしたい局面が出てきます。より専門的には、歴史的な背景を持つ「marker-offset」プロパティの仕様と、現代のWeb制作における代替手法を理解しておくことが重要です。

マーカーとテキストの間隔を制御する基本仕様

marker-offset（マーカーオフセット）は、リスト要素のマーカー（::marker が生成する記号や数字）と、それに続くテキストコンテンツとの間の距離を指定するために登場したCSSプロパティです。「marker-offset: 10px;」のように数値と単位を指定することで、記号と文字の隙間を広げたり狭めたりする制御が可能でした。

しかしながら、このプロパティはCSSの古い仕様（CSS2）で定義されたものの、多くの主要ブラウザで十分にサポートされないまま、その後の仕様改定で削除（廃止）された経緯があります。そのため、現代のホームページ制作においては、このプロパティをそのまま使用しても意図した通りの表示が再現されない可能性が非常に高い点に注意が必要です。

現代のWebデザインにおける最適な代替アプローチ

現在、ブラウザの互換性を保ちながらマーカーとテキストの間隔を美しく調整するためには、別のCSSプロパティを組み合わせて実装する手法が一般的です。

最も確実な方法として、デフォルトのリスト記号を「list-style: none;」で非表示にした上で、擬似要素（::before）を使用して独自のマーカーを埋め込む手法が挙げられます。擬似要素に対して「margin-right: 12px;」や「padding-right: 8px;」といった余白を指定することで、あらゆるブラウザで完全に統一された美しい間隔を表現できるようになります。
また、最新のCSS仕様では ::marker 擬似要素そのもののカスタマイズ性が向上しているため、::marker { padding-right: 10px; } のような指定方法が用いられることもあります。事業用ホームページの運用において、閲覧環境の違いによる表示崩れを防ぎ、常に高いクオリティのユーザーインターフェースを維持するためには、こうしたブラウザの対応状況を見据えたプログラミングの工夫を施していくことが重要です。

marker-offset: ;

ホームページ制作・Webデザインの1ポイント

HTMLのリストを利用すると、番号や黒点などが内容の先頭に付け加えられます。通常のテキストであれば、これらマークとの間隔はスペース等で設定できますが、リストとしてのマークアップを行うと、リストマークが自動で挿入される仕組みであるため、その間隔を設定するときはこのCSSプロパティを使用します。

include-source 他のHTML文書をレイヤー表示（NN）

include-source: ;

include-source（インクルードソース）は、HTML文書（ウェブページ）に他のHTML文書をレイヤー表示します。

URL（ファイル指定）

URL

外部HTMLの読み込み仕様と現代のWeb標準におけるコンポーネント設計

ホームページを制作する際、ヘッダーやフッターのような共通パーツを別ファイルとして管理し、各ページに読み込ませることは、保守性の高いサイトを構築するための基本です。かつてNetscape Navigator（NN）というブラウザが広く使われていた時代、独自のレイヤー機能（layerタグ）の中で外部のHTMLファイルを読み込んで表示させるために「include-source」というプロパティが使われていました。この古い仕様の目的と、現在のモダンなホームページ制作における共通化の代替アプローチを理解しておく必要があります。

include-sourceの役割とブラウザ仕様の終焉

初期のWeb制作において、フレーム（iframeなど）を使わずに、ページの一部に別のHTMLファイルの内容を動的に埋め込む（インクルードする）手法は、各ブラウザが独自に機能を競い合っていました。Netscape Navigatorは独自のlayerタグを拡張し、include-source: url(‘header.html’);のように指定することで、レイヤー内に外部ファイルを読み込む仕組みを提供しました。

しかしながら、このプロパティはW3Cが定める国際的なCSSの標準仕様には採用されませんでした。その後、HTML5への移行とNetscapeブラウザの終焉に伴い完全に廃止されたため、現代の主要なブラウザ（Chrome、Safari、Edgeなど）では一切機能しないレガシーなコードとなっています。

現代のホームページにおけるファイルの共通化と読み込み手法

現在のホームページ制作において、外部ファイル（ソース）を読み込んでページ内に埋め込むためには、CSSのプロパティではなく、より確実で標準化されたプログラミング技術を用います。

サーバーサイド技術（PHPなど）によるインクルード

事業用ホームページで最も一般的な手法は、PHPの「include」や「require」を利用する方法です。サーバー側でファイルを結合してからブラウザに送信するため、検索エンジン（SEO）にも内容が完全に認識され、表示速度も安定します。WordPressなどのCMSもこの仕組みで動いています。

JavaScript（フロントエンド）による非同期通信

「fetch()」や「XMLHttpRequest」などのJavaScriptを利用して、ページ読み込み後に非同期で別のHTMLファイルを取得し、DOMに挿入する手法です。ページ遷移を伴わないシングルページアプリケーション（SPA）などで頻繁に使われます。

HTMLの標準要素（iframe）

外部の独立したコンテンツ（GoogleマップやYouTube動画など）をそのままの形で安全に読み込みたい場合は、標準の「iframe」タグを使用します。

不要な独自仕様を排除し、現在のWeb標準に則った堅牢な技術でパーツを共通化・管理していくことは、将来のホームページ更新や修正のコストを大幅に削減し、Web集客の基盤となる強固なサイト構造を維持していくために極めて重要です。

include-source: ;

ホームページ制作・Webデザインの1ポイント

include-sourceをはじめCSSに関しても、Netscape Navigator独自仕様のものがたくさんありました。しかしHTML5ではNetscape Navigator独自のHTML自体が廃止されているため、使われるケースは極めて稀であると考えられます。

layer-background-image レイヤーの背景画像を指定（NN）

layer-background-image: ;

layer-background-image（レイヤーバックグラウンドイメージ）は、レイヤーの背景画像(バックグラウンドイメージ)を指定します。

現代のWeb標準における背景画像制御の最適化

サイトデザインにおいて、特定の要素の背後に画像を配置して視覚的な魅力を高めることは、ブランドイメージを伝えるための基本的な手法です。かつてNetscape Navigator（NN）というブラウザが全盛だった時代に、独自の「レイヤー機能（layerタグ）」の背景に画像を指定する目的で登場したのが「layer-background-image」プロパティでした。この古い独自仕様の歴史的背景と、現代の標準的なホームページ制作を支えるマルチ背景画像の実装手法を理解しておく必要があります。

layer-background-imageの登場背景と廃止

初期のWeb制作において、要素を重ね合わせて配置する「レイヤー」の概念は各ブラウザが独自に模索していました。Netscape Navigatorは独自のlayerタグを導入し、そのレイヤー専用の背景画像を設定するためにlayer-background-imageプロパティを用意しました。
しかしながら、その後W3Cによって策定された国際標準のボックスモデルや、重ね合わせを制御する「z-index」および「position」プロパティが普及するにつれ、この独自タグとプロパティは完全に役割を終えました。HTML5の登場とともに完全に廃止されたため、現代の主要なブラウザ（Chrome、Safari、Edgeなど）では一切機能しないレガシーな記述となっています。

現代のホームページにおける背景画像の一括・多重管理

現在のホームページ制作において、要素の背景に画像を表示し、柔軟にレイアウトをコントロールするためには、世界標準である「background-image」プロパティを使用します。

さらに現代のCSS3仕様では、かつてのレイヤープロパティのように要素を新しく追加しなくても、1つの要素に対して複数の背景画像を重ねて表示できる「マルチ背景（多重背景）」機能がサポートされています。以下のようにカンマ区切りで記述（プログラミング）を行うことで、高度な重ね合わせデザインをスマートに実現できます。

background-image: url('front-pattern.png'), url('base-texture.jpg');
background-repeat: no-repeat, repeat;
background-position: center, left top;

この手法を活用することで、前面の装飾パターンと背面のテクスチャ画像を1つのボックス内で重ね合わせることが可能になり、HTMLの構造を無駄に複雑にすることなく軽量なホームページ（ウェブサイト）を構築できます。

ページの読み込み速度を高速化させ、検索エンジン（SEO）からの評価を高めるためには、不要なタグや古い独自仕様のコードを排除し、このようなモダンな標準技術に則ってコーディングを行うことが極めて重要です。あらゆる画面サイズに対応するレスポンシブな事業用ホームページを安定して運用していくための、重要な土台となります。

layer-background-image: ;

ホームページ制作・Webデザインの1ポイント

layer-background-image（レイヤーバックグラウンドイメージ）など、CSSに関しても、Netscape Navigator（ネットスケープナビゲーター）独自仕様のものがたくさんありました。しかしHTML5ではNetscape Navigator独自のHTML自体が廃止されているため、使われるケースは極めて稀であると考えられます。

layer-background-color レイヤーの背景色を指定（NN）

layer-background-color: ;

layer-background-color（レイヤーバックグラウンドカラー）は、レイヤーの背景色を指定します。主にHEXで指定します。

独自レイヤー背景色仕様の変遷と現代のWeb標準における背景設計

ホームページ（ウェブサイト）を装飾する際、コンテンツの背景に色を敷くことで情報のまとまりを際立たせ、ユーザーの視認性を高める手法は非常に一般的です。かつてNetscape Navigator（NN）がブラウザ市場の多くを占めていた時代、独自の「レイヤー機能（layerタグ）」の背景色を指定するために「layer-background-color」というプロパティが使われていました。より専門的には、この古い独自拡張の歴史的な位置づけと、現代の標準的なホームページ制作における最新の背景色制御の手法を理解しておく必要があります。

layer-background-colorの仕様とブラウザの歴史

初期のWeb制作において、要素を重ね合わせて立体的なレイアウト（レイヤー構造）を表現するための仕組みは、ブラウザごとに仕様が分かれていました。Netscape Navigatorは独自のlayerタグをサポートしており、そのレイヤー専用の背景色を適用するプロパティとしてlayer-background-colorが定義されました。

主に16進数のカラーコード（HEX数値）などを用いて色を設定する仕様です。
しかしながら、その後W3Cによって国際標準であるCSSのボックスモデルや、要素の重ね合わせを制御する「z-index」プロパティが確立されると、この独自の仕組みは不要となりました。HTML5への移行に際してNetscape独自のタグとともに完全に廃止されたため、現代の主要なブラウザ（ChromeやSafariなど）では一切機能しないレガシーなコードとなっています。

現代のホームページ（ウェブサイト）における背景色の標準的な実装と透過制御

現在のホームページ制作において、ボックス要素の背景に色を設定し、安全かつ柔軟にWebデザインをコントロールするためには、世界標準の「background-color」プロパティを使用します。

さらに現代のCSS3仕様では、かつての古いレイヤー仕様では難しかった「背景色のみを透過させる（アルファチャンネルの制御）」といった高度な表現が、以下の指定（プログラミング）によって簡単に実現できるようになっています。

・HEX値（16進数）による指定（例：background-color: #333333;）
・RGBaによる半透明指定（例：background-color: rgba(0, 0, 0, 0.5);）

例えば、メインビジュアルの大きな画像の上にテキストブロックを重ねて配置する際、背景を完全に塗りつぶすのではなく、rgbaを用いて半透明の背景色を敷くことで、背後の画像を美しく透かしながらも文字の圧倒的な読みやすさを確保できます。要素全体の不透明度を変える「opacity」プロパティとは異なり、background-colorで透過度（アルファ値）を制御すれば、内部のテキスト文字まで一緒に薄くなってしまうという表示の不調を完全に回避できます。

不要な独自タグや古いレガシーコードを排除し、現在のクリーンなWeb標準に則ってスタイルシートを組み立てていくことは、ホームページの読み込み速度を高速化させ、検索エンジン（SEO）からの評価を高める上でも極めて重要です。あらゆる閲覧環境で安定して表示される堅牢な事業用ホームページを構築するための大切な土台となります。

layer-background-color: ;

ウェブ用カラー一覧

ホームページ制作において背景色指定に用いるウェブ用カラー。

Color Name　ウェブ用カラー

ホームページ制作・Webデザインの1ポイント

layer-background-color（レイヤーバックグラウンドカラー）などCSSに関しても、Netscape Navigator独自仕様のものがたくさんありました。特にネットスケープ独自仕様はレイヤー関連が多い印象があります。しかしHTML5ではNetscape Navigator独自のHTML自体が廃止されているため、使われるケースは極めて稀であると考えられます。

ホームページ（ウェブサイト）制作・作成に役立つCSS3のプロパティ一覧は
⇒css3 property reference index ホームページ制作の装飾プロパティ

ホームページのCSS・スタイルシート編集方法

ホームページ制作やホームページ修正を行う際のCSS・スタイルシート編集方法について。ホームページは基本的にHTMLで構成されています。一方、その外観・デザインを設定するのはCSS（Cascading Style Sheets）・スタイルシートです。ページの基本構成はHTMLで、レイアウトやカラーの設定といった外観面はCSSで設定されています。

ホームページのCSS・スタイルシート編集方法