LoginSignup
4

More than 5 years have passed since last update.

フロント周り 必要となる知識を広く浅く学ぶ01

Last updated at Posted at 2018-04-19

目的

フロント周りで必要となる知識を広く浅く学び、実務に生かす。

内容

HTML

HTMLとは

Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)
Webページを作るための最も基本的なマークアップ言語のひとつ。他にはXML、XHML、SGMLなどある。
マークアップ言語の種類と特徴

HTMLができた理由

研究者が研究状況の確認や資料を探すなどの行為を、簡単に探して見ることができる方法はないかと考えて生まれた。生まれた場所は、スイス・ジュネーブにあるCERN(欧州原子核研究機構)で、欧州12か国が共同で研究を行う機関であり何千人という科学者が入れ替わり立ち代わりで訪れていたらしい。
HTMLの誕生からザッと要点紹介

W3C

World Wide Web Consortium(ワールド・ワイド・コンソーシアム)
Web技術の標準化を行う非営利団体
about W3C

W3Cができた理由

開発者たちが次々と新しいタグを導入していき、Webページ開発者は苦労し始めた。
その為タグを標準化する必要性があると感じ、世の中のWebの標準的な技術(HTML、SVG、DOMなど)の
技術を策定し標準化へと導いていく組織が必要とのことでW3Cが設立した。

ひと休憩

会社名 Microsoft Netscape
ブラウザー IE NS
スクリプト言語 JScript Javascript

Javascriptで書いたコードはIEではJScriptで動いてるらしいです。

レンダリングエンジン

レンダリングエンジンとは

ウェブページ記述用言語で書かれたデータを解釈し、実際に画面に表示する文字や画像などの配置を計算するプログラム。模写をしてくれる仕組み
HTMLレンダリングエンジンとは

実務

ブラウザーで検証をする際は、ブラウザーというよりレンダリングエンジンの検証という認識で考える
どのブラウザーがどのレンダリングエンジンを採用してるのか見れば、全てのブラウザーを見なくても良い。

レンダリングエンジンの状況

ブラウザー レンダリングエンジン 評価
IE Trident ひどい
FireFox Gecko
Opera Presto
Safari WebKit すごい
Chrome Blink すごい
iOS WebKit すごい

評価基準は、HTML5/CSS3の対応が早いか遅いか
ちなみにiOSは、OSのアップデートでブラウザーもアップデートをする

ベンダーフレックス

ベンダーフレックスとは

CSS3で採用される予定の機能で、先頭に付ける-moz-や-webKit-などを指す

主要ブラウザのベンダープレフィックス

ブラウザー ベンダーフレックス
Firefox -moz-
Chrome -webKit-
Safari -webKit-
IE -ms-

ひと休憩

フロント界隈でBig News

「Firefoxのベンダーベンダープレフィックスに、-WebKit-が導入」
WebKitが独自に実装したCSSプロパティをFirefoxでも有効と認識されてレンダリングの際に設定が反映されるようになった。なぜBigNewsなのか。それは手間が省けるから。「-moz-」を書かなくても良い。FireFoxを気にしなくて済むということ。
(個人的には、ベンダープレフィックスに苦しめられた経験がないのでBigNewsさがわかりません)

ブラウザーのベンダープレフィックスの対応可否の確認

Can I use.com
検索にかけたセレクターが、"どのブラウザー" の "どのバージョン"に対応をしているかがわかる。
セレクターのブラウザー対応状況を確認する際は、ここにアクセス
スクリーンショット 2018-04-18 12.07.21.png

まとめ

格ブラウザーのレンダリングエンジンの状況、W3Cが出す最新セレクターなど
フロント周りの情報をおさえておくことが大事。
(ブラウザ戦争については、長くなりそうなので機会があれば書く。)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4