ホームページ作り方[cssの基礎の基礎]

CSSは(Cascading Style Sheets)の略で、HTMLのレイアウトや色や文字の修飾などのスタイルを記述する言語です。単にスタイルシートとも呼ばれます。HTMLで構造的な記述をしCSSでスタイルを記述するという役割分担がされています。

ここではHTMLファイルにCSSをどうやって記述するか説明します。

外部にCSSファイルを作り参照する場合は、HEADタグ内に
<link rel = "stylesheet" href = "XXX.css"TYPE="text/css">
と記述します。

HTMLファイルに書く場合は
<STYLE>
p {
color:bisque;
}
</STYLE>
のようにSTYLEタグ内に記述します。CSSファイルを参照する場合はこのタグ内の内容を記述します。語句としては、
セレクタ{
プロパティ:値;

となります。

タグに直接に書く場合は、
<p style = "color:bisque;">
のように記述します。

上に記述したスタイルシートを指定するとこのようになります。

いずれも指定した要素すべてを指定するものです。これを要素型セレクタと言います。ほかにもいつくかのセレクターがあります。

クラスセレクタ

CSSは.クラス名 { スタイルプロパティ }と記述し、HTMLには<要素 class = "クラス名;">と記述します。同じスタイルを別の要素で使えます。
.bisque{
color:bisque;
}
<p class = "bisque;">

IDセレクタ

CSSは#ID名 { スタイルプロパティ }と記述し、HTMLには<要素 id = "ID名;">と記述します。クラスセレクタと違い一つの文書に一か所しか使えません。
#bisque{
color:bisque;
}
<p id = "bisque;">

=""

属性セレクタ

CSSは[属性]{ スタイルプロパティ }と記述し大括弧[]内の条件に合っている要素のスタイルを変更します。

[title] {color: black;}
[href*="CSS_Selectors"] {color: green;}
[href$="Attribute_selectors"] {color: blue;}

<p><a href = "https://amamiya-lab.net/" title = "ホームページ">雨宮勇徒の研究室</a></p>
<p><a href = "https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Selectors">MDN Web Docs</a></p>
<p>詳細は<a href = "https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors">(MDN)属性セレクタ</a></p>

雨宮勇徒の研究室

MDN Web Docs

詳細は(MDN)属性セレクタ

擬似クラス

選択された要素に対して特定の状態を指定します。

書式は、要素:疑似クラス{スタイルプロパティ}となります。

a:hover {background-color:#ffdddd; color:red; }

このリンクにマウスカーソルをのせると色が変わります。

疑似要素

セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

書式は、要素::疑似要素{スタイルプロパティ}となります。

::selection { color: gold; background-color: red; }
::first-line { color: red; font-weight: bold; }

この文章をドラッグするとほかの場所の文章とは別の背景色、文字色になります。段落の最初の行だけフォントの色が変わり、太字になっています。

グループ化セレクタ

要素1,要素2{スタイルプロパティ}は要素1と2ともにスタイルが適応されます。

要素1 要素2{スタイルプロパティ}は要素1の中にある要素2すべてに適応されます。

要素1>要素2{スタイルプロパティ}は要素1の内側に直接ネストされた要素2すべてに適応されます。

要素1〜要素2{スタイルプロパティ}は要素1の後にある要素2すべてに適応されます。

要素1+要素2{スタイルプロパティ}は要素1の直後にある要素2に適応されます。

MDN Web Docs

The World Wide Web Consortium