-css-はじめに覚えるプロパティ9個とその値

cssのプロパティと値は様々なものがあります。ここでは、はじめに覚えておくと作業効率が上がる基本的なものをご紹介します。

プロパティと値は、「忘れたら検索」でOKです！また、「横に並べる CSS」や「フォントの大きさ CSS」などで検索するとほぼ答えがあるのでガンガン検索しましょう！

color【文字色】

文字色を指定する

See the Pen by seison waten (@capplus1-design) on CodePen.

color値

CSSでは必要に応じて、次の4種類の形式から色を指定することができます。

指定形式	指定例
キーワード	「black」「red」「blue」などのキーワード名で指定
16進数カラーコード	「#fff222」「#000」など、16進数を使ったカラーコードを指定
RGB	「rgb( 255, 42, 53);」「rgba( 255, 42, 53, 0.5);」のように指定。透過度も指定できる
HSL	「hsl( 0, 100%, 100%);」「hsla( 0, 100%, 100%, 0.5);」のように指定。透過度も指定できる

カラーコード一覧サイト→http://www.netyasun.com/home/color.html

background-color【背景色】

背景色を指定する。

See the Pen by seison waten (@capplus1-design) on CodePen.

background-color値

color同様4種類の形式から色を指定できます。

width【幅】

要素の幅を指定します

今回は.hogeという親要素を300pxに指定し、中の子要素を100%で表示しています。

See the Pen by seison waten (@capplus1-design) on CodePen.

width値

• width: auto・・・・初期値
• width: 〇〇px・・・絶対値
• width: 100%・・・親要素との比率で決まる

height【高さ】

要素の高さを指定します

height値は基本的にwidthと同じです。例では親要素100vhを指定しています。vhというのは　ブラウザウィンドウの高さに対する割合で伸び縮みします。

※気になる方はEDIT ON CODEPENからウィンドウサイズを変えてみてください

See the Pen by seison waten (@capplus1-design) on CodePen.

height値

• height: auto・・・・初期値
• height: 〇〇px・・・絶対値
• height: 100%・・・親要素との比率で決まる
• height: 〇〇vh・・・ビューポート高さに対する割合

margin【マージン】padding【パディング】border【ボーダー】

この3つはセットで覚えましょう。主に余白を設定するタグになります。

margin/padding/borderの値

• margin: 10px・・・縦横全面に10px
• margin-top: 10px・・・上だけに10px
• （省略）margin 10px 0 0 0・・・それぞれtop left bottom right（この場合topのみ10px）

※paddingはmarginの値と概ね同じです

• border:1px solid #000・・・それぞれ 太さ 形状 色

text-align【行揃え】

厳密に言えばブロック要素、表セルボックスの水平方向の位置になります。

See the Pen by seison waten (@capplus1-design) on CodePen.

text-align値について

• text-align: center
• text-align: left
• text-align: right

line-height【行間】

行間を指定します

See the Pen by seison waten (@capplus1-design) on CodePen.

line-heigh値

• line-height: normal;
• line-height: 〇〇px;
• line-height: 〇〇%;
• line-height: 1;

font-weight【文字の太さ】

文字の太さを指定します

See the Pen by seison waten (@capplus1-design) on CodePen.

font-weight値

• font-weight: 100〜900
• font-weight: normal
• font-weight: bold
• font-weight: lighter

display:flex

diplayとは 、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

See the Pen by seison waten (@capplus1-design) on CodePen.

親要素に【display:flex】を追加することで横並びになります。