CSS によるスタイル設定の基本

前提知識

このモジュールを始める前に、基本的なソフトウェアのインストールで説明されている基本的な作業環境と、ファイルの扱いで説明されているファイルの作り方や管理の仕方について理解しておいてください。また、 HTML に親しんでおいてください（まだの場合は HTML によるコンテンツの構造化を一通りやっておいてください。

ガイド

CSS とは何か

CSS を使用すると、見栄えの良いウェブページを作成することができますが、その裏側ではどのように動作しているのでしょうか？この記事では、 CSS とは何か、基本的な構文はどのようなものか、そして、ブラウザーが CSS を HTML に適用してスタイル設定を行う方法について説明します。

CSS 入門

この記事では、シンプルな HTML 文書に CSS を適用し、その過程で CSS 言語の実践的な詳細を学んでいきます。また、まだ見ていないの CSS 構文機能についても確認します。

経歴ページのスタイル設定 ^課題

この課題では、単純な経歴ページのスタイル設定を行います。ここ数回のレッスンで学んだスキル、具体的にはセレクターの作成、背景色の設定、テキストのスタイル設定などを試す内容です。また、まだ扱っていない基本的な CSS 機能について調べるようにし、調査スキルも試します。

CSS セレクターの基本

この記事では、基本的な型、クラス、IDセレクターを含め、セレクターの基本事項をいくつかおさらいします。

属性セレクター

HTML の学習で既にご存知のように、要素は、マークアップされた要素についての詳細情報を提供する属性を持つすることができます。 CSS では、特定の属性を持つ要素を対象とするために、属性セレクターを使用することができます。 このレッスンでは、これらの非常に便利なセレクターの使用方法を表示します。

擬似クラスと擬似要素

次に紹介するセレクターは、擬似クラスと擬似要素と呼ばれるものです。これらは数多くあり、特定の目的で使用されることが多いです。使用方法を理解したら、さまざまな種類に目を通し、達成しようとしている作業に適したものがあるかどうかを確認することができます。

結合子

最後に取り上げるセレクターは、結合子と呼ばれます。結合子は、他のセレクターと組み合わせて使用することで、他の要素（例えば、子要素や兄弟要素）との相対的な DOM 内の位置に基づいて要素を選択することができます。

ボックスモデル

CSS で作成されたものにはすべてボックスが含まれており、これらのボックスを理解することが、 CSS でより複雑なレイアウトを作成したり、アイテムを他にもアイテムを配置したりする上で重要となります。このレッスンでは、 CSS の「ボックスモデル」について見ていきます。これらがどのように動作するのか、また、それらに関連する用語について理解を深めることができます。

競合の処理

このレッスンの目的は、CSS の最も基本的な概念であるカスケード、特定の仕様、継承について理解を深めることです。これらは、CSS が HTML に適用される方法と、スタイル宣言間の競合がどのように解決されるかをコントロールします。

ブログページのスタイルの修正 ^課題

この課題では、部分的にスタイルが適用された基本的なブログページの例を提供します。既存の CSS の問題点を修正し、完成させるためのスタイルを追加してください。その過程で、セレクター、ボックスモデル、競合/カスケードに関する知識をテストします。

値と単位

CSS ルールには宣言が含まれており、宣言はプロパティと値で構成されています。 CSS で使用される各プロパティには、許容される値の種類を記述した値型があります。このレッスンでは、最も頻繁に使用される値型のいくつかを取り上げ、それらが何であるか、また、これらがどのように作用するのかを説明します。

CSS におけるアイテムのサイズ設定

デザイン上のさまざまな機能がどの程度の大きさになるかを理解することは重要です。このレッスンでは、要素が CSS 経由でサイズを取得するさまざまな方法をまとめ、将来的に役立つサイズ指定に関するいくつかの用語を定義します。

背景と境界

このレッスンでは、CSS の背景と境界を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と境界は CSS のスタイル設定に関する多くの疑問の解決策です。

課題: コンテンツパネルのサイズ設定と装飾 ^課題

この課題では、コンテンツパネルをレンダリングする簡易的にスタイル設定されたページ構造が指定されます。上部には見出し、下部にはボタンバーが配置されています。指示に従ってサイズ調整と装飾を行い、結果として興味深いレイアウトを作成してください。過程において、CSS の値と単位、サイズ設定、背景と境界線に関する知識が検査されます。

コンテンツのオーバーフロー

オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。

画像、メディア、フォーム要素

このレッスンでは、特定の要素が CSS でどのように扱われるかを見ていきます。画像・メディア・フォーム要素では、CSS でスタイルを設定するにあたって通常のボックスとは少し異なる動作をします。何が可能で何が不可能であるのかを理解することで、フラストレーションを軽減することができます。このレッスンでは、知っておくべきことをいくつか取り上げます。

表のスタイル設定

HTML 表を装飾することは、世界で最も魅力的な仕事ではありませんが、時にはそれをしなければならないこともあります。この記事では、表をスタイル設定するテクニックとともに、HTML 表を見栄え良くするためのガイドを提供します。

CSS のデバッグ

この記事では CSS の問題をデバッグする方法について案内し、何が起こっているかを調べるのに、すべてのモダンブラウザーに入っている開発者ツールがどう役立つかを示します。

スキルテスト

チュートリアル記事の間に「スキルテスト」記事が配置されています。これらは、次に進む前に最も重要な情報を理解できているかを確認するためのものです。これらをすべて確認したい場合は、スキルテスト: CSS スタイル設定の基礎に一覧が掲載されています。

追加のチュートリアル

これらのチュートリアルは学習経路には属しませんが、それでも興味深いものです。メインのコア記事をすべて読み終えた後にオプションで学習する、さらに上のゴールとして考えてみてください。

ボックスの高度な効果

この記事は、ボックスシャドウ、混合モード、フィルターといった興味深い高度なスタイル設定機能の入門として、便利なテクニックを提供します。

カスケードレイヤー

このレッスンでは、より高度な機能であるカスケードレイヤーを紹介するためのものです。これは、 CSS カスケードと CSS 詳細度という基本的な概念の上に構築されています。

さまざまな方向のテキストの扱い

近年、 CSS は、コンテンツのさまざまな方向に対応するために進化してきました。右から左に記述するコンテンツだけなく、上から下に記述するコンテンツ（日本語など）にも対応しています。これらのさまざまな方向は、書字方向と呼ばれます。学習を進め、レイアウト作業を始めるにあたり、書字方向を理解することは非常に役立つでしょう。そのため、この記事では書字方向について紹介します。

CSS の整理

スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。

関連情報

Learn HTML and CSS, Scrimba ^{MDN 学習パートナー}

Scrimba の Learn HTML and CSS コースでは、知識豊富な講師陣による楽しい対話形式のレッスンと課題を通じて、 5 つの素晴らしいプロジェクトを構築し展開しながら、HTML と CSS を学んでいきます。

Write your first lines of CSS!, Scrimba ^{MDN 学習パートナー}

この対話型のレッスンでは、 CSS 構文の有益な入門編を提供して指定されています。

• Overview: コア学習モジュール
• 次のページ