コンテンツにスキップ

スタイルシート言語/CSS

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

CSS（Cascading Style Sheets）は、HTML文書の外観を制御するスタイルシート言語です。CSSを使うと、文字サイズや色、配置、背景色、ボーダー、マージンなど、HTMLで表示される要素のデザインを制御することができます。

以下は、CSSの基礎的な構文やルールを紹介する簡単なチュートリアルです。

HTML文書へのスタイルの適用方法

[編集]

CSSは、HTML文書のSTYLE要素内に記述するか、外部の.cssファイルに記述して、HTML文書から読み込むことができます。

スタイルシートの基本構文

[編集]
セレクタ {
    プロパティ: 値;
    プロパティ: 値;
}
  • セレクタ: CSSで変更したいHTML要素を選択するための記述です。
  • プロパティ: HTML要素に対して変更するスタイルの種類を指定します。
  • 値: プロパティに対する具体的な値を指定します。

例えば、以下のCSSコードは、h1タグ内の文字色を赤色にするスタイルシートです。 

h1 {
    color: red;
}

外部ファイルの読み込み

[編集]

CSSを外部ファイルに保存して、HTML文書から読み込むこともできます。外部ファイルを読み込むには、以下のような記述をHEAD要素に追加します。 

<head>
    <link rel="stylesheet" href="style.css">
</head>
"style.css"というファイルを読み込んでいます。読み込むファイル名やパスは、自分が作成したファイル名に合わせて変更してください。

CSSのセレクタ

[編集]

CSSのセレクタは、HTML要素を選択するための記述です。セレクタによって、選択したHTML要素に対してスタイルを変更することができます。

以下にいくつかの例を示します。

タイプセレクター

[編集]

タイプセレクター(Type Selector)は、HTML要素のタイプに基づいて要素を選択します。例えば、次のように記述します。 

h1 {
  color: red;
}
すべての<h1>要素に対して、赤いテキスト色を指定します。

IDセレクター

[編集]

IDセレクター(ID Selector)は、HTML要素のID属性に基づいて要素を選択します。例えば、次のように記述します。 

#header {
  background-color: gray;
}
id="header"属性を持つ要素に対して、グレーの背景色を指定します。

クラスセレクター

[編集]

クラスセレクター(Class Selector)は、HTML要素のクラス属性に基づいて要素を選択します。例えば、次のように記述します。 

.button {
  border: 1px solid black;
  background-color: white;
}
class="button"属性を持つ要素に対して、1ピクセルの黒い線で囲まれ、白い背景色を指定します。

属性セレクター

[編集]

属性セレクター(Attribute Selector)は、HTML要素の属性に基づいて要素を選択します。例えば、次のように記述します。 

a[href^="https://"] {
  color: blue;
}
href属性の値がhttps://で始まるすべての<a>要素に対して、青いテキスト色を指定します。

擬似クラス

[編集]

擬似クラス(Pseudo-Class)は、HTML要素の状態に基づいて要素を選択します。例えば、hover状態にある要素にスタイルを適用するには、次のように記述します。 

a:hover {
  text-decoration: underline;
}
マウスが<a>要素の上にあるときに、テキストに下線を表示します。

擬似要素

[編集]

擬似要素(Pseudo-Element)は、HTML要素の一部分にスタイルを適用するために使用されます。例えば、::before擬似要素を使用して、要素の前に内容を挿入することができます。 

p::before {
  content: ">> ";
  font-weight: bold;
}
すべての<p>要素の前に、>> というテキストを挿入します。

CSSのプロパティ

[編集]

以下は、よく使用されるCSSプロパティの一覧です。プロパティ名をアルファベット順に並べました。

プロパティ名 説明
align-content 複数行のフレックスアイテムの垂直方向の配置を調整します。
align-items フレックスアイテムの垂直方向の配置を調整します。
align-self 個々のフレックスアイテムの垂直方向の配置を調整します。
background 背景色、背景画像、および背景画像の位置を設定します。
border 要素の境界線のスタイル、幅、色を設定します。
box-shadow 要素に影を追加します。
color テキストの色を設定します。
display 要素の表示方法を設定します。
flex フレックスコンテナ内のフレックスアイテムのサイズ、順序、および配置を設定します。
font-family テキストのフォントファミリーを設定します。
font-size テキストのフォントサイズを設定します。
font-weight テキストの太さを設定します。
height 要素の高さを設定します。
justify-content フレックスアイテムの水平方向の配置を調整します。
margin 要素の余白を設定します。
padding 要素の内側の余白を設定します。
position 要素の位置を設定します。
text-align テキストの水平方向の配置を調整します。
text-decoration テキストの下線や取り消し線などの効果を設定します。
text-transform テキストの大文字/小文字を変換します。
width 要素の幅を設定します。
z-index 要素の重なり順序を設定します。

これは一般的なCSSプロパティの一部であり、すべてを網羅するものではありません。また、各プロパティには多くのオプションがあり、それらはすべてここに記載することはできません。

"https://ja.wikibooks.org/w/index.php?title=スタイルシート言語/CSS&oldid=224289" より作成