From 6077d21cbf5bdbda7357fe9d376b4c271ed70e0a Mon Sep 17 00:00:00 2001 From: Yusuke Hayashi Date: Tue, 20 Feb 2018 22:30:20 +0900 Subject: [PATCH] Add Japanese: css questions --- translations/jp/questions/css-questions.md | 457 +++++++++++++++++++++ 1 file changed, 457 insertions(+) create mode 100644 translations/jp/questions/css-questions.md diff --git a/translations/jp/questions/css-questions.md b/translations/jp/questions/css-questions.md new file mode 100644 index 000000000..43f943461 --- /dev/null +++ b/translations/jp/questions/css-questions.md @@ -0,0 +1,457 @@ +# CSS に関する問題 + +[Front-end Job Interview Questions - CSS Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/questions/css-questions.md) の解答集です。提案や訂正のプルリクエストは大歓迎です！ + +* [CSSセレクターの詳細度とは何ですか？どのようにはたらきますか？](#CSSセレクターの詳細度とは何ですかどのようにはたらきますか) +* ["リセット" と "ノーマライズ" CSSの違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？](#リセット-と-ノーマライズ-CSSの違いは何ですかあなたはどちらを使いますかそしてそれはなぜですか) +* [`float` とは何ですか？どのようにはたらきますか？](#float-とは何ですかどのようにはたらきますか) +* [`z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。](#z-index-とは何かとスタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください) +* [ブロック整形文脈（Block Formatting Context、BFC）とその仕組みを教えてください。](#ブロック整形文脈Block-Formatting-ContextBFCとその仕組みを教えてください) +* [clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？](#clear-を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか) +* [CSSスプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。](#CSSスプライトとは何ですかページやサイトに実装する方法も合わせて説明してください) +* [ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？](#ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか) +* [機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？](#機能の少ないブラウザに対しては、どのようにページを提供しますかどのようなテクニックプロセスを使用しますか) +* [コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。](#コンテンツを視覚的に隠すスクリーンリーダーのみ利用可能にする方法にはどのようなものがありますかいくつか教えてください) +* [グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？](#グリッドシステムを使用したことがありますか使ったことがあるならあなたはどのグリッドシステムが好きですか) +* [メディアクエリやモバイル固有のレイアウト/CSSを使用したり実装したことはありますか？](#メディアクエリやモバイル固有のレイアウトCSSを使用したり実装したことはありますか) +* [SVGのスタイリングについては詳しいですか？](#SVGのスタイリングについては詳しいですか) +* [`screen` 以外の `@media` プロパティの例を挙げられますか？](#screen-以外の-media-プロパティの例を挙げられますか) +* [効率的なCSSを書くにために避けるべき "落とし穴" にはどんなものがありますか？](#効率的なCSSを書くにために避けるべき-落とし穴-にはどんなものがありますか) +* [CSSプリプロセッサを使用するメリットとデメリットを教えてください。](#CSSプリプロセッサを使用するメリットとデメリットを教えてください) +* [使用したことのあるCSSプリプロセッサについて好きなものと嫌いなものを教えてください。](#使用したことのあるCSSプリプロセッサについて好きなものと嫌いなものを教えてください) +* [非標準フォントを使用するWebサイトを実装するにはどのようにしますか？](#非標準フォントを使用するWebサイトを実装するにはどのようにしますか) +* [CSSセレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。](#CSSセレクタにマッチする要素がどれなのかブラウザがどのように決定しているかを説明してください) +* [疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。](#疑似要素について説明しそれらがなんのために使われているかを詳しく話してください) +* [ボックスモデルがなんであるかのあなたの理解と、ボックスモデルでレイアウトをレンダリングするためにCSSでブラウザに指示する複数の方法を説明してください。](#ボックスモデルがなんであるかのあなたの理解とボックスモデルでレイアウトをレンダリングするためにCSSでブラウザに指示する複数の方法を説明してください) +* [`* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？](#box-sizing-border-box--によって何が起きますかその利点は何ですか) +* [CSSの `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？](#CSSの-display-プロパティとは何ですか？その使い方の例をいくつか挙げることができますか) +* [`inline` と `inline-block` の違いは何ですか？](#inline-と-inline-block-の違いは何ですか) +* [`position` が `relative`、`fixed`、`absolute`、`static`の要素の違いは何ですか？](#position-が-relativefixedabsolutestaticの要素の違いは何ですか) +* [ローカルや本番環境で、どの既存のCSSフレームワークを使用していますか？また、どのように変更/改善していますか？](#what-existing-css-frameworks-have-you-used-locally-or-in-production-how-would-you-changeimprove-them) +* [CSSに新たに導入された Flexbox や Grid の仕様で遊んだことはありますか？](#CSSに新たに導入された-Flexbox-や-Grid-の仕様で遊んだことはありますか) +* [ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？](#ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか) +* [レスポンシブデザインはアダプティブデザインと何が違いますか？](#レスポンシブデザインはアダプティブデザインと何が違いますか) +* [Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？](#Retina-対応を行ったことはありますかもしあるならいつどのようなテクニックを使いましたか) +* [`position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。](#position-absolute-の代わりに-translate-を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください) + +### CSSセレクターの詳細度とは何ですか？それはどのようにはたらきますか？ + +ブラウザは、CSSルールの詳細度に応じて要素に表示するスタイルを決定します。ブラウザは、特定の要素に一致するルールをすでに決定していると仮定します。マッチングルールの中で、詳細度は、以下に基づいて、ルールごとに4つのカンマ区切り値「a、b、c、d」が計算されます。 + +1. `a`は、インラインスタイルが使用されているかどうかです。プロパティの宣言が要素のインラインスタイルの場合、 `a`は1、そうでない場合は0になります。 +2. bはIDセレクタの数です。 +3. `c`はクラス、属性、擬似クラスセレクタの数です。 +4. 「d」はタグおよび擬似要素セレクタの数である。 + +得られる特異性はスコアではなく、列ごとに比較できる値の行列です。セレクターを比較して特異性が最も高いものを判断するときは、左から右に向かって見て、各列の最高値を比較してください。したがって、カラム `b`の値は、カラムcとdの値を上書きします。従って、「0,1,0,0」の特異性は、「0,0,10,10」の1つより大きい。 + +等しい特異性の場合：最新のルールは重要なルールです。スタイルシートに同じルールを（内部または外部に関係なく）2回書いた場合、スタイルシートの下位のルールはスタイルを適用する要素に近く、より具体的であるとみなされ、適用されます。 + +低詳細度のCSSルールを作成して、必要に応じて簡単に上書きできるようにします。 CSSのUIコンポーネントライブラリのコードを記述する際には、詳細度が低いことが重要です。詳細度あげるために複雑すぎるCSSルールを使用したり、`！important`を利用させることは避けるべきなのです。 + +###### 参考 + +* https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/ +* https://www.sitepoint.com/web-foundations/specificity/ + +[[↑] 先頭に戻る](#css-questions) + +### "リセット" と "ノーマライズ" CSSの違いは何ですか？あなたはどちらを使いますか？そしてそれはなぜですか？ + +* **リセット** - リセットは、要素のすべてのデフォルトブラウザスタイルを削除することを意味します。 例えば、 `margin`、`padding`、`font-size` は全て同じ要素にリセットされます。 一般的なタイポグラフィー要素のためにスタイリングを再宣言しなければなりません。 +* **ノーマライズ** - ノーマライズでは、すべてを「解凍」するのではなく、有用なデフォルトスタイルを保持します。 また、一般的なブラウザの依存関係のバグを修正します。 + +私は非常にカスタマイズされた、または慣習的ではないサイトデザインを持っているときにリセットを選択して、自分のスタイリングをたくさん行う必要があり、デフォルトのスタイリングを保存する必要はありません。 + +###### 参考 + +* https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css + +[[↑] 先頭に戻る](#css-questions) + +### `float` とは何ですか？どのようにはたらきますか？ + +FloatはCSSの位置決めプロパティです。 浮動要素はページの流れの一部として残り、ページのフローから削除される「位置：絶対」要素とは異なり、他の要素（たとえば、浮遊要素の周りを流れるテキスト）の配置に影響します。 + +CSSの `clear` プロパティは、`left`/`right`/`both` 浮動要素の下に配置するために使用できます。 + +親要素に浮動小数点要素だけが含まれている場合、その高さは何も折りたたまれません。 これは、浮動小数点数の後の浮動小数点数をコンテナの中で、コンテナが閉じる前にクリアすることで修正できます。 + +`.clearfix` ハックは、巧妙なCSS疑似セレクタ（`:after`）を使って浮動小数点数をクリアします。 親にオーバーフローを設定するのではなく、クラス `clearfix` を追加します。 次に、このCSSを適用します： + +```css +.clearfix:after { + content: ' '; + visibility: hidden; + display: block; + height: 0; + clear: both; +} +``` + +あるいは、親要素に `overflow: auto` または `overflow: hidden` プロパティを与えると、子要素の中に新しいブロック書式設定コンテキストが確立され、子要素を含むように展開されます。 + +###### 参考 + +* https://css-tricks.com/all-about-floats/ + +[[↑] 先頭に戻る](#css-questions) + +### `z-index` とは何かと、スタックコンテキスト(スタック文脈)がどのように作られるのかを教えてください。 + +CSSの `z-index` プロパティは、重なっている要素の垂直方向の積み重ね順序を制御します。 `z-index` は `static` ではない `position` 値を持つ要素にのみ影響します。 + +`z-index` 値がなければ、要素はDOMに現れる順番でスタックされます（同じ階層レベルの下位のものが一番上に表示されます）。静的でない位置付けの要素（およびそれらの子要素）は、HTML階層に関係なく、常にデフォルトの静的配置を持つ要素の上に表示されます。 + +スタックコンテキスト(スタック文脈)は、一連のレイヤーを含む要素です。ローカルスタッキングコンテキストでは、その子の `z-index` 値はドキュメントルートではなく、その要素に相対して設定されます。そのコンテキスト外のレイヤー、つまりローカルスタッキングコンテキストの兄弟要素は、レイヤー内にレイヤーを置くことはできません。要素Bが要素Aの上に座っている場合、要素Cの子要素は要素Bよりも高くなることはありません。 + +各スタッキングコンテキストは自己完結型です。要素の内容が積み重ねられた後、要素全体が親スタッキングコンテキストの積み重ね順に考慮されます。いくつかのCSSプロパティは、1未満の `opacity`、`none` ではない `filter`、`none` でない `transform`のような新しいスタッキングコンテキストを引き起こします。 + +###### 参考 + +* https://css-tricks.com/almanac/properties/z/z-index/ +* https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ +* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context + +[[↑] 先頭に戻る](#css-questions) + +### ブロック整形文脈（Block Formatting Context、BFC）とその仕組みを教えてください。 + +ブロック整形文脈（Block Formatting Context、BFC）は、ブロックボックスが配置されたWebページのビジュアルCSSレンダリングの一部です。浮動小数点数、絶対配置要素、 `inline-blocks`、`table-cells`、`table-caption`、`visible` 以外の `overflow` を持つ要素（その値がビューポートに伝播された時を除く）書式設定コンテキストをブロックします。 + +BFCは、以下の条件の少なくとも1つを満たすHTMLボックスです。 + +* `float` の値は`none`ではありません。 +* `position` の値は `static` でも `relative` でもありません。 +* `display` の値は `table-cell`、`table-caption`、 `inline-block`、`flex`、`inline-flex` です。 +* `overflow` の値は `visible` ではありません。 + +BFCでは、各ボックスの左端が包含ブロックの左端に接します（右から左への書式設定、右端からのタッチ）。 + +BFCが崩壊したときに隣接するブロックレベルボックス間の垂直マージンです。詳しくは [collapsing margins](https://www.sitepoint.com/web-foundations/collapsing-margins/) を読んでください。 + +###### 参考 + +* https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context +* https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ + +[[↑] 先頭に戻る](#css-questions) + +### clear を行う手法にはどのようなものがあり、それぞれどのような状況に適していますか？ + +* 空の `div` メソッド - `
` +* Clearfixメソッド - 上記の `.clearfix`クラスを参照してください。 +* `overflow: auto` または `overflow: hidden` メソッド - 親は新しいブロック書式設定コンテキストを確立し、floatされた子を含むように展開します。 + +大規模なプロジェクトでは、ユーティリティ `.clearfix` クラスを作成し、必要な場所で使用します。 子供が親よりも背が高く、それほど理想的でない場合、`overflow: hidden` は子供をクリップするかもしれません。 + +[[↑] 先頭に戻る](#css-questions) + +### CSSスプライトとは何ですか？ページやサイトに実装する方法も合わせて説明してください。 + +CSSスプライトは、複数のイメージを1つの大きなイメージに結合します。 これは一般的にアイコン用の技術です（Gmailが使用しています）。 それを実装する方法： + +1. スプライトジェネレータを使用して、複数の画像を1つにまとめ、適切なCSSを生成します。 +1. それぞれのイメージは、 `background-image`、`background-position` と `background-size` プロパティが定義された、対応するCSSクラスを持ちます。 +1. そのイメージを使用するには、対応するクラスを要素に追加します。 + +**利点:** + +* 複数のイメージに対するHTTPリクエストの数を減らす（スプライトシートごとに1回のリクエストが1回だけ必要）。しかし、HTTP2では複数のイメージを読み込むことはもはや大きな問題にはなりません。 +* 必要なまでダウンロードされないアセットの事前ダウンロード。例えば、`:hover` 疑似ステートにのみ現れるイメージ。 点滅は見られない。 + +###### 参考 + +* https://css-tricks.com/css-sprites/ + +[[↑] 先頭に戻る](#css-questions) + +### ブラウザ固有のスタイリングに関する問題を解決するにはどうすればいいですか？ + +* 問題を特定して問題のブラウザを特定したら、その特定のブラウザが使用されているときにのみロードする別のスタイルシートを使用します。この手法では、サーバー側のレンダリングが必要です。 +* これらのスタイリングの問題を既に処理しているBootstrapのようなライブラリを使用してください。 +* ベンダープレフィックスをコードに自動的に追加するには、`autoprefixer` を使用します。 +* Reset CSSまたはNormalize.cssを使用してください。 + +[[↑] 先頭に戻る](#css-questions) + +### 機能の少ないブラウザに対しては、どのようにページを提供しますか？どのようなテクニック/プロセスを使用しますか？ + +* グレースフル・デグラデーション（Graceful degradation） - 最新のブラウザー用のアプリケーションを構築し、古いブラウザーでは機能し続けることを保証する習慣。 +* プログレッシブ・エンハンス（Progressive Enhancement） - 基本レベルのユーザーエクスペリエンスのためのアプリケーションを構築するが、ブラウザーがそれをサポートするときに機能拡張を追加するプラクティス。 +* 機能のサポートを確認するには、[caniuse.com](https://caniuse.com/)を使用してください。 +* 自動ベンダー接頭辞挿入のための*オートプレフィクサー。 +* [Modernizr](https://modernizr.com/) を使った機能の検出 + +[[↑] 先頭に戻る](#css-questions) + +### コンテンツを視覚的に隠す（スクリーンリーダーのみ利用可能にする）方法にはどのようなものがありますか？いくつか教えてください。 + +これらの技術はアクセシビリティ（a11y）に関連しています。 + +* `visibility: hidden`. しかし、要素はまだページの流れにあり、まだ空間を占めています。 +* `width: 0; height: 0`. 要素が画面上のスペースを全く占めないようにして、それを表示しないようにします。 +* `position: absolute; left: -99999px`. 画面の外側に配置します。 +* `text-indent: -9999px`. これは `block`要素内のテキストに対してのみ機能します。 +* メタデータ。 たとえば、Schema.org、RDF、JSON-LDを使用します。 +* WAI-ARIA。 Webページのアクセシビリティを向上させる方法を指定するW3Cの技術仕様。 + +WAI-ARIAが理想的な解決策であっても、私は絶対的なポジショニング手法を採用しています。ほとんどの要素に対応しているため、簡単な手法です。 + +###### 参考 + +* https://www.w3.org/TR/wai-aria-1.1/ +* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA +* http://a11yproject.com/ + +[[↑] 先頭に戻る](#css-questions) + +### グリッドシステムを使用したことがありますか？使ったことがあるなら、あなたはどのグリッドシステムが好きですか？ + +私は `float` ベースのグリッドシステムが好きです。なぜなら、既存の代替システム（フレックス、グリッド）の中でも最も多くのブラウザをサポートしているからです。 ブートストラップで長年使用されており、動作することが証明されています。 + +[[↑] 先頭に戻る](#css-questions) + +### メディアクエリやモバイル固有のレイアウト/CSSを使用したり実装したことはありますか？ + +はい。 一例は、ピル型ナビゲーションを、特定のブレークポイントを越えた固定底のタブ型ナビゲーションに変換することである。 + +[[↑] 先頭に戻る](#css-questions) + +### SVGのスタイリングについては詳しいですか？ + +いいえ...悲しいことに。 + +[[↑] 先頭に戻る](#css-questions) + +### `screen` 以外の @media プロパティの例を挙げられますか？ + +TODO + +[[↑] 先頭に戻る](#css-questions) + +### 効率的なCSSを書くにために避けるべき "落とし穴" にはどんなものがありますか？ + +まず、ブラウザがセレクタを右端（キーセレクタ）から左に一致させることを理解してください。ブラウザはキーセレクタに従ってDOM内の要素をフィルタリングし、親要素を走査して一致を判定します。セレクターチェーンの長さが短いほど、ブラウザーはそのエレメントがセレクターと一致するかどうかを判別することができます。したがって、タグセレクタとユニバーサルセレクタであるキーセレクタは避けてください。それらは多数の要素にマッチし、ブラウザは親がマッチするかどうかを判断するために多くの作業をする必要があります。 + +[BEM（Block Element Modifier）](https://bem.info/)の方法論では、すべてが単一のクラスを持ち、階層が必要な場合はクラス名にも焼き付けられることが推奨されています。セレクタは効率的かつ簡単にオーバーライドできます。 + +どのCSSプロパティがリフロー、再描画、および合成をトリガするかに注意してください。可能であれば、レイアウト（トリガーリフロー）を変更するスタイルを書くのは避けてください。 + +###### 参考 + +* https://developers.google.com/web/fundamentals/performance/rendering/ +* https://csstriggers.com/ + +[[↑] 先頭に戻る](#css-questions) + +### CSSプリプロセッサを使用するメリットとデメリットには何がありますか？ + +**メリット:** + +* CSSのメンテナンス性が向上しました。 +* ネストされたセレクタを書きやすい。 +* 一貫したテーマ設定のための変数。 異なるプロジェクト間でテーマファイルを共有できます。 +* ミックスインは繰り返しCSSを生成します。 +* あなたのコードを複数のファイルに分割する。 CSSファイルも分割することができますが、そのためには各CSSファイルをダウンロードするためのHTTPリクエストが必要です。 + +**デメリット:** + +* 前処理のためのツールが必要です。 再コンパイル時間が遅くなることがあります。 + +[[↑] 先頭に戻る](#css-questions) + +### 使用したことのあるCSSプリプロセッサについて好きなものと嫌いなものを教えてください。 + +**好きなもの:** + +* 主に上記の利点。 +* LessはJavaScriptで書かれており、Nodeでうまくいきます。 + +**嫌いなもの:** + +* Cassで書かれたLibSassのバインディングである `node-sass` を使ってSassを使用します。ノードのバージョンを切り替えるときに、頻繁に再コンパイルする必要があります。 +* Lessでは、変数名の先頭に `@` が付いています。これは `@media`、`@import`、`@font-face` ルールなどのネイティブCSSキーワードと混同することがあります。 + +[[↑] 先頭に戻る](#css-questions) + +### 非標準フォントを使用するWebサイトを実装するにはどのようにしますか？ + +`font-face` を使って `font-weight` の `font-family` を定義してください。 + +[[↑] 先頭に戻る](#css-questions) + +### CSSセレクタにマッチする要素がどれなのか、ブラウザがどのように決定しているかを説明してください。 + +この部分は上記の効率的なCSSの記述に関するものです。ブラウザはセレクタを右端（キーセレクタ）から左に一致させます。ブラウザはキーセレクタに従ってDOM内の要素をフィルタリングし、親要素を走査して一致を判定します。セレクタチェーンの長さが短ければ短いほど、ブラウザがその要素がセレクタに一致するかどうかを判断することができます。 + +たとえば、このセレクタ `p span` では、ブラウザはまずすべての `` 要素を見つけ、その親をルートまですべてトラバースして `

` 要素を探します。特定の `` については、 `

` が見つかると直ちに `` がマッチし、マッチングを止めることができます。 + +###### 参考 + +* https://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left + +[[↑] 先頭に戻る](#css-questions) + +### 疑似要素について説明し、それらがなんのために使われているかを詳しく話してください。 + +CSS疑似要素はセレクタに追加されたキーワードで、選択した要素の特定の部分をスタイルすることができます。 マークアップ(`:before`, `:after`)を変更しなくても、マークアップ(combined with `content: ...`)への要素の追加やデコレーション(`:first-line`, `:first-letter`) に使用できます。 + +* `:first-line` と `:first-letter` を使ってテキストを装飾することができます。 +* 上記の `.clearfix` ハックで、`clear:both` でゼロスペースの要素を追加するために使用されます。 +* ツールチップの三角形の矢印は `:before` と `:after` を使います。三角形は実際にはDOMではなくスタイリングの一部とみなされるため、懸念の分離を促します。 追加のHTML要素を使用せずにCSSスタイルだけで三角形を描画することは、実際には不可能です。 + +###### 参考 + +* https://css-tricks.com/almanac/selectors/a/after-and-before/ + +[[↑] 先頭に戻る](#css-questions) + +### ボックスモデルがなんであるかのあなたの理解と、異なるボックスモデルでレイアウトをレンダリングするためにCSSでブラウザに指示する方法を説明してください。 + +CSSボックスモデルは、ドキュメントツリー内の要素に対して生成され、視覚的な書式設定モデルに従ってレイアウトされた長方形のボックスを記述します。各ボックスは、内容領域（例えば、テキスト、画像など）および任意の周囲の「パディング」、「ボーダー」および「マージン」領域を有する。 + +CSSボックスモデルは、次の計算を行います。 + +*ブロック要素がどれくらいのスペースを占めるか。 +*枠線や余白が重なるかどうか、または折りたたむかどうか。 +*ボックスの寸法。 + +ボックスモデルには次の規則があります。 + +* ブロック要素の大きさは、 `width`、`height`、`padding`、`border`、および `margin` によって計算されます。 +* `height`が指定されていない場合、ブロック要素は含まれている内容と同じくらい高くなります（浮動小数点数がない限り、以下参照）。 +* `width`が指定されていない場合、浮動小数点のブロック要素は、その親の幅から `padding` の幅に収まるように展開されます。 +* 要素の `height` は内容の `height` によって計算されます。 +* 要素の `width` は内容の `width` によって計算されます。 +* デフォルトでは、`padding` と `border` は要素の `width` と `height` の一部ではありません。 + +###### 参考 + +* https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/#understand-the-css-box-model + +[[↑] 先頭に戻る](#css-questions) + +### `* { box-sizing: border-box; }` によって何が起きますか？その利点は何ですか？ + +* デフォルトでは、要素には `box-sizing: content-box` が適用され、コンテンツサイズのみが考慮されます。 +* `box-sizing：border-box`は、要素の`width`と `height`がどのように計算されるかを変更し、`border` と `padding` も計算に含めます。 +* 要素の `height` は、コンテンツの `height` +垂直 `padding` + 垂直 `border` 幅によって計算されます。 +* 要素の `width` は、コンテンツの `width` +水平 `padding` + 水平 `border` 幅によって計算されます。 + +[[↑] 先頭に戻る](#css-questions) + +### CSSの `display` プロパティとは何ですか？その使い方の例をいくつか挙げることができますか？ + +* `none`, `block`, `inline`, `inline-block`, `table`, `table-row`, `table-cell`, `list-item` + +TODO + +[[↑] 先頭に戻る](#css-questions) + +### `inline` と `inline-block` の違いは何ですか？ + +私は良い尺度のために`block`と比較して挙げます。 + +| | `block` | `inline-block` | `inline` | +| ------------------------------------ | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Size | Fills up the width of its parent container. | Depends on content. | Depends on content. | +| Positioning | Start on a new line and tolerates no HTML elements next to it (except when you add `float`) | Flows along with other content and allows other elements beside. | Flows along with other content and allows other elements beside. | +| Can specify `width` and `height` | Yes | Yes | No. Will ignore if being set. | +| Can be aligned with `vertical-align` | No | Yes | Yes | +| Margins and paddings | All sides respected. | All sides respected. | Only horizontal sides respected. Vertical sides, if specified, do not affect layout. Vertical space it takes up depends on `line-height`, even though the `border` and `padding` appear visually around the content. | +| Float | - | - | Becomes like a `block` element where you can set vertical margins and paddings. | + +[[↑] 先頭に戻る](#css-questions) + +### `position` が `relative`、`fixed`、`absolute`、`static` の要素の違いは何ですか？ + +配置された要素は、計算された `position` プロパティが `relative`、`absolute`、`fixed` または `sticky` のいずれかである要素です。 + +* `static` - デフォルトの位置です。要素は通常どおりページに流れます。`top`、`right`、`bottom`、`left`、`z-index` プロパティは適用されません。 +* `relative` - 要素の位置は、レイアウトを変更することなく、それ自体に対して相対的に調整されます（したがって、配置されていなかった要素の隙間を残します）。 +* `absolute` - 要素は、ページのフローから削除され、もしあれば、最も近い位置にある祖先に対して指定された位置に置かれます。絶対配置されたボックスは余白を持つことができ、他の余白と一緒に折り畳まれることはありません。これらの要素は他の要素の位置に影響しません。 +* `fixed` - 要素は、ページのフローから削除され、ビューポートに対して指定された位置に配置され、スクロールすると移動しません。 +* `sticky` - スティッキーポジショニングは、相対位置と固定位置のハイブリッドです。要素は、指定されたしきい値を超えるまで、相対的な位置として扱われます。その時点で、`fixed` の位置として扱われます。 + +###### 参考 + +* https://developer.mozilla.org/en/docs/Web/CSS/position + +[[↑] 先頭に戻る](#css-questions) + +### ローカルや本番環境で、どの既存のCSSフレームワークを使用していますか？また、どのように変更/改善していますか？ + +* **BootStrap** - 緩やかなリリースサイクル。BootStrap4 は、ほぼ2年間アルファになっています。 広く使用されているように、スピナーボタンコンポーネントを追加します。 +* **Semantic UI** - ソースコード構造により、テーマのカスタマイズが非常に難しくなります。慣習的でないテーマ設定システムでカスタマイズするのは面倒です。 ベンダライブラリ内のハードコードされた設定パス。BootStrap とは違って、変数をオーバーライドするためにうまく設計されていません。 +* **Bulma** - 非セマンティックで余計なクラスやマークアップが必要です。下位互換性がありません。バージョンをアップグレードすると、微妙な方法でアプリが壊れてしまいます。 + +[[↑] 先頭に戻る](#css-questions) + +### 新しいCSSの Flexbox や Grid の仕様で遊んだことはありますか？ + +はい。 Flexbox は主に1次元レイアウトを意味し、Grid は2次元レイアウトを意味します。 + +Flexboxは、コンテナ内の要素の垂直方向のセンタリング、スティッキーフッターなど、CSSの多くの一般的な問題を解決します。ブートストラップとBulmaはFlexboxをベースにしています。Flexboxを試してみましたが、`flex-grow` を使っていくつかのブラウザの非互換性問題（Safari）に遭遇しました。そして `inline-blocks` と % で幅を計算するコードを書き直さなければなりませんでした。 + +グリッドは、グリッドベースのレイアウトを作成するための最も直観的なアプローチです（より良い！）が、ブラウザのサポートは現時点では広範ではありません。 + +###### 参考 + +* https://philipwalton.github.io/solved-by-flexbox/ + +[[↑] 先頭に戻る](#css-questions) + +### ウェブサイトをレスポンシブでコーディングすることとモバイルファーストでコーディングすることの違いを説明できますか？ + +TODO + +[[↑] 先頭に戻る](#css-questions) + +### レスポンシブデザインはアダプティブデザインと何が違いますか？ + +応答性と適応性の両方の設計では、さまざまなデバイス間でユーザーエクスペリエンスを最適化し、異なるビューポートサイズ、解像度、使用状況、制御メカニズムなどを調整します。 + +レスポンシブなデザインは、柔軟性の原則 - すべてのデバイスで見た目がよくなる単一の流体ウェブサイト - で動作します。レスポンシブなウェブサイトは、メディアクエリ、フレキシブルグリッド、および反応性の高いイメージを使用して、多数の要因に基づいて柔軟に変化するユーザーエクスペリエンスを作り出します。 1つのボールが成長したり、収縮して複数の異なるフープに収まるようにします。 + +アダプティブ・デザインは、プログレッシブ・エンハンスメントの現代的定義にもっと似ています柔軟なデザインではなく、デバイスやその他の機能を検出し、あらかじめ定義された一連のビューポートサイズやその他の特性に基づいて適切な機能とレイアウトを提供します。サイトは使用されているデバイスのタイプを検出し、そのデバイスのプリセットレイアウトを配信します。 1つのボールがいくつかの異なるサイズのフープを通過する代わりに、フープサイズに応じていくつかの異なるボールを使用できます。 + +###### 参考 + +* https://developer.mozilla.org/en-US/docs/Archive/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design +* http://mediumwell.com/responsive-adaptive-mobile/ +* https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/ + +[[↑] 先頭に戻る](#css-questions) + +### Retina 対応を行ったことはありますか？もしあるなら、いつどのようなテクニックを使いましたか？ + +私は Retina ディスプレイを扱うために高解像度のグラフィックス（ディスプレイサイズの2倍）を使用する傾向があります。 より良い方法は `@media only screenと（min-device-pixel-ratio: 2）{...}`のようなメディアクエリを使用し、 `background-image` を変更することです。 + +アイコンについては、解像度に関係なく非常に鮮明に表示されるため、可能であればsvgsとアイコンフォントを使用することを選択します。 + +もう一つの方法はJavaScriptを使って、`` `src` 属性を `window.devicePixelRatio` 値をチェックした後、より高解像度のバージョンに置き換えることです。 + +###### 参考 + +* https://www.sitepoint.com/css-techniques-for-retina-displays/ + +[[↑] 先頭に戻る](#css-questions) + +### `position: absolute` の代わりに `translate()` を使用するべき場合はありますか？その逆の場合もありますか？理由も合わせて教えてください。 + +`translate()`はCSSの `transform`の値です。`transform` や `opacity` を変更しても、ブラウザのリフローや再描画は行われず、コンポジションのみがトリガされます。 `transform`はブラウザに要素のGPU層を作成させますが、絶対配置プロパティを変更するとCPUを使用します。 したがって、`translate()` はより効率的であり、より滑らかなアニメーションのためのペイント時間を短縮します。 + +`translate()` を使用すると、要素は絶対位置を変更するのとは異なり、元のスペースを使います（`position: relative`のようなもの）。 + +###### 参考 + +* https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ + +[[↑] 先頭に戻る](#css-questions) + +### 他の方の解答集 + +* https://neal.codes/blog/front-end-interview-css-questions +* https://quizlet.com/28293152/front-end-interview-questions-css-flash-cards/ +* http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/