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

迷ったら16進数カラーコードでの指定でOKです!
background-color【背景色】
背景色を指定する。
See the Pen by seison waten (@capplus1-design) on CodePen.
background-color値
color同様4種類の形式から色を指定できます。

background-imageにすると画像を背景に設定できます!
width【幅】
要素の幅を指定します
今回は.hogeという親要素を300pxに指定し、中の子要素を100%で表示しています。
See the Pen by seison waten (@capplus1-design) on CodePen.

中の画像サイズは150pxですが、100%と指定することで拡大されて表示されています。親要素の幅である300pxになっています。
width値
- width: auto・・・・初期値
- width: 〇〇px・・・絶対値
- width: 100%・・・親要素との比率で決まる

widthやheightはスマホ対応などを行うときに複雑になってくる要素です。初心者の方はまず固定幅のページを作ると理解しやすいです。詳しくは追ってまとめます。
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・・・ビューポート高さに対する割合

画像にheightを指定する場合は縦横比に注意です!object-fit: cover
などを指定すると自動的に指定した幅と高さにトリミングされます。
margin【マージン】padding【パディング】border【ボーダー】
この3つはセットで覚えましょう。主に余白を設定するタグになります。


marginは外側から迫ってきてる、paddingは要素から出てきてる思ったら覚えやすいです。
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・・・それぞれ 太さ 形状 色

3つの要素についても追ってまとめます!
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とは 、要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。

….って感じですが、今回は一番簡単に横並びにできるdisplay:flexをご紹介します!ブロック要素・インライン要素、それぞれに関しては追ってまとめますね!
See the Pen by seison waten (@capplus1-design) on CodePen.
親要素に【display:flex】を追加することで横並びになります。