CSS一覧

CSSの書き方

CSSの内容を書く。

p{color:red;}　対象{パラメーター:内容;}

pやdivのタグのほかに自分で作った名前を付けられる。
英語が推奨だが日本語でも動く。
あらかじめhtmlのテキストにclassかidをつけておく。

<p class="赤色">テキスト</p>
<style> .赤色{color:red;}</style>

<p id="赤色">テキスト</p>
 <style>#赤色{color:red;}</style>

　　　
※.はクラスという意味でクラス赤色のものにcolor:redにする。
　#はidという意味でid赤色のものにcolor:redにする。
　idはclassと違い１回しかつけることができない。

h1とp両方とも　　　h1,p{color :red;}
div の中にあるｐ　　　div p {color :red;}
（divとpの間に空白を開ける）
pで名前が一番のもの　　ｐ.一番{color:red;}|
（pと.の間に空白をいれない）

クラスやＩＤを使えば直接書かなくてもいいが直接書くこともできる。

<p style="color:red;">テキスト</p>

フォント

p{font-family: 'Sawarabi Gothic' ,sans-serif;}

GEOGLEフォントの内容をheadに書く必要がある。
色

p{color:red;}

サイズ

p{font-size:20px;}

よせ

p{text-align:center;}

行間

p{line-height:1.5;}

※行間は文字を１としたときの行間
文字影

p{text-shadow:3px 4px 5px black;}

※文字影は右の幅　上の幅　ぼかしの程度　色の順

背景色

p{background-color:blue;}

背景画像

div{background-image: url(/〇〇.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;}

横幅

p{width:500px;}

縦幅

p{height:200px;}

枠線

p{border:solid 2px green;
   border-radius: 10px; }

※borderは線のタイプ　太さ　色　線の丸みの順
枠影

p{box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);}

※box-shadowは水平方向垂直方向ぼかしの半径色;

外余白

p{margin:10px 20px 10px 20px}

内余白

p{padding:10px 20px 10px 20px}

※内余白は枠線内の余白で外余白は枠線外の余白
　２つの別の要素の外余白が合わさった場合、外余白は大きい方の長さになる。
　長さは上　右　下　左の順番。

div{display:flex;
    justify-content: space-around;
    align-items: center;}

　　　　　　
※両端に子要素をくっつける場合はspace-aroundではなくspace-betweenを使う