MochiuWiki : SUSE, EC, PCB

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

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集
ビジュアルウィキテキスト
 
(同じ利用者による、間の6版が非表示)
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>
ページ全体の背景色を指定する。<br>
  <syntaxhighlight lang="css">
  <syntaxhighlight lang="css">
166行目: 253行目:
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
<br><br>
<br>
 
==== ボディのスタイリング ====
== ボディのスタイリング ==
<code><body></code>要素には、いくつかの宣言がある。<br>
<code><body></code>要素には、いくつかの宣言がある。<br>
* width
* width
192行目: 278行目:
  }
  }
  </syntaxhighlight>
  </syntaxhighlight>
<br><br>
<br>
 
==== 見出しの位置とスタイル ====
== 見出しの位置とスタイル ==
<body>の上部には、大きな隙間がある。<br>
<body>の上部には、大きな隙間がある。<br>
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>
これは、スタイリングされていないページに読みやすさを提供することが意図されており、Webブラウザがh1要素にデフォルトのスタイルを適用するためである。<br>
215行目: 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>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=CSS_-_CSSの基礎」から取得