見出し画像

■CSS【プロパティと値】

画像1

プロパティはたくさんありすぎるので覚える必要はないみたいです。color,font-sizeなどよく使うものも多いので実際使いながら覚えていったほうがいいようです。

■色の値

・色の名前で指定

例)background-color

画像2

画像3

✔色の名前にカーソルを合わせることで『カラーピッカー』を使うことができます。※VSCエディターの標準機能です。

画像4

出てきたカラーピッカーの値をクリックすることで『rgb』『ヘックス値#(カラーコード)』などで指定することもできます。

2020-09-15 (7)カラーコード

✔透明度を上げる

2020-09-15 (9)透明度

rgb値の4番目に出てきたのが『透明度』です。カラーピッカーの真ん中のレバーで調整できます。

画像7

■フォントサイズ『rem』

1rem=16px

html要素と相対的

※文字はフォントサイズを何も指定しないと16pxで表示されるので、『1rem=16px』となります。

画像8

画像9

5rem=80pxなので表示は変わりません。

■計算式『calc』

画像10

width: calc(100%/3)

幅100%の3分の1です。⇩

画像11

■余白を宣言する『margin』

画像12

⇧➡⇩⇦に余白を作ります。

画像13

※web上には基本左寄せで表示されるので右側は0で大丈夫です。

✔この書き方だと4行使ってしまうので1行で済む『ショートハンド』という書き方を採用します。

2020-09-17 (7ショートハンド)

margin: 100px 0px 100px 100px; 

  margin:      ⇧   ➡   ⇩    ⇦ ;

と、いうように1行で値を書くことができます。

一気に暗記しようとせず、使いながら覚えていくほうがいいですね。

2020.917(Thu)

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
励みになります\(^^)/
Web業界へ転職を目指す飲食業の人です。noteをアウトプットの場として基礎の基礎から記録していきます。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。