CSSコーディングの基本

2020年10月24日 14:06

CSSの基本書式

セレクタ(どこに){プロパティ(どんな装飾):値(どの程度);}
p{color:#ff0000;}

HTMLにCSSを組み込む

インラインでCSSを適用

<タグ style="プロパティ:値;">
<h1 style="color:#ff0000">猫カフェ</h1>

エンベッドの指定方法

<head>
<style>セレクタ{プロパティ:値;}
</style>
</head>

リンクでCSSを指定

<head>
<link href="ファイル名" rel="stylesheet" type="text/css">
</head>

異なる要素に同じスタイルを適用させる複数セレクタ

h1,h2{
color:#ff0000;
}

idセレクタ


<p id="名称"></p><!--htmlの記述-->
#名称{color:#ff0000;}/*CSSの記述*/

classセレクタ

<p class="名称"></p><!--htmlの記述-->
.名称{color:#ff0000;}/*CSSの記述*/

ある要素ないの特定の要素を指定できる子孫セレクタ

<!--親要素にあたるタグ 子要素に当たるタグ{}-->
<!--HTML例-->
<div id="drink">
<h2>ドリンクメニュー</h2>
<p>当店のドリンクは飲み放題です</p>
<h3>ソフトドリンク</h3>
<p>コーラ・オレンジ・パイナップル</p>
<h3>お茶</h3>
<p>緑茶・紅茶・烏龍茶</p>

/*CSSの記述*/
#drink h3{color:#red;}

CSS記述の優先順位

IDセレクタ＞classセレクタ＞タイプセレクタ

特殊なセレクタ「疑似クラス」「疑似要素」

特定の状態でスタイルを適用させる疑似クラスの使い方

セレクタ＋疑似要素(:クラス名)

疑似クラス

:link/*リンクのカラー*/
:visited/*クリック後のスタイルを設定*/
:hover/*ユーザーの操作で要素にマウスポインタなどが乗った際のスタイルを指定*/
:last-child/*ある親要素に含まれる最後の子要素*/
:nth-child(n)/*n番目の子要素(nは数字に変更して使用)*/
:active/*ダイナミック疑似クラス。マウスでクリックしてから離れるまでの間*/
:focus/*フォームの入力欄にマウスポイントを合わせて入力できるようになった状態*/
:checked/*チェックボックスされた状態*/


cssの記述例
a:link{color:red;}
a:visited{color:#000000;}
a:hover{color:#808080;}
div ul li:first-child{color:#000000;}
特定の位置にスタイルを適用させる疑似要素の使い方

セレクタ＋疑似要素(::疑似要素名)

疑似要素
::before/*要素の直前*/
::after/*要素の直後*/
::first-line/*ブロックレベル要素の最初の１行*/
::first-latter/*ブロックレベル要素の最初の１文字目*/

CSSの記述例
p::after{content:"★"}

この記事が気に入ったらサポートをしてみませんか？