(简体)このページはコミュニティーの尽力で英語から翻訳されました。コミュニティーについてもっと知り、仲間になるにはこちらから。どのように扱われるかを見ていきます。スタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能かを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことのをいくつかを取り上げます。第一歩で学習)の基本的な知識を得ていること。スタイルを設定したときに一部の要素が異常に動作することを理解すること。画像とビデオは、**置換要素**呼ばれています。これらの要素の内部レイアウトに影響を与えることはできず、他の要素の中でのページ上の位置のみに影響を与えることを意味します。画像に対して様々なことができます。画像や動画などの特定の置換要素は、アスペクト比を持つものとしても記述されています。両方の寸法を持ち、既定ではファイルの内在サイズを使って表示されることを意味します。すべてのものがボックスを生成します。画像ファイルの固有の寸法よりも小さいか大きいサイズの画像をボックス内に配置すると、ボックスよりも小さく表示されるか、ボックスをオーバーフローさせてしまいます。オーバーフローで何が起こるかについて決定を下す必要があります。ピクセル未満の画像を含んでいます。これはボックスよりも小さく、それを埋めるために引き伸ばしません。ピクセルより大きく、ボックスをオーバーフローします。100%にすることです。これにより、画像のサイズはボックスよりも小さくなりますが、大きくはなりません。他の置換要素でも機能します。要素に追加してみてください。小さい画像は変更されないままですが、大きい画像はボックスに収まるように小さくなります。コンテナー内の画像について他の選択を行うことができます。ボックスを完全に覆うように画像のサイズを変更したい場合があります。プロパティが役立ちます。使用する場合、さまざまな方法でボックスに合うようにサイズを変更できます。使用して画像を縮小し、アスペクト比を維持してボックスをきれいに埋めます。アスペクト比が維持されているため、画像の一部がボックスで切り取られます。値として使用した場合、ボックス内に収まるまで画像が縮小されます。これは、ボックスと同じアスペクト比ではない場合、「レターボックス」になります。これは、ボックスを埋めますが、アスペクト比を維持しません。レイアウト手法を使用すると、他の要素とは動作が少し異なる場合があります。フレックスまたはグリッドレイアウトでは、要素は既定で領域全体に拡大されます。画像は伸縮せず、代わりにグリッド領域またはフレックスコンテナーの始点に揃えられます。つのアイテムがあります。要素には背景色があり、行と列いっぱいに伸縮します。これらのレッスンを順番に実行している場合は、まだレイアウトを確認していない可能性があります。置換要素は、グリッドまたはフレックスレイアウトの一部になると、基本的にレイアウトによって不自然に引き伸ばされないようにするために、既定の動作が異なることに注意してください。画像を強制的に引き伸ばして、グリッドセルを埋めるには、次のような操作を行う必要があります。100%;}ただし、これは画像を引き伸ばすため、おそらく望んでいることではありません。フォームモジュールには、フォーム要素のスタイル設定に関する詳細なガイドが含まれていますが、ここでは完全には再現しません。記事のこの節では、強調すべきいくつかの重要な点があります。要素によってページに追加されます。これは、テキスト入力などの単純なフォームフィールドから、色や日付の選択などのより複雑なフィールドまでを定義します。フォームの一部を格納したりラベルを貼ったりするために使われる要素もあります。ウェブ開発者が必須フィールド、さらには入力する必要があるコンテンツの種類を指定できるようにする属性も含まれています。ユーザーが予期しない何かを入力したり、必須フィールドを空白のままにしたりすると、ブラウザーにエラーメッセージが表示されることがあります。ブラウザーによって、このようなアイテムのスタイル設定やカスタマイズがどの程度可能なのかについては一貫性がありません。要素などのテキスト入力を可能にする要素は、スタイルを整えるのが非常に簡単で、ページ上の他のボックスと同じように振る舞う傾向があります。これらの要素の既定のスタイルは、ユーザーがサイトを訪問する際に使用するオペレーティングシステムやブラウザーによって異なります。使用していくつかのテキスト入力にスタイルを設定しています。境界線、マージン、パディングなどがすべて期待どおりに適用されていることがわかります。属性セレクターを使用して、さまざまな入力タイプをターゲットにしています。境界線を調整し、フィールドに背景色を追加し、フォントとパディングを変更して、このフォームの外観を変更してみてください。フォーム要素のスタイルを変更するときは、ユーザーがフォーム要素であることをユーザーに明確に伝えるように注意する必要があります。周囲のコンテンツとほとんど見分けがつかない境界線や背景のないフォーム入力を作成することもできますが、これにより認識や入力が非常に難しくなります。ウェブフォームのスタイル設定に関するレッスンで説明したように、より複雑な入力タイプの多くはオペレーティングシステムによってレンダリングされ、スタイル設定にアクセスできません。そのため、フォームは訪問者によってかなり違って見えることを常に想定し、複雑なフォームをいくつかのブラウザーでテストする必要があります。一部のブラウザーでは、フォーム要素は既定ではフォントのスタイルを継承しません。このルールを追加する必要があります。box-sizingブラウザー間で、フォーム要素は、さまざまなウィジェットに対してさまざまなボックスサイズ設定ルールを使用します。プロパティについて学習しました。フォームのスタイル設定時にこの知識を使用して、フォーム要素に幅と高さを設定するときに一貫したエクスペリエンスを確保できます。設定する必要があります。auto;}リセット処理としてまとめる最後のステップとして、上記で説明したさまざまなプロパティを次の「フォームリセット」にラップして、作業の一貫性のあるベースを提供できます。つのセクションで言及したすべてのアイテムが含まれます。正規化スタイルシートは、すべてのプロジェクトで使用する一連のベースラインスタイルを作成するために、多くの開発者によって使用されています。通常、これらは上記で説明したものと同様のことを行います。独自の作業を行う前に、ブラウザー間で異なるものがすべて一貫した既定に設定されていることを確認してください。ブラウザーは通常、以前より一貫性があるため、以前ほど重要ではありません。チェックしてください。これは、多くのプロジェクトでベースとして使用されている非常に人気のあるスタイルシートです。つの記事をご覧ください。フォームの高度なスタイルスキルテストこの記事の終わりまで来ましたが、最も重要な情報を覚えていますか?次に進む前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります。画像とフォーム要素を見てください。画像、メディア、およびその他の異常な要素を操作するときに発生するいくつかの違いを強調しました。テーブルをスタイルする必要がある場合に役立ついくつかのヒントについて説明します。表のスタイル設定の方法を学びます。