BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

フレームにおける問題点(後編)

前編でもフレームの問題点を挙げましたが、後編ではインラインフレーム(iframe)要素にも関連した問題点を挙げていきます。

印刷

利用環境によって印刷の仕方が異なります。

同じWindows環境であっても、使用するブラウザにより印刷の仕方が異なります。多くの場合、ページ全体を印刷しようとするとうまく印刷されません。印刷したいフレームを閲覧者に選択させる必要があり(*1)、フレームを採用しないWebサイトと比べて作業が困難になってしまいます。

検索エンジン

検索エンジンにおけるランクづけの要因は様々ですが、次の2点も評価の対象となっているようです。

  1. 本文中にキーワードが含まれている
  2. 多くのサイトからリンクされている(*2)

フレームを採用しているWebサイトの場合、トップページにたくさんリンクしてもらっても、トップページのHTMLファイルは通常フレーム分割の定義しか指定されておりません(*3)肝心のキーワードは別のHTMLファイルに記述されているため、検索で上位を狙うことが困難になってしまいます(*4)

非対応環境

携帯電話環境等フレームに対応していない環境が存在します。noframes要素(*5)で適切にナビゲーションを行いましょう。フレーム初期設定時の中身へのリンクを用意するだけでも、訪問者は全てのリンクをたどることが可能になります。

<noframes>
<body>
<ul> <li><a href="menu.html">メニューへ</a></li>
<li><a href="main.html">メインページへ</a></li>
</ul>

</body>
</noframes>

また、音声ブラウザのようにフレーム文書を容易に閲覧できない環境が存在します。frame要素にtitle属性及びname属性(*6)を指定することによりフレームの内容を伝えることができます。

<frame src="menu.html" title="メニュー" name="menu" />
<frame src="main.html" title="メインページ" name="main" />

これらの問題点は、インラインフレーム(iframe)要素にも同様に当てはまるでしょう。

<iframe src="renewal.html" title="更新履歴" name="renewal" width="300" height="300">
<a href="renewal.html">更新履歴</a>
</iframe>

このように、フレームは数多くの問題点を抱えています。解決方法はいくつかありますが、ここではスタイルシートによる擬似フレーム化を紹介します。但し、印刷の際にoverflow:scroll;(*7)が適用されないよう注意する必要があります。
【参考】印刷用CSSの導入

スタイルシート
@media screen{ .scroll{ overflow:scroll; height:100px; } }
表示例

私がハンドルネームを「セロリ」としたのは、イメージカラーを緑色にしたいと思ったからです。目に優しい緑色のように、私自身優しくなれればという思いをこめています。野菜の名前として広く認知されており、読み間違えられる恐れが少ないことも考慮しています。

理由は他にもあり、機動戦士ガンダムZZに登場するお笑い系(?)キャラクター「マシュマー=セロ」にも関連づけています。が、ガンダムに興味のない人にも親しみをこめていただけるように考えた結果、「セロリ」という名前に決まりました。

この方法ではメニュー部分を複数のページで共有することはできませんが、フレームの抱える問題点を解決する手段として有効です(*8)

(*1)
IE6の場合、「印刷」または「印刷プレビュー」画面で「選択されたフレームのみを印刷する」を選びます。但し、印刷したいフレームに先にフォーカスを当てておく必要があります。Netscape7.1の場合、「印刷プレビュー」画面からはフレームを選択して印刷することができません。Opera8.5の場合、「印刷」画面からはフレームを選択できません。「印刷プレビュー」を複数回クリックして印刷したいフレームを切り替える必要があります。
(*2)
検索サイトから高く評価されているWebサイトからリンクされると、リンクされたページの評価も上昇するようです。評価されていないサイトから闇雲にリンクしてもらっても、あまり効果はないようです。
(*3)
検索順位を上げる目的でnoframes要素を悪用すると検索スパム行為とみなされ、最悪の場合検索の対象外となってしまいます。
(*4)
検索ロボットの中には、frame要素を読み込み関連付けをしてくれるものもあるようです。しかし、初期設定で読み込まないページとの関連付けは期待できないものと思われます。
(*5)
noframeではありません。複数のフレームの代用なので複数形が正しくnoframesです。
(*6)
XHTML1.0においては、name属性とid属性を併記するよう推奨されています。
(*7)
overflow-x及びoverflow-yはIE独自拡張プロパティであり、他の視覚系ブラウザには適用されません。レイアウトを大きく崩す要因となりますので使わないようにしましょう。
(*8)
メニュー部分を複数のページで共有する方法は、フレーム以外にもPHPやSSIを使うことでも可能です。但し、多少の知識と利用可能な環境が必要になります。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。