1. ホーム > 
  2. Webサイト制作 > 
  3. iWebの使い方 > 
  4. iWeb Tips > 
  5. iWebで作ったサイトをIEできちんと表示させるコツ

iWebで作ったサイトをIEできちんと表示させるコツ

世の中ほとんどの人が使っているパソコンはWindowsパソコンです。 MacのSafariではきちんと表示されていても、WindowsのInternet Exp […]

  • 2016/5/4
  • 2008/6/8

世の中ほとんどの人が使っているパソコンはWindowsパソコンです。
MacのSafariではきちんと表示されていても、WindowsのInternet Explorerではきちんと表示されない事があります。
そこで、このページではInternet Explorerできちんと表示する為のコツをいくつかご紹介します。

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

ページに複数のテキストボックスを配置する場合、テキストボックス同士の間隔は、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つのテキストボックスを使ってページを作ってみます。
下の図では分かりやすいように、二つのテキストボックスをずらしていますが、ぴったり重ね合わせてください。位置と回転インスペクタを使えば、ピクセル単位で調整ができますので、微調整に使用しましょう。

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

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

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

iWebについて

iWebは2011年7月に公開されたバージョン3.0.4以降、アップデートされておらず、最新のOSX環境で正常に動作するか分かりません。
そのため、MacでWebサイトの作成をする場合は、有料で販売されているソフトか、WordPressなどのCMSを利用されることをお勧めします。

WordPressの使い方

WordPressの導入から基本的な使い方、プラグインの活用、テーマのカスタマイズまで、WordPressの使い方全般をまとめています。

無料で利用できるホームページ作成ソフトには、オープンソースのKompozerもありますが、こちらのソフトも2011年以降バージョンアップしておらず、最新環境で正常に動作するか分かりません。

「役にたった」と思ったらシェアお願いします