ホーム > iWeb Lab > iWeb Tips > Internet Explorerできちんと表示させるコツ

このページでご紹介している内容は、当サイトの作成環境でのみ発生する問題かも知れません。また、ご紹介した他にも原因があるかもしれません。

iWebに限った事ではありませんが、ホームページをつくる際には、Windowsでの確認もしっかりと行ったほうが良いと思います。

iWeb Tips - iWebのコツ -

 テキストボックス同士の間隔は「少し広いかな」くらいがちょうど良い

ページに複数のテキストボックスを配置する場合、テキストボックス同士の間隔は、Macのブラウザ(SafariやFirefox)で見た時に、「少し広いかな」と思うくらいにしてください。


ブラウザで逐一確認をしながら調整をする事になりますが、Safariで見たときに、おおよそ30ピクセルくらいの間隔が必要です。

これより間隔を狭く、Safariなどでちょうど良い間隔にしてしまうと、Internet Explorerで見た時に、文字どうしが重なってしまったりして、きちんと表示できなくなります。


当サイトでは、iWebの使い方のトップページ右側のメニューがこれに該当します。下の図は該当の部分をSafari、Internet Explorerで表示した時の表示を比較したものです。

同じページを表示してもこれだけ間隔が異なります。もしSafariだけ見て「薄く色のついた間隔の部分」を狭めてしまうと、Internet Explorerで見たときに、テキストボックスが重なってしまう事がよく分かると思います。

ちなみにInternet Explorer7で表示してもInternet Explorer6と同様、間隔は狭くなります。

 テキストボックスの背景色を設定する場合

テキストボックスに背景色を設定する場合、 テキストボックスをテキスト用と背景用で2つ使わないと、Internet Explorerで文字の部分だけが、別の場所に表示されてしまう事がたまにあります。

これを回避する為には、背景色を設定したテキストボックスに文字を書くのではなく、もう一つ背景色が透明なテキストボックスを作って重ねます。


下の図は、背景色を設定したテキストボックスに直接文字を書いている部分を、Internet Explorerで表示したスクリーンショットです。見事に文字がずれて表示されてしまっています。

また、テキストのインデント(テキスト左側の余白)の設定も、何か関係があるようですので、できる限り使用しない方が良いでしょう。

このような現象を回避する為に、2つのテキストボックスを使ってページを作ってみます。

下の図では分かりやすいように、二つのテキストボックスをずらしていますが、ぴったり重ね合わせてください。位置と回転インスペクタを使えば、ピクセル単位で調整ができますので、微調整に使用しましょう。

テキストボックスを二つ用意すると、下のように正しく表示させる事ができました。

 スポンサードリンク

 公開に関するTips

 iWeb基本のTips

  iWeb Tips:記事一覧

  iWeb Tips 記事一覧

   インターネットエクスプローラできちんと表示させるコツ

 その他のTips

 アクセスアップ、SEO対策のTips

 iWebの機能、更新に関するTips

運営サイト・ブログ

このサイトはApple iWeb を使用して作成しています。

ご意見などはお問い合わせフォームからお願いいたします。

当サイトは、Yahoo!カテゴリMacintosh > アプリケーションソフト)掲載サイトです。

    iWeb Q&A

スポンサードリンク