【CSS】ホームページの表示がブラウザによって違う件

ホームページを作るうえで、レイアウトに力を入れるならCSSの設定は避けて通れません
CSSの便利ツールがいくつかあって、ブラウザを開きながらCSSを編集ができ、さらにそのまま編集箇所を反映することができます

WordPressを使えば、CSSを動的に更新しながら調整できるから便利です

他にもブラウザの機能としても動的に更新できるものもあったりします

FirefoxプラグインにEditCSS、Web Developerなどがあります
Web Developerの方が多機能ですし、Chromeにも同様に使えるのでいいかもしれません

ただ、注意も必要です
ブラウザによっては「CSS の認識の違い」があります

ブラウザにはレンダリングエンジンというもの使ってて、HTMLやCSSなどを解析し、実際の画面に描画します
つまり、レンダリングエンジンが違うとHTMLやCSSの解釈に差があるので、ブラウザによってデザインが崩れるという現象がおこるわけです

主要ブラウザに関して、次のようにレンダリングエンジンが変わってきます

Trident（IEコンポーネントブラウザ）：IE、Sleipnir
Geckoレンダリングエンジンブラウザ：Firefox
Blink系レンダリングエンジン：Google chrome、Opera
EdgeHTMLレンダリングエンジン：microsoft edge

つまり、chromeでCSSレイアウトそろえたら、Operaでも問題なく同様に表示されるって事ですが、他のブラウザに関しては、ずれて表示されることはあります

ちなみにブラウザによる表示の違いがあるタグは、「padding」「margin」「border」・・・など
頻繁に使うものです

IEはサービス終了になりましたが、chromeとEdgeは互換があってほしかったです

あとは一つの解決方法としてCMS（Contents Management System：コンテンツ管理システム）を導入するとで、この表示のズレは無くなりやすいです
最近で言うならWordPressなどが主流です

導入がめんどくさいのなら、レンタルサーバーを契約することをおすすめします
インストールが簡単でお時間とらせませんよ

【必見】レンタルサーバー「ロリポップ！」のメリット・デメリットを徹底解説！

ロリポップを深堀してみました！どのレンタルサーバーを採用するかは最終的には好みの問題になってきます。ただ、ロリポップは初めてサイト構築（ホームページ作成、ブログなど）をするのであれば、初心者にやさしいレンタルサーバーだと思います。まずはお試しで使ってみてはいかがでしょうか。

【必見】レンタルサーバー「エックスサーバー」のメリット・デメリットを徹底解説！

エックスサーバーを深堀してみました！どのレンタルサーバーを採用するかは最終的には好みの問題になってきます。ただ、エックスサーバーは実績もあり、安定稼働と評判のサーバーなので、まずはお試しで使ってみてはいかがでしょうか。

コンディショナルコメントについて

ブラウザによって、CSSの解釈が違うので、同じCSSを読み込んでも表示が異なる時があります
それを防ぐには「コンディショナルコメント」と「CSSハック」という方法があります

「コンディショナルコメント」とは

条件分岐によりタグを選択することができるが、HTMLに記述するので、対象のソースボリュームが増えてしまうこともあります
分岐の条件として”IE”と”IE以外”のみだけの対応になり、IE以外のブラウザ種別では対応外となります（MacIEなども対応外です）

構文

<!–[if <条件> ]>
(内容)
<![endif]–>

<条件> に合致するものが（内容）に記載されているHTMLソースを処理します
例えばここに “<style type=”text/css” media=”all”>@import url(http://***.***.co.jp/***.css);</style>”
などの構文を記載すれば、別のスタイルシートを読み込ませることも可能です
尚、条件には “IE” ベースでしか選択できない

■<条件> の種類

<!–[if IE]>	全てのバージョンが対象
<!–[if IE 5 – 8]>	指定したバージョンのみ対象(IE5.5 については “IE 5.5000” と記載)
<!–[if gte IE 6 ]>	指定したバージョン以上が対象 gte = Greater-Than or Equal
<!–[if gt IE 6 ]>	指定したバージョンより上が対象 gte = Greater-Than
<!–[if lte IE 8 ]>	指定したバージョン以下が対象 gte = Less-Than or Equal
<!–[if lt IE 8 ]>	指定したバージョンより下が対象 gte = Less-Than
<!–[if !IE 8]>	IE 8 以外の IE が対象
<![if !IE ]>	IE以外のブラウザが対象(唯一書式が違う)

「CSSハック」とは

ブラウザのバグを逆手にとって利用する事ができ、ブラウザやそのバージョン毎に細かい設定が可能です
しかし、CSSファイルにのみ記載すればいいが、ソースが長くなってしまうというデメリットも
また、ブラウザが新しいバージョンになった場合に使えなくなることがあります

構文

<条件>, body { (内容); }

■<条件> の種類

_:-ms-lang(x)::-ms-backdrop	IE11
_:-ms-lang(x)::backdrop	Edgeのみ（EdgeHTML）
_:lang(x)::-ms-	Edgeのみ（Chromium）
_:lang(x)::-internal-media-controls-overlay-cast-button	Chromeのみ
_:lang(x)::-moz-placeholder	Firefoxのみ
_:lang(x)+_:-webkit-full-screen-document	Safariのみ

結論としては使用シェアの高い「IE」とそれ以外のブラウザで意識すれば
「コンディショナルコメント」の方が便利に使えそうですが、「コンディショナルコメント」は、IE5 からの機能なため、IE4以下は対象外
そして、E10、IE11ではコンディショナルコメントが使えません
さらに2022年6月16日までにIEのサポートが終了しましたので、使用する人は激減したと思います

OEM版のOSのIEでしたら、使い続けられるかもしれませんが、WindowsUpdateによって使えなくなった（勝手にアンインストール？）ケースも多いようです

IEとそれ以外のブラウザで表示の違いが大きいので、IEさえ使用しなければ、考慮の必要はないかもしれません

標準、互換モードについて

HTMLの形式が徐々に進化するにつれ、CSS も変化し続けています
CSS の解釈の仕方は二つあります

標準モード・・・W3Cの標準的仕様に準拠した解釈でページを表示する
互換モード・・・古い HTMLバージョンで書かれたページを表示する

ブラウザ（レンタリングエンジン）によっては、デフォルトで使用されるモードがそれぞれ違うので、表示されたページのレイアウトが異なることがあります

以下の３つの方法を使用することで、表示の違いを防ぐことができます

１.「DOCTYPE宣言」し、Webページ単位で設定する
２.Webサーバ上で HTTPヘッダをカスタムし、Webサイト全体を設定する
３.ブラウザでのモードの切り替えを行う

※１、２を両方設定されている場合は “１” が優先される

今回は、一番使用されると思われる、”１” の「DOCTYPE宣言」について説明します

「DOCTYPE宣言」はソースの文頭でする必要があるので
<html>タグよりも前でする必要があります

「DOCTYPE宣言」の種類と各ブラウザの対応状況は以下の表を参照してください

(X)HTML形式	DOCTYPE宣言	IE 6	NS	FF Sf Ch	OP
—	宣言なし	互換	互換	互換	互換
HTML4.01 Strict	<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>	標準	標準	標準	標準
HTML4.01 Strict	<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>	標準	標準	標準	標準
HTML4.01 Tranditional	<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>	互換	標準	標準	互換
HTML4.01 Tranditional	<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>	標準	標準	標準	標準
XHTML1.0 Strict	<?xml version=”1.0″ encoding=”…”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>	互換	標準	標準	標準
XHTML1.0 Tranditional	<?xml version=”1.0″ encoding=”…”?> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>	互換	標準	標準	標準
XHTML1.1	<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>	互換	標準	標準	標準