
レンダリングモードについて 学んだ事②
1月7日(火)に投稿したnoteでレンダリングという単語が出てきて、それに関連したレンダリングモードについて興味を持ったので、詳しく調べてみました。今回はそれについてnoteにまとめてみようと思います。
1. そもそもレンダリングモードとは?
前回の学んだ事①でレンダリングについて
「HTMLやCSS、JavaScriptなどを使用してブラウザに表示させる事」
と書いていました。
そこで調べていくうちにレンダリングモードという言葉も出てきたので、もう少し詳しく知りたいと思い、調べてみたところ、
AIの方では、
「コンピュータがソースを解釈して画面に描画する方法、または画像をどのようにレンダリングするかを制御する画像プロパティの事を指す」
と出てきました。
また、Web用語辞典ではこのように出てきました。
「レンダリングモードとは、コンピュータがソースを解釈し画面に描画する方法の事」
と出てきました。そして、ブラウザのIE8のレンダリングモードでは、最新の解釈をする標準モードや昔のIEと互換性のある描画方法の互換モードなどがある。モードの切り替えはDOCTYPE宣言やMETAタグの指定で選択することができると出てきました。
※IE8: Windows Internet Explorer 8の事です。その後、最終バージョンとなるInternet Explorer11(IE11)がリリースされましたが、2022年にサポートは終了していて、現在は同じMicrosoft 社のMicrosoft Edgeを推奨しているそうです。
※ブラウザとは: まず、Webブラウザとは: webサイトを閲覧する為に使うソフトの事。
→Webブラウザとモバイルブラウザに分けられる。
(webブラウザの種類: Windowsに標準で入っているマイクロソフト社のInternet Explorer(IE)、Microsoft Edgeがあり、その他にもChromeやFirefoxがある。)
→ モバイルブラウザとは: 携帯電話やスマートフォンなどのモバイル端末で利用することを想定して設計されたWebブラウザの事。
(モバイルブラウザの種類: Skyfire, Opera mini, Dolphin Browserなどがある。)
2. レンダリングモードについて詳しく調べてみた
そもそもレンダリングモードとは?のところで標準モードと出てきたので調べてみました。
→ 標準モードを説明する前に描画モードという言葉も出てきたので書いてみたいと思います。
→ 描画モードとは: 最近のブラウザにはたいてい、描画モード(レンダリングモード)
同じHTML・CSSを書いていても表示のされ方が違ったりする事があります。
→ これは描画モードが違う為、表示のされ方が異なってしまう。
そもそもなぜ描画モードがあるのか?
業界の中ではこれをどうにか同じ見た目になるように、「標準化」しようとしているみたいですが、それにも問題があります。
それは前回の記事でも少し書きましたが、昔のサイトが思ったように表示されなくなる可能性があるという問題です。
→ そこで導入されたのが「描画モード」になるそうです。
描画モードの種類:
1. 前回紹介した互換モード
2. 二つ目が標準化を重視し正しい描画をするのが標準モード
実はもうひとつあるみたいですがここでは割愛します。
描画モードの切り替え方法:
通常は、DOCTYPEスイッチで切り替えることができる
※DOCTYPEスイッチとは: 先頭に記述されるDOCTYPE宣言によって、ブラウザの動作を「互換モード」と「標準モード」のいずれかに切り替える事。
→ DOCTYPEスイッチと検索すると一覧表で載っているサイトもありました。
またMETAタグで選択できるという事についてですが記事が長くなりそうのなので今度書きたいと思います。
3. まとめ
最初に書いたレンダリングモードとは、
「コンピュータがソースを解釈し画面に描画する方法の事」
と書きました。
詳しく調べてみると、なぜ描画モードがあるのか?や描画モードの種類について知ることができました!
これからも気になった事や学んだ事をnoteにまとめていこうと思いますので見てくださると嬉しいです。
ここまで読んでくださり、ありがとうございました!