デイトラ2期 DAY7 AdobeXDからお問い合わせフォームのコーディング【30DAYSトライアル2nd】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

デイトラ2期(#30DAYSトライアル2nd)「DAY7 AdobeXDからお問い合わせフォームのコーディング」について解説します。

【デイトラDAY7課題】AdobeXDからお問い合わせフォームのコーディング

DAY7の課題は「AdobeXDからお問い合わせフォームのコーディング」です。

AdobeXDからお問い合わせフォームのコーディング

AdobeXDからお問い合わせフォームのコーディングということで、ブラウザに依存しないフォームの書き方を学びました。

そもそも何故ブラウザごとに異なる表示か?

代表的なウェブブラウザは以下の4つです。

  • Google Chrome(Google製)
  • Safari(Apple製)
  • Internet Explorer(Microsoft製)
  • Firefox(Mozilla製)

【余談1】Microsoftの「IE」の代わりに「Edge」も最近使われています

【余談2】Operaというブラウザも下火ですが使われています

>参考:統計データ

 

そもそも何故ブラウザごとに異なる表示か?

それは、それぞれの会社ごとに独自の「ソフトウェア(ウェブブラザ)」を作っているからです。

ウェブブラウザはそれぞれ「レンダリングエンジン」というものを持っています。

ウェブブラウザは、「HTML」「CSS」などのファイルを、レンダリングエンジンを使って、画面に表示しています。

 

で、このレンダリングエンジンの動きが、各社それぞれ違うんですね。

レンダリングの話は難しいので、とりあえず「ウェブブラウザは作っている会社がそれぞれ違うから、見た目も違うんだなー」と覚えておけばOKです。

ブラウザの内部動作を詳しく知りたい方は、下記資料を読むのがおすすめです(かなり難しいですけど…)

>ブラウザの仕組み

 

レンダリングエンジンとブラウザとの対応関係

レンダリングの内部は知らなくても、レンダリングエンジンの名前だけは知っておくと良いと思います。

WEBブラウザ(左)とレンダリングエンジン(右)の対応関係は以下のとおりです

  • Google Chrome:Blink ※WebKit系
  • Safari:WebKit
  • Internet Explorer :Trident
  • Firefox:Gecko

「Blink, WebKit, Trident, Gecko」の4つは全てレンダリングエンジンの名前です。

ちなみにBlinkはWebKitから派生して生まれたものです。

 

「appearance: none;」でデフォルトスタイルを無効にする

「appearance: none;」でデフォルトスタイルを無効にすることができます。

>参考:appearane

 

今回の課題だと、こんなソースコードでしたね。

-moz-appearance: none;
-webkit-appearance: none;
appearance: none;

mozとかwebkitとは何か?

先程のウェブブラウザ(レンダリングエンジン)と関係しています。

 

「moz」と「webkit」はCSSベンダープレフィックス

mozやwebkitは、CSSのベンダープレフィックスと呼ばれるものです。

※CSSのプロパティの接頭語(prefix)

 

簡単にいうと、特定ブラウザ(レンダリングエンジン)に対して、スタイルを指定するために使うものです。

対応関係は以下のとおりです

  • Mozilla Firefox → 「-moz-」
  • Google ChromeとSafari → 「-webkit-」
  • Internet Exploler → 「-ms-」

 

先程書いたとおり、GoogleChromeのレンダリングエンジン「Blink」は、webkitの派生型です。

そのため、「-webkit-」というベンダープレフィックスで、両方対象になります。

あと、Mozilla Firefoxは、頭文字の「-moz-」と覚えると良いです。

 

ってことで、今回の課題で使った表現でいうと、

  • 「-moz-appearance: none;」→FireFoxで表示するときは、appearanceをnoneにしてね
  • 「-webkit-appearance: none;」→ChromeやSafariで表示するときは、appearanceをnoneにしてね

という意味ですね。

 

ちなみに、下記の記事を見れば分かりますが、ベンダープレフィックスは現在は不要という意見もあるようです。

※詳しくないならとりあえずつけておくのが無難だと思います

ベンダープレフィックスいつまでつけるの?

2018年のコーディング事情

 

CSSセレクタ「+」は隣接兄弟結合子(隣接兄弟セレクタ)

CSSセレクタの「+」という表記を初めて見た人も多いハズ。

これは、隣接兄弟結合子(隣接兄弟セレクタ)と呼ばれるものです。

隣接兄弟結合子adjacent sibling combinator (+) は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

隣接兄弟結合子 – CSS: カスケーディングスタイルシート | MDN

 

例えば、「.check-test + span { color:red; } 」という記述なら、

「check-testクラス要素」の次に現れた「span要素」の文字色を赤くする

…という意味になります。

 

以前使った「nth-child、first-child」も含めて、CSSのセレクタ一覧記事で復習するのがオススメです。

以上「AdobeXDからお問い合わせフォームのコーディング」というお話でした