エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

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

こんにちは、アルパカです

#30DAYSトライアル2ndの復習&解説記事です。

個人的につまずいた箇所、調べた箇所を中心に書いています。

» 参考:Webコーダーとして仕事できるようになる30日まとめ

 

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

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

 

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

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

 

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

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

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

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

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

 

統計データは以下の通り↓

gs.statcounter.com

 

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

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

 

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

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

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

 

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

 

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

www.html5rocks.com

 

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

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

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

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

 

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

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

 

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

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

developer.mozilla.org

 

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

-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にしてね

という意味ですね。

 

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

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

qiita.com

ics.media

 

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

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

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

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

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

 

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

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

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

 

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

saruwakakun.com

 

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

www.engineer-step.com