現在のホームページ(ウェブサイト)制作において、画面上の特定の場所に要素を配置して重ね合わせたり、新聞のように文章を複数の段落に分けたりするデザインは当たり前のように使われています。インターネットの普及期であった1990年代後半、これらの高度なレイアウトを実現するために特定のブラウザ(Netscape Navigator 4など)で独自に生み出されたのが、「layer」「ilayer」「nolayer」そして「multicol」といったHTMLタグです。
「layer」タグと「ilayer」タグは、ページの上に透明なフィルム(レイヤー)を何枚も重ねるように、テキストや画像を自由に配置するためのタグでした。「nolayer」タグは、これらの機能に対応していない古いブラウザに向けた代替テキストを表示する役割を持っていました。また、「multicol」タグは「multiple columns」の略であり、指定したテキストを自動的に多段組み(2段表示や3段表示など)にするための画期的なタグでした。
しかし、これらのタグは特定の企業が自社のブラウザ専用に開発した独自仕様であり、世界共通のHTML標準規格として正式に採用されることはありませんでした。やがてWeb標準化の波が訪れ、文書の構造はHTMLで定義し、見た目のレイアウトはすべてCSS(カスケーディングスタイルシート)で制御するという原則が確立します。これに伴い、特定のブラウザでしか動作しないこれらのタグは完全に廃止されました。
より専門的には、現在でも古い知識のままこれらの非標準タグを使用すると、スマートフォンなどの最新のブラウザ環境ではレイアウトが完全に崩れてしまいます。さらに、検索エンジンのクローラーは世界標準の正しいHTML構文を読み取ってページの内容を評価します。非標準のタグが混入していると、文書構造の解析が正常に行われず、SEO(検索エンジン最適化)においてマイナスの評価を受ける可能性があります。事業用のホームページ(ウェブサイト)を構築し、持続的な集客を目指すためには、廃止された過去の独自仕様タグを使用せず、CSSを用いて正確にデザインを制御することが求められます。本ページでは、これら独自タグがたどった歴史と、現代の基準に則った正しいCSSによるレイアウト手法について詳しく解説します。
現代のWeb標準に基づいた代替レイアウト手法
かつて「layer」や「multicol」などのタグが担っていた複雑なレイアウト機能は、現在すべてCSSのプロパティとして引き継がれています。ここでは、現代の事業用ホームページ(ウェブサイト)において、検索エンジンに正しく評価されながら、意図した通りのデザインを実現するための適切な実装方法について解説します。
layerタグに代わるCSSのpositionプロパティ
画像の上にテキストを重ねたり、画面の特定の位置に要素を固定したりする表現は、CSSの「position」プロパティを使用します。親要素に「position: relative;」を指定し、動かしたい子要素に「position: absolute;」を指定することで、かつての「layer」タグと同じようにピクセル単位で正確な配置が可能になります。また、重なりの順序(手前か奥か)を制御する際は、「z-index」プロパティを活用します。これにより、すべてのブラウザで共通して動作する安全なレイアウトを実現できます。
multicolタグに代わるCSSの段組プロパティ
文章を読みやすくするために2段組みや3段組みにする場合は、CSSのマルチカラムレイアウト機能を使用します。「column-count」プロパティで段数を指定したり、「column-width」プロパティで段の幅を指定したりすることで、画面の大きさに合わせて自動的に段組が調整されます。スマートフォンなどの幅が狭い画面では1段になり、パソコンの広い画面では多段組みになるといったレスポンシブな対応も容易に行えるため、ユーザーの可読性を大きく向上させます。
標準化された技術がもたらすSEOと集客への効果
より専門的には、独自タグに頼らずHTMLとCSSを役割通りに分離させることは、ページの表示速度の改善やクローラビリティの向上に直結します。検索エンジンは、文書構造がクリーンで、ユーザーにとって読みやすい環境を提供しているホームページ(ウェブサイト)を高く評価します。過去の技術に依存せず、最新のWeb標準技術を取り入れ続けることが、事業の長期的な集客と成果を支える重要な基盤となります。
layer(レイヤー)
<layer></layer>
ホームページ制作(ウェブサイト制作)の際に使用する<layer>タグについてのご説明です。
ホームページ制作において<layer>(レイヤー)タグは、Netscape Navigator独自仕様(Netscape Navigator 6から不採用)で、絶対位置にレイヤー表示する際に使用します。
<layer> 絶対位置にレイヤー表示(NN)

Netscape Navigator独自仕様。レイヤー。
<layer>タグを使用することで、ソース中で記述された位置に関係なく、ウィンドウの左上を基準として
left、topで指定した絶対位置にレイヤー表示します。
レイヤーは、画像などをセル画のように「重ねて使う」機能です。
なお、<ilayer>は記述された位置を基準として 相対位置にレイヤー表示します。
表示できない場合に<nolayer>で代替テキストを記述することができます。
src
レイヤー表示する内容を指定
src=””
bgcolor
背景色
bgcolor=””
width
横幅
width=””
height
高さ
height=””
left
左上からの絶対位置(横方向)
left=””
top
左上からの絶対位置(縦方向)
top=””
z-index
重ね順を指定
z-index=””
Netscape Navigator 6から不採用。
html5で廃止。
<layer></layer>
この<layer>タグはhtml5で廃止されたため、html5で制作されたホームページ(ウェブサイト)や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
ホームページ制作・SEOの1ポイント

SEOの考え方の方向性のひとつは、「該当部分の意味合いが曖昧で、検索エンジンはその場所の属性を自動で推測する」といったものを、積極的に制作者サイドで意味を明確化し、推測から確定へとシフトしてもらうことと考えることができます。
ilayer
<ilayer></ilayer>
ホームページ制作(ウェブサイト制作)の際に使用する<ilayer>タグについてのご説明です。
ホームページ制作において<ilayer>(インラインレイヤー)タグは、相対位置にレイヤー表示する際に使用します。
<ilayer> 相対位置にレイヤー表示(NN)

Inline Layer(インラインレイヤー)。ホームページ制作において<ilayer>タグを使用することで相対位置にレイヤー表示。Netscape Navigator独自仕様。インラインレイヤー。
src
src=””
html4.01規格外
html5で廃止。
<ilayer></ilayer>
この<ilayer>タグはhtml5で廃止されたため(html4.01でも規格外)、html5で制作されたホームページ(ウェブサイト)や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
ホームページ制作・SEOの1ポイント

ブラウザにCSS無指定の場合のCSSが用意されているため、ホームページ制作でCSSを指定せずシンプルなhtmlで作成したとしても十分にページを表現をすることができます。こうしたことから、ホームページは、あくまで「htmlタイプの文書である」ということがわかるような気がします。特定のブラウザのみ機能し、元々規格外のHTMLを使用すると、該当部分への検索エンジンのSEO評価は期待できませんので、正規であり汎用性のある基本的なHTMLタグを使用しましょう。
nolayer
<nolayer></nolayer>
ホームページ制作(ウェブサイト制作)の際に使用する<nolayer>タグについてのご説明です。
ホームページ制作における<nolayer>(ノーレイヤー)タグは、レイヤーが利用できない環境用の表示内容の指定します。
<nolayer> レイヤーが利用できない環境用の表示内容の指定(NN)

ホームページ制作において<nolayer>タグを使用することで、<layer>や<ilayer>に対応していないブラウザ用の代替内容を指定します。ノーレイヤー。
ただし、この<nolayer>タグは元々ネットスケープの独自仕様であった<layer>に対する代替指定になりますので、ホームページ制作で使用されることはほとんどありません。
ブラウザの独自仕様からオープンなWeb標準への移行と現代のレイヤー表現
ホームページ(ウェブサイト)制作の歴史において、<nolayer>タグは1990年代後半のいわゆる「ブラウザ戦争」の時代に、Netscape Navigatorというブラウザが独自に導入した<layer>および<ilayer>タグのフォールバック(代替表示)用として用意された要素です。より専門的には、特定のブラウザが実装した独自のレイヤー(要素の重ね合わせ)機能に対応していないInternet Explorerなどの他ブラウザに対して、コンテンツが完全に崩れてしまうのを防ぐ目的で、その内側に代替テキストや通常のHTML構造を記述するために使われていました。しかし、この独自仕様は広く普及することなく、その後のオープンなWeb標準の策定(W3Cによる標準化)に伴って完全に廃止される方向となりました。
現代のモダンなホームページ(ウェブサイト)制作において、要素を重ね合わせたり透過レイヤーを作ったりする表現は、HTMLタグではなくスタイルシート(CSS)を用いて行うことが世界的な標準となっています。具体的には、CSSの position プロパティ(relative や absolute、fixed など)と z-index プロパティを組み合わせることで、ブラウザに依存しない確実なレイヤー表現が可能になっています。このように、特定の環境に依存するレガシーなタグを排除し、標準的な仕様に則ってコーディングしていくことが、事業ホームページ(ウェブサイト)の表示の安定性を確保し、結果として検索エンジンからの正しい評価(SEO効果)につながっていきます。
要素の重ね合わせにおける視覚的コントラストの担保とSEOスパムの回避
CSSを用いて画像や背景、テキストブロックをレイヤー状に重ね合わせる高度なウェブデザインを実装する際は、デザイン性だけでなく、視覚的なコントラストの確保と検索エンジンのガイドラインへの準拠に細心の注意を払う必要があります。たとえば、背景画像の上に半透明のカラーレイヤーを重ね、その上にフォント(文字)を配置するようなスタイリングを行う場合、文字色と背景の色の相対値が近すぎると、一般のユーザーにとって極めて読みにくいホームページ(ウェブサイト)になってしまいます。これはユーザビリティを大きく損ない、直帰率を悪化させる直接的な原因になります。
さらに、より専門的には、検索エンジンのクローラーに対する「隠しテキスト(スパム判定)」のリスクを回避するという重要な側面もあります。過去には、SEO対策としてキーワードを背景色とまったく同じ色にして要素の背後に隠す悪質な手法が存在したため、現在の検索アルゴリズムは、要素の重なり(z-index)や表示状態(display: none; や opacity: 0; など)によってテキストがユーザーの目から事実上隠されていないかを厳格にチェックしています。
意図的な不正ではなく、純粋なデザイン上の装飾として要素を重ね合わせている場合であっても、結果としてコントラストが著しく低くなっていたり、テキストが他のレイヤーのインサイドに完全に埋もれてしまっていたりすると、検索エンジンからマイナスの評価を受ける要因になるかもしれません。どのような画面サイズやデバイスであっても、人間の目でテキストが明瞭に判別できる適切な配色とマークアップを徹底していくことが、事業の信頼性を高め、安全で効果的な内部SEOを推進するための基本となります。
<nolayer></nolayer>
ホームページ制作・SEOの1ポイント

現在でも画像などをCSSでフィルター掛けすることができますが、旧来から、HTMLなどで画像を組み合わせることも行われていました。html5になった現在では、画像にアルファ値で透過情報を加え、要素の重なり合いであるz-indexなどで重ねることが一般的です。
画像や要素を重ねるときは、その色の相対値によって隠しテキストや隠しコンテンツであるかの判断をされます。SEOを考える場合は、隠しテキストなどのSEOスパム判定を受けないように、しっかりと表示を確認してWebデザインを調整する必要があります。
multicol(マルチコル)
<multicol></multicol>
ホームページ制作(ウェブサイト制作)の際に使用する<multicol>タグについてのご説明です。
ホームページ制作において<multicol>(マルチコル)タグは、Netscape Navigator独自仕様で段組を行う際に使用します。
<multicol> 段組(NN)

multicolタグは、Netscape Navigator独自仕様。
テキストをcols=””で指定した段数に均等に分けて段組。
cols
段数
cols=””
width
段組全体の横幅
width=””
px %
gutter
段と段の間隔
初期値は10px
gutter=””
html5で廃止。
代替CSS
columns
代替CSSとしてマルチカラムレイアウト機能を使用します。「column-count」で段数を指定したり、「column-width」で段の幅を指定したりすることで、画面の大きさに合わせて自動的に段組が調整されます。
<multicol></multicol>
この<multicol>タグはhtml5で廃止されたため、html5で制作されたホームページ(ウェブサイト)や、html5ベースのWordPressテーマなど、html5で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。
ホームページ制作・SEOの1ポイント

段組のテンプレートなどがありますが、それを用いてホームページ制作を行う際、元のページの仕様とマッチしない場合があります。無料配布のテンプレートは便利な場合もありますが、根本仕様との設計の違いが生じる場合がありますので、細かな点を修正する場合に労力がかかる場合があります。
ホームページ(ウェブサイト)制作・作成に役立つHTML5のタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ(ウェブサイト)のHTML編集方法
ホームページのHTML編集方法について。ホームページ(ウェブサイト)は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作(ウェブサイト制作)なら
Web制作会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成(ウェブサイト制作)
『お客さまのお客さま目線』でのWeb制作、Webマーケティング」
ホームページ制作 京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレは、Webマーケティングツールとして、Webマーケティング・SEMを意識したWeb集客・プロモーション力のあるSEO特性・ウェブPR力の高いSEO対策付きのホームページ制作(ウェブサイト制作)・作成、WordPress(ワードプレス)などのCMS(コンテンツマネジメントシステム)の導入やカスタマイズ、ウェブサイトの高速表示化、レスポンシブデザイン、モバイルフレンドリーを得意としています。
ホームページ制作サービスにあたり、WordPress(ワードプレス)を利用したホームページ制作(ウェブサイト制作)をはじめ、HTML5,CSS3によるホームページ制作を行っております。Web集客のためのWebマーケティング効果の高いホームページ制作をはじめ、ホームページのリニューアル・更新・修正・管理、ホームページのSEO(SEO対策)、ホームページ運営やWebマーケティングにかかるWebコンサルティングなど、様々なサービスを提供しています。
Web集客・Webマーケティングに効果的なコンテンツマーケティング・コンテンツSEO・ウェブPRを加速させるWordPressなどCMSを活用したオウンドメディア構築、既にお持ちのホームページ(ウェブサイト)のWordPress化やWordPressのカスタマイズもお任せください!
ホームページ制作価格表(Web制作サービス)
WordPressホームページ制作(ウェブサイト制作)
WordPressをベースとしたホームページ制作やWordPressサイトのカスタマイズもおまかせください!既存ホームページをWordPressサイトへと変更する「WordPress化」のカスタマイズも可能です!
既に運用されているWordPressサイトの軽微な修正や大規模なカスタマイズまであらゆる分野に対応可能です。WordPressサイトのSEOやWordPressのエラー修正・復旧にも対応しています。
HTML5でのホームページ制作(ウェブサイト制作)
HTML5での静的HTMLホームページ制作(ウェブサイト制作)やHTML5でのWordPress(ワードプレス)テーマの制作なら、京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレにお任せください! HTML5で構築した企業ホームページ制作や店舗ホームページ制作をはじめ、PRサイトの制作、メディアサイト・情報サイトの制作、モバイルサイト・スマホサイト、ECサイト・ネットショップまであらゆるホームページ制作に対応しております。
静的HTMLでの新規ホームページ制作に関しては全てHTML5でページを作成させていただきます。HTMLでのリスティング広告用LP制作にも対応しております。
HTML4.01、HTML5問わずHTMLソースの修正にも対応しておりますので、既存ホームページの修正やカスタマイズもお任せください!
ホームページ制作実績
新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作(ホームページ作成)に対応しています。
ホームページ制作実績
ホームページの更新・修正
ホームページのページ更新やページ追加、文章や価格の修正、リンクの修正をはじめ、ホームページ内部の様々な箇所の修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。 ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、軽微な修正でもお気軽にご相談ください。スマホ対応化やSSL化、ホームページのエラー修正・エラー復旧にも対応しております。
ホームページの更新・修正料金 価格表
ホームページ制作 京都
京都でホームページ制作・ホームページ作成・Web制作ならお任せください。Web制作会社・ホームページ制作会社 ファンフェアファンファーレでは、京都はもちろんホームページ制作・SEO(SEO対策)・WebマーケティングのWebコンサルティングにつき全国対応しております。WordPressやHTML5でのホームページ制作・作成ならお任せください!ホームページの修正・更新作業・エラー修正にも対応可能です。







