文字の色を変える
{color : red;}
背景の色を変える
{background-color : red;}
背景を画像にする
{background-image : url();}
大きさの指定の仕方
- px : 絶対的指定。ピクセルサイズ
- em : 1emで親要素のfont-sizeと同じサイズ。
- rem : 1remで、<HTML>に指定したfont-sizeと同じサイズ。
- % : ウィンドウサイズの占める割合。レスポンシブデザイン（もどき）にできる
- auto : 要素の中の要素にぴったりくっつける。
セレクターの指定方法
- IDセレクター : #id名
<div id="orange">text</div>
#orange{color : orange;} - クラスセレクター : .class名{}
<div class="orange">text</div>
.orange{color : orange;} - エレメントセレクター : 要素{}
<div>text</div>
div{color : orange;} - ユニバーサルセレクター : *{}
*{
margin: 0;
padding: 0;
font-style: normal;
font-weight:normal;
font-size:100%;
text-decoration:none;
}
これで、ブラウザのデフォルトスタイルシートをリセットできる。 - 基本的な書き方
div.class{style : xxx;}
空間を空ける
外側に空間 : {margin : size;}
内側に空間 : {padding : size;}
要素の辺にスタイル
{border : 太さ 線の種類 色;}
要素の大きさを指定する
幅 : {width : size;}
高さ : {height : size;}
boxの大きさの指定
paddingとborderを含めない（純粋なboxの大きさ） {box-sizing : content-box;}
paddingとborderを含める {box-sizing : border-box;}
要素の位置を調整（x軸の中心に配置）
{margin-left : auto; margin-right : auto;}
テキストを要素の中心に配置
{text-align : center;} x軸の中心(親がflex要素ならy軸)
{align-content : center;} y軸の中心(親がflex要素ならx軸)
結合子を使ったセレクタ指定
div p{color:orange;} : 子孫セレクター
div階層下すべてのpに適用
<p>text</p>
<p>text</p>
<div>
</div>
div > p{color:orange;} : 子セレクター
div直下のpのみに適用
<p>text</p>
<p>text</p>
<div>
</div>
p + p{color:orange;} : 隣接セレクター
pの直後のpにのみ適用（同階層）
<p>text</p>
<p>text</p>
<p>text</p>
<div>
</div>
p ~ p{color:orange;} : 間接セレクター
pの後のp全てに適用（同階層）
<p>text</p>
<p>text</p>
<p>text</p>
<div>
</div>
選択状態に応じてスタイルを変化
未訪問のリンクのスタイル : a:link{color : blue}
クリックして戻ってくると色が変わっている。未訪済のリンクのスタイル : a:visited{color : orange}
クリックして戻ってくると色が変わっている。ホバー状態のみ適用 : p:hover{color : orange}
カーソルが当たっている間だけ色が変わる。クリックされている間のみ適用 : p:active{color : orange}
クリックしている間だけ色が変わる。
好みのフォントに設定する
フォントは自由に変えることができる。
headタグ内にて<link href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Old+Mincho&display=swap" rel="stylesheet">
p{font-family: "Dela Gothic One", sans-serif;}
google fontマテリアルシンボルを使う
headタグ内にて<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=home">
<span class="material-symbols-outlined">home(アイコン名)</span>
homeリストのスタイル
- {list-style-type: square}
- list1
- list2
- {list-style-type: none}
- list1
- list2
- {list-style-type: circle}
- list1
- list2
- {list-style-type: decimal}
- list1
- list2
- {list-style-image: url()}
任意の画像にすることもできる- list1
- list2
HTMLタグ基本へ戻る
フレックス要素基本へ進む