「CSS - CSSの基礎」の版間の差分

提供：MochiuWiki - SUSE, Electronic Circuit, PCB
ナビゲーションに移動 検索に移動
 
(同じ利用者による、間の8版が非表示)
70行目: 70行目:
*: プロパティの<code>;</code>(コロン)の後には、プロパティ値がある。
*: プロパティの<code>;</code>(コロン)の後には、プロパティ値がある。
*: これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。
*: これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。
<br>
[[ファイル:CSS Basic 1.png|フレームなし|中央]]
<br>
<br>
ルールには、他にも重要な部分がある。<br>
ルールには、他にも重要な部分がある。<br>
109行目: 111行目:
! セレクタ名 !! 選択するもの !! 例
! セレクタ名 !! 選択するもの !! 例
|-
|-
| 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p<br>selects <nowiki><p></nowiki>
| 要素セレクタ<br>(タグセレクタ、タイプセレクタとも呼ばれる) || 指定されたタイプの全てのHTML要素 || p<br><nowiki><p></nowiki>
|-
|-
| IDセレクタ || 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id<br>selects <nowiki><p id="my-id"></nowiki><br><a id="my-id">
| IDセレクタ || 指定されたIDを持つページ上の要素<br>指定されたHTMLページでは、各ID値は一意である必要がある。 || #my-id<br><nowiki><p id="my-id"></nowiki><br><a id="my-id">
|-
|-
| クラスセレクタ || 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 || .my-class<br>selects <nowiki><p class="my-class"></nowiki><br><a class="my-class">
| クラスセレクタ || 指定されたクラスを持つページ上の要素<br>同じクラスの複数のインスタンスをページに表示することができる。 || .my-class<br><nowiki><p class="my-class"></nowiki><br><a class="my-class">
|-
|-
| 属性セレクタ || 指定された属性を持つページ上の要素 || img[src]<br>selects <img src="myimage.png"><br><br><img>のみは不可
| 属性セレクタ || 指定された属性を持つページ上の要素 || img[src]<br><img src="myimage.png"><br><br><img>のみは不可
|-
|-
| 擬似クラスセレクタ || 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) || a:hover<br><br>selects <a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。
| 擬似クラスセレクタ || 指定された要素 (複数可)<br>ただし、指定された状態にある時のみ可能。<br>(例えば、カーソルがリンクの上にある場合等) || a:hover<br><br><a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。
|}
|}
</center>
</center>
<br>
id属性とclass属性の優先度は、id属性 -> class属性である。<br>
<br>
* id属性は使用頻度が限られるため、サイト全体を通じて不変の固定要素に使用する。
* class属性は、1ページ内で何度も使用できるため、サイトの中に何度も使用する見出しや表等に使用する。
<br>
<br>
さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>
さらに多くのセレクタが存在するため、詳細を知りたい場合は[https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors MDNセレクタガイド]を参照すること。<br>
<br>
==== 要素セレクタ ====
要素セレクタは、一般的には使用されない。<br>
<br>
要素セレクタを避ける理由として、以下に示すものが挙げられる。<br>
* 詳細度が低すぎて上書きが必要になりやすい。
* スコープが広すぎるため、予期せぬ影響が出やすい。
* コンポーネント指向の設計と相性が悪い。
* クラスセレクタよりも処理が遅いため、パフォーマンスへの悪影響がある。
<br>
==== IDセレクタ ====
IDセレクタは、より高い詳細度 (優先度) を持つ。<br>
1ページ内で同じIDは1度しか使用できないため、唯一の要素にのみ適用する。<br>
* メインヘッダ (#header)
* メインナビゲーション (#main-nav)
* フッタ (#footer)
* ログインフォーム (#login-form)
<br>
また、JavaScriptで要素を特定する場合に使用される。<br>
<br>
<syntaxhighlight lang="css">
/* IDセレクタ: ページ内で唯一の要素 */
#header {
    position: fixed;
    top: 0;
    width: 100%;
}
</syntaxhighlight>
<br>
==== クラスセレクタ ====
クラスセレクタは、複数の要素で共通のスタイルを適用する場合に使用する。<br>
同じページ内で何度でも再利用可能であり、1つの要素に複数のクラスを適用できる。<br>
<br>
CSSの詳細度を管理しやすくするため、できるだけクラスを優先して使用する。<br>
コンポーネントベースの設計には主にクラスが使用される。<br>
<br>
* ボタンのスタイル (.btn)
* カードデザイン (.card)
* グリッドレイアウト (.grid-item)
* 警告メッセージ (.alert)
<br>
<syntaxhighlight lang="css">
/* クラスセレクタ: 再利用可能なコンポーネント */
div.nav {
    padding: 10px 20px;
    border-radius: 4px;
}
.btn-primary {
    background: blue;
    color: white;
}
</syntaxhighlight>
<br><br>
<br><br>


159行目: 219行目:
<br><br>
<br><br>


== 見出しの位置とスタイル ==
== ボックス ==
==== ボックスについて ====
CSSでは、サイズ、色、位置等を指定することができる。<br>
<br>
これは、Webページ上の多くのHTML要素は、他のボックスの上に置かれたボックスと考えることができる。<br>
CSSのレイアウトの多くはボックスモデルに基づいており、Webページ上のスペースを占める各ボックスには、以下に示すようなプロパティがある。<br>
* padding
*: コンテンツの周りのスペース。
*: 下図では、段落テキストの周りのスペースのことである
* border
*: パディングのすぐ外側にある実線
* margin
*: ボーダーの外側のスペース
* width
*: 要素の幅
* background-color
*: 要素の内容と<code>padding</code>の背景色
* color
*: 要素の内容 (テキスト等) の色
* text-shadow
*: 要素内のテキストの影
* display
*: 要素の表示モード
<br>
[[ファイル:CSS Basic 2.png|フレームなし|中央]]
<br>
 
==== 背景色 ====
ページ全体の背景色を指定する。<br>
<syntaxhighlight lang="css">
html {
    background-color: #ffffff;
}
</syntaxhighlight>
<br>
==== ボディのスタイリング ====
<code><body></code>要素には、いくつかの宣言がある。<br>
* width
*: bodyの幅を指定する。
* margin
*: margin等のプロパティに2つの値を設定する場合、最初の値は要素の上下、2番目の値は左右に影響する。
*: 他にも、各個別の値を指定することもできる。
* padding
*: コンテンツの周りにスペースを配置する。
*: <code>margin</code>と同様、1〜4個の値を指定することができる。
* background-color
*: 要素の背景色を指定する。
* border
*: ボーダーの幅、スタイル、色の値を指定する。
<br>
<syntaxhighlight lang="css">
body {
    width: 600px;
    margin: 0 auto;
    background-color: #ff9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
}
</syntaxhighlight>
<br>
==== 見出しの位置とスタイル ====
<body>の上部には、大きな隙間がある。<br>
<body>の上部には、大きな隙間がある。<br>
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>
180行目: 300行目:
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
<br><br>
<br>
 
==== 画像 ====
== 画像 ==
画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br>
画像に対してCSSを指定する場合、<code>body</code>タグと同様、<code>margin: 0 auto</code>等を使用することもできる。<br>
しかし、CSSを機能させるために追加設定が必要な場合がある。<br>
しかし、CSSを機能させるために追加設定が必要な場合がある。<br>

2024年11月23日 (土) 11:52時点における最新版

概要

CSS (Cascading Style Sheets) とは、Webコンテンツをスタイル設定するコードである。
テキストの色の変更、コンテンツ (Webページ) のレイアウト位置の変更、背景画像を使用してWebページを装飾する等の様々なことができる。

CSSはプログラミング言語やマークアップ言語ではなく、スタイルシート言語である。
CSSは、HTML要素を選択的にスタイル設定するために使用する。


CSSの使用

まず、以下に示すCSSをstylesという名前のディレクトリにstyle.cssという名前で保存する。
以下の例では、段落テキストの色を赤に設定している。

 p {
    color: red;
 }


CSSを動作させるには、htmlファイルに適用する必要がある。
CSSをhtmlファイルで指定するには、
<head>タグと</head>タグの間にCSSファイルを適用する。 (インラインスタイルを除く)

  • 外部スタイルシート (External Stylesheet) を指定する方法
    複数のHTMLファイルで共有されるスタイルを、効率的に管理するために使用される。
  • 埋め込みスタイル (Embedded Styles) を使用する方法
    特定のHTMLファイルにのみ適用されるスタイルを定義する場合に使用する。
  • インラインスタイル (Inline Styles) を使用する方法
    特定の要素に対して、個別にスタイルを適用する場合に使用される。


外部スタイルシート (External Stylesheet) を指定する方法

 <head>
    <link rel="stylesheet" href="styles/style.css" />
 </head>


埋め込みスタイル（Embedded Styles）を使用する方法

 <head>
    <style>
       /* CSSスタイルを直接記述 */
       body {
          background-color: lightblue;
      }
    </style>
 </head>


インラインスタイル (Inline Styles) を使用する方法

 <head>
    <!-- ...略 -->
 </head>
 <body style="background-color: lightblue;"> <!-- インラインスタイルを直接指定 -->
    <!-- HTMLコンテンツを記述 -->
 </body>



CSSのルールセット

CSSの構造全体をルールセットと呼ぶ。 (ルールセットは、単にルールとも呼ばれることもある)

  • セレクタ
    ルールセットの最初にあるHTML要素名である。
    スタイルを設定する要素 (上記の例では、

    要素) を定義する。

  • 宣言
    これは、color: red;のような単一の規則である。
    要素のどのプロパティにスタイルを適用するかを指定する。
  • プロパティ
    HTML要素のスタイルを指定する。 (上記の例では、colorは

    要素のプロパティ)

    CSSでは、ルールの中でどのプロパティに影響を与えるかを選択する。
  • プロパティの値
    プロパティの;(コロン)の後には、プロパティ値がある。
    これは、与えられたプロパティの多くの可能な外観の中から1つを選択する。


CSS Basic 1.png


ルールには、他にも重要な部分がある。

  • 各ルールセットは、{}で括る必要がある。
  • 各宣言の中では、:(コロン)を使用して、プロパティとその値を区切る必要がある。
  • 各ルールセットの中では、;(セミコロン)を使用して、各宣言と次の宣言を区切る必要がある。


1つのルールセットで複数のプロパティ値を変更する場合は、セミコロンで区切って記述する。

 p {
    color: red;
    width: 500px;
    border: 1px solid black;
 }



複数の要素の選択

複数の要素を選択して、それら全てに単一のルールセットを適用することができる。
複数のセレクタを指定する場合は、,(カンマ)で区切る。

 p,
 li,
 h1 {
    color: red;
 }



セレクタの種類

セレクタには多くの種類が存在する。

要素セレクタは、指定したタイプの要素を全て選択するものであるが、より特定の要素を選択することもできる。

一般的なセレクタの種類
セレクタ名 選択するもの 例
要素セレクタ
(タグセレクタ、タイプセレクタとも呼ばれる)		 指定されたタイプの全てのHTML要素 p
<p>
IDセレクタ 指定されたIDを持つページ上の要素
指定されたHTMLページでは、各ID値は一意である必要がある。		 #my-id
<p id="my-id">
<a id="my-id">
クラスセレクタ 指定されたクラスを持つページ上の要素
同じクラスの複数のインスタンスをページに表示することができる。		 .my-class
<p class="my-class">
<a class="my-class">
属性セレクタ 指定された属性を持つページ上の要素 img[src]
<img src="myimage.png">

<img>のみは不可
擬似クラスセレクタ 指定された要素 (複数可)
ただし、指定された状態にある時のみ可能。
(例えば、カーソルがリンクの上にある場合等)		 a:hover

<a>は、<a>を選択しているが、マウスポインタがリンクの上にある時場合のみとなる。


id属性とclass属性の優先度は、id属性 -> class属性である。

  • id属性は使用頻度が限られるため、サイト全体を通じて不変の固定要素に使用する。
  • class属性は、1ページ内で何度も使用できるため、サイトの中に何度も使用する見出しや表等に使用する。


さらに多くのセレクタが存在するため、詳細を知りたい場合はMDNセレクタガイドを参照すること。

要素セレクタ

要素セレクタは、一般的には使用されない。

要素セレクタを避ける理由として、以下に示すものが挙げられる。

  • 詳細度が低すぎて上書きが必要になりやすい。
  • スコープが広すぎるため、予期せぬ影響が出やすい。
  • コンポーネント指向の設計と相性が悪い。
  • クラスセレクタよりも処理が遅いため、パフォーマンスへの悪影響がある。


IDセレクタ

IDセレクタは、より高い詳細度 (優先度) を持つ。
1ページ内で同じIDは1度しか使用できないため、唯一の要素にのみ適用する。

  • メインヘッダ (#header)
  • メインナビゲーション (#main-nav)
  • フッタ (#footer)
  • ログインフォーム (#login-form)


また、JavaScriptで要素を特定する場合に使用される。

 /* IDセレクタ: ページ内で唯一の要素 */
 #header {
    position: fixed;
    top: 0;
    width: 100%;
 }


クラスセレクタ

クラスセレクタは、複数の要素で共通のスタイルを適用する場合に使用する。
同じページ内で何度でも再利用可能であり、1つの要素に複数のクラスを適用できる。

CSSの詳細度を管理しやすくするため、できるだけクラスを優先して使用する。
コンポーネントベースの設計には主にクラスが使用される。

  • ボタンのスタイル (.btn)
  • カードデザイン (.card)
  • グリッドレイアウト (.grid-item)
  • 警告メッセージ (.alert)


 /* クラスセレクタ: 再利用可能なコンポーネント */
 div.nav {
    padding: 10px 20px;
    border-radius: 4px;
 }
 
 .btn-primary {
    background: blue;
    color: white;
 }



フォントとテキスト

HTMLファイルのheadタグ内にに<link>要素を追加する。

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />


以下の例に示すように、フォントファミリーを割り当てる。
font-familyプロパティは、テキストに使用するフォントを指定する。

このルールは、ページ全体のグローバルベースフォントとフォントサイズを定義するものである。
<html>タグはページ全体の親要素であるため、その中の全ての要素は同じfont-sizeとfont-familyを継承する。

 html {
    font-size: 10px;
    font-family: "Open Sans", sans-serif;  /* Google Fontsから出力された残りの部分 */
 }


HTML本文の中にテキストが入る要素のフォントサイズ、デザインを指定する。
また、行の高さおよび文字間隔も指定する。

 h1 {
    font-size: 60px;
    text-align: center;
 }
 
 p,
 li {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
 }



ボックス

ボックスについて

CSSでは、サイズ、色、位置等を指定することができる。

これは、Webページ上の多くのHTML要素は、他のボックスの上に置かれたボックスと考えることができる。
CSSのレイアウトの多くはボックスモデルに基づいており、Webページ上のスペースを占める各ボックスには、以下に示すようなプロパティがある。

  • padding
    コンテンツの周りのスペース。
    下図では、段落テキストの周りのスペースのことである
  • border
    パディングのすぐ外側にある実線
  • margin
    ボーダーの外側のスペース
  • width
    要素の幅
  • background-color
    要素の内容とpaddingの背景色
  • color
    要素の内容 (テキスト等) の色
  • text-shadow
    要素内のテキストの影
  • display
    要素の表示モード


CSS Basic 2.png


背景色

ページ全体の背景色を指定する。

 html {
    background-color: #ffffff;
 }


ボディのスタイリング

<body>要素には、いくつかの宣言がある。

  • width
    bodyの幅を指定する。
  • margin
    margin等のプロパティに2つの値を設定する場合、最初の値は要素の上下、2番目の値は左右に影響する。
    他にも、各個別の値を指定することもできる。
  • padding
    コンテンツの周りにスペースを配置する。
    marginと同様、1〜4個の値を指定することができる。
  • background-color
    要素の背景色を指定する。
  • border
    ボーダーの幅、スタイル、色の値を指定する。


 body {
    width: 600px;
    margin: 0 auto;
    background-color: #ff9500;
    padding: 0 20px 20px 20px;
    border: 5px solid black;
 }


見出しの位置とスタイル

<body>の上部には、大きな隙間がある。
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。

この大きな隙間のサイズを調整する場合、Webブラウザのデフォルトスタイルをmargin: 0;と指定する。
また、見出しの上下のパディングを20ピクセル、見出しのテキストをHTMLの背景色と同じ色に指定する。
さらに、影を適用するため、text-shadowを指定する。

 h1 {
    margin: 0;
    padding: 20px 0;
    color: #ffffff;
    text-shadow: 3px 3px 1px black;
    /* text-shadow */
    /* 引数 1 : テキストからのシャドウの水平オフセット */
    /* 引数 2 : テキストからの影の垂直方向のオフセット */
    /* 引数 3 : 影のぼかし半径  値を大きくする場合、より影がぼやける */
    /* 引数 4 : 影のベースカラー */
 }


画像

画像に対してCSSを指定する場合、bodyタグと同様、margin: 0 auto等を使用することもできる。
しかし、CSSを機能させるために追加設定が必要な場合がある。

<body>タグはブロック要素である。
ブロック要素に適用されるマージンは、ページ上の他の要素に尊重される。
これとは対照的に、画像はインライン要素であるため、この画像に自動マージンを適用するにはdisplay: block;を使用して、ブロックレベルの振る舞いを与える必要がある。

 img {
    display: block;
    margin: 0 auto;
 }


※注意 1
本文に設定されている幅よりも画像が大きい場合、bodyからはみ出して、ページの他の部分にまで画像が広がる。
これを解決するには、グラフィックエディタを使用して画像の幅を小さくする、または、CSSを使用して<img>要素のwidthプロパティに小さい値を設定する必要がある。

※注意 2
displayの詳細を知りたい場合は、MDNの公式ドキュメントを参照すること。


「https://mochiuwiki.one/index.php?title=CSS_-_CSSの基礎&oldid=12461」から取得