パソコン・Windowsの便利な使い方やテクニック|パソコントラブル出張修理

IEとそれ以外のブラウザでのブロックレベル要素の幅を合わせる方法

TOP便利な使い方ホームページ作成 > IEのブロック要素の幅の調整

IEとそれ以外のブラウザでのブロックレベル要素の幅を合わせる方法

パソコン出張修理でのサポートでは、ホームページの作成に関連した内容も取り扱っております。 その中で、ブラウザの種類による表示の違いに関したものがあります。

インターネットでホームページを表示するには、インターネットブラウザというソフトを使います。 Windowsでは標準でインターネットエクスプローラ(IE)がインストールされておりますが、 IE以外にもブラウザはいくつかあります。IE以外でよく使われているものはFirefox、GoogleChrome、Safariなどです。 書式、レイアウト、装飾部分にCSSを使うようになってからはIEを含めてどのブラウザでもそれ以前にに比べれば表示にそんなに違いはありませんが、 それでもまだ一部に表示の違いが出てしまう場合があります。 インターネットを閲覧するユーザーがいろいろなブラウザを使う事を考えれば、この表示の違いは吸収しておかなければなりません。 その中にブロックレベル要素の幅の指定の仕方によってはIEとそれ以外のブラウザでは幅が違って表示されてしまうというものがあります。

特にブロックレベル要素に幅を指定する「width」と、内側に余白を指定する「padding」が指定されている場合には注意が必要です。 IEでは内側にpaddingで余白が指定されているブロックレベル要素でも、widthではブロックレベル要素のそのものの幅が指定されますが、 IE以外のブラウザでは、widthは余白を除いた部分の幅が指定されてしまいます。 この為、ブロックレベル要素全体の幅がIEよりそれ以外のブラウザのほうがpaddingで指定した余白の幅が広くなってしまうのです。

この表示の違いを解消する為の一つの方法として余白を指定する「padding」は使わないという方法があります。 実は余白の指定には、内側に余白を指定する「padding」と、外側に余白を指定する「margin」があります。 この外側に余白を指定するmarginは、IEでもそれ以外のブラウザでも違いはありません。 そこで、幅を合わせたいブロックレベル要素にはwidthで幅だけを指定しておき、 ブロック要素内にさらに余白設定用のブロックレベル要素を置いて、そのブロックレベル要素に「margin」で外側に余白を指定すれば、 見かけ上は外側のブロックレベル要素内にpaddingで内側の余白を取った時と同じような表示になります。

例えば、枠線を表示したブロックレベル要素内に左右に余白を取ってテキストを表示する場合などは、 中に表示するテキストをdivタグで囲み、divに左右の余白をmarginで設定してやる事で表示の違いを吸収できます。
(2013年3月8日)

パソコントラブルの出張修理では、パソコンの故障や修理以外でもこのようなホームページなどの修正や作成も行っておりますのでお気軽にお問い合わせ下さい。
パソコントラブルの出張修理を依頼する

PC・インターネット・Windowsの便利な使い方やテクニックTOP


パソコントラブル出張修理 お問い合わせフォーム パソコントラブル出張修理の料金表 業務ソフト開発 アプリケーションソフト開発 ?