Home-theater-designers
CSSは、HTMLやJavaScriptとともに、コアWebテクノロジーのトリプレットに属しています。慎重に計画することで、CSSは関心の分離に貢献します。独立したリソースは、コンテンツの構造、表示、および動作を制御します。
スタイルシートは、アクセシビリティ、スケーラビリティ、さらにはWebパフォーマンスにおいても重要な役割を果たします。コンテンツ作成者またはWebデザイナーとして、デバイスがコンテンツをレンダリングする方法を制御できます。レイアウトからフォントサイズや色まで、CSSはコンテンツを美しく見えるページに変換します。
CSSはどのように見えますか？
CSSは大きな言語です。スタイルを設定するには、さまざまなものがあります。しかし、その構文は単純で、学ぶべきルールはほんのわずかです。
HTML要素には、CSSがスタイルを設定できるさまざまなプロパティがあります。 NS 色 プロパティは、前景色（テキストなど）の色を設定します。フォントサイズは フォントサイズ 財産。
各プロパティは、サポートされている値に設定できます。プロパティへの値の割り当ては「宣言」です。一般的に、それらは次のようになります。
property: value例えば：
iPhoneでiCloudの写真にアクセスする方法
color: red異なるプロパティの値は、同じプロパティの値であっても、非常に異なって見える場合があります。たとえば、前の宣言を作成する方法はあと2つあります。
color: #ff0000
color: rgb(255, 0, 0)
HTMLシートとスタイルシートの組み合わせ
HTMLとCSSはいくつかの異なる方法で組み合わせることができ、それぞれに利点があります。
インラインでスタイルを書く
最も簡単な方法は、スタイル宣言をHTMLファイルの要素に直接添付することです。あなたはを使用してこれを行うことができます スタイル そのような属性：
Most of this text is red …
… but this isn’t!
このようにインラインで要素をスタイリングすることは便利ですが、いくつかの欠点があります。まず、HTMLが複雑になり、一目で読みにくくなります。維持するのも面倒です。すべての段落の色を設定したい長いドキュメントを想像してみてください。これはCSSですが、「スタイルシート」ではありません。
頭にスタイルを埋め込む
2番目のメカニズムでスタイルシートがどのように見えるかを確認し始めることができます。 埋め込み 。このアプローチを使用して、すべてのスタイル宣言を スタイル の要素 頭 私たちのドキュメントの。次のようになります。
/* style instructions go here */
...ただし、スタイルの説明には、以前よりも少し詳細が必要です。それらを先頭に移動したため、各ルールは要素に関連付けられなくなりました。私たちは宣言したかもしれません 赤色 、しかし、その色は何である必要がありますか？
これがCSSセレクターの出番です。CSSセレクターを使用すると、次の構文を使用して、ページの特定の部分をターゲットにし、それらのスタイルを1か所で定義できます。
スナップチャット用のフィルターを増やす方法
selector {
declaration1;
declaration2;
/* etc. */
}
たとえば、段落のテキストを青でスタイル設定するには、次のように指定できます。
p {
color: blue;
}この例では、セレクターは単純です NS 、ドキュメント内のすべての段落要素に一致します。内にある限り、すべてのテキストが青色になります カバーする最後の方法はリンクです。これは、これまでで最も有用なアプローチであり、ほとんどの場合に選択する必要があります。 CSSルールをに埋め込む代わりに スタイル 要素をドキュメント内に直接配置すると、それらを別のファイルに移動できます。 このコードを 外部スタイルシートをリンクするためのHTMLファイルのタグ。 リンクされた方法では、CSSのコアパワーである関心の分離を利用しています。すべてのセマンティック情報（コンテンツの意味）は、HTMLドキュメントに含まれています。スタイリング（どのように見えるか）は、別のファイルであるスタイルシートにあります。 この分離の利点は次のとおりです。 スタイルとスタイルシートについて多くのことを学びましたが、CSSのカスケード部分についてはどうでしょうか。 カスケードは、複数のスタイルシートが存在する場合に使用するスタイルを決定するものです。作成者がコンテンツのスタイルを指定する方法を見てきました。しかし、CSSのもう1つの機能は、読者やブラウザーの製造元にもこの問題についての意見を提供することです。 デフォルトのスタイルについてはすでに疑問に思っているかもしれません。たとえば、どのように H1 著者スタイルシートがなくても、要素は大きく太字に見えますか？これは、ユーザーエージェントスタイルシートを構成する一連の特別なルールのおかげです。これらのルールは、最初にWebブラウザによってアクセスするすべてのページに適用されます。 カスケードは、作成者スタイルシートがユーザーエージェントスタイルの後に適用されることを指定します。ブラウザに見出しが太字であると表示されているが、ページの作成者がこのページの見出しが明るいと宣言している場合、それらは最終的に明るくなります。 読者に制御を渡す別のスタイルシートソースがあります。理論的には、すべてのWebユーザーは、カスタムルールを使用してユーザースタイルシートを維持できます。これらは真ん中にあります。ユーザールールはデフォルトのブラウザ設定を上書きしますが、それ自体は作成者のスタイルによって上書きされます。残念ながら、ユーザースタイルシートのサポートはこれまで普及していません。 画面以外のさまざまなコンテキストでスタイルシートを使用できます。 NS 半分 の属性 リンク 要素は、スタイルシートが適用されるメディアタイプを定義します。たとえば、次のように定義できます。 印刷用のスタイルシート 次のようなマークアップを使用します。 一般的なスタイルを1つのグローバルスタイルシートに収集し、メディア固有のスタイルを別々のファイルに収集できます。コンテンツの聴覚的または点字によるプレゼンテーションに対応するメディアタイプもあります。 CSSは、アクセシビリティを向上させるための重要なツールです。 関連している： 視覚障害者または視覚障害者の場合のWebの閲覧方法 ウィキペディアなどのサイトは、CSSを使用して印刷スタイルを制御し、不要な要素を非表示にし、レイアウトを簡素化します。 カスケードスタイルシートは、カスケード、継承、セレクター、ソース、メディアなど、多くのことをカバーしています。しかし、それらのパワーは、現代のWebを可能にします。これは、再利用性、柔軟性、およびアクセシビリティ機能が組み込まれたメディアです。 CSSの全機能とそれが提供するものを確認するには、CSS3のすべての重要なプロパティをカバーするチートシートを確認してください。 CSS3プロパティのチートシートを使用して、重要なCSS構文をマスターします。 ボビーは、20年のほとんどの間ソフトウェア開発者として働いた技術愛好家です。彼はゲームに情熱を注いでおり、Switch Player Magazineのレビュー編集者として働いており、オンラインパブリッシングとウェブ開発のあらゆる側面に没頭しています。 ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。外部スタイルシートのリンク
CSSの力
カスケードの説明
さまざまなメディアをターゲットにする
2016年の2つのWord文書をマージする方法
CSSはHTMLの見栄えを良くします
著者について ボビージャック（58の記事が公開されました） ニュースレターを購読する