お仕事の依頼はココをクリック

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』

ブログ
スポンサーリンク

 

わたし
わたし

CSSの単位と色についての記事だよ!

 

まいどおおきに!おおもと(@so88qa)です

あまりにも反響が大きかった、前回の記事の続きになります。

【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について
ワードプレスでブログを始めたけど、テーマほいじるのに「CSS」をいじるのは仕切が高くて難しそう、、、、 そんなあなたの為に、CSSの基本を教えましょう! とても簡単にまとめてあるので、ぜひみてくださいね!

 

前回の記事はCSSの基本の形の説明『セレクタ(どこの){プロパティ(なにを) : 値(どうする);}』を学びました

今回の記事は『値を指定する時の単位と色の指定方法』の話です。

 

CSSで文字などの大きさを指定する時に

  1. px(ピクセル)
  2. %(パーセント)
  3. em(エム)
  4. rem(レム)

の4つの単位があります。

px(ピクセル)と%(パーセント)はなんとなく聞いたことがあるけど、『em(エム)とrem(レム)』ってなんぞ????

 

CSSで色を指定する時に

  1. 「#ffffff」
  2. 「rgb(255, 255, 255)」

この2種類は同じ白を表しています。

なんで、色の指定で2種類もあんの???

 

今回の記事で、この疑問にお答えするのでリラックスして読んでくださいね!

これを覚えれば、これぐらいの改造はできます。

 

【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について
ワードプレスでブログを始めたけど、テーマほいじるのに「CSS」をいじるのは仕切が高くて難しそう、、、、 そんなあなたの為に、CSSの基本を教えましょう! とても簡単にまとめてあるので、ぜひみてくださいね!
スポンサーリンク

CSSで使う単位の説明

 

わたし
わたし

CSSはWebサイトの見た目(色やサイズなど)を制御(せいぎょ)する言語だよ

 

制御(せいぎょ)するからには、単位が必要ですよね

Webページの単位で

  1. 絶対指定(ぜったいしてい)
  2. 相対指定(そうたいしてい)

の2つの「サイズを指定」する方法があり

  • 絶対指定:
    cm(センチメートル)・pt(ポイント)」などの『一般的に使っている単位』
  • 相対指定:
    px(ピクセル)・rem(レム)などの『親要素などを基準にして、それに対する割合でサイズを指定する方法』

相対指定は言っている意味がわからないですが、Web関連の単位で『相対指定』が圧倒的に多いので頑張って覚えましょう!

 

スポンサーリンク

よく使う相対指定(そうたいしてい)の単位

 

わたし
わたし

よく使う単位は4つだけ!

 

相対指定(そうたいしてい)の数ある単位の中で今回説明する単位は4つ

  • px(ピクセル)
  • %(パーセント)
  • em(エム)
  • rem(レム)

特に、em(エム)とrem(レム)はややこしいのでしっかり読んでくださいね!

 

px(ピクセル)を理解しよう!

 

わたし
わたし

画面のピクセルの大きさの単位だよ

 

PCやスマホ・タブレットの画面はピクセル(pixel)と呼ばれる点の集まりで構成されています。

この点の1つが「1px」『文字の大きさ、余白の広さ』でよく使われる単位ですね

 

注意:PCやスマホ・タブレットの画面の解析度によって「1pxの大きさ」が変わります。
p {font-size :18px ; }

 

%(パーセント)を理解しよう!

 

わたし
わたし

大きさの割合の単位だよ

 

親要素など、ベースの大きさに対する割合の単位です。

親要素を100%としての割合を決めます。『文字の大きさ、幅・行の高さの指定』でよく使いますね

p {font-size :120% ;}

 

em(エム)を理解しよう!

 

わたし
わたし

基準となる大きさに対して、「倍率」を示す単位だよ

 

親要素など、ベースとなる文字の大きさを「1」として、それに対しての倍率を示す単位です。

実際の大きさの基準となる文字の大きさによって異なります。『行の高さや行間を指定』する時に使いますね

p {font-size :1.8em ;}

 

rem(レム)を理解しよう

 

わたし
わたし

HTMLの要素を基準に大きさの「倍率」を示す単位だよ

 

emと同じで、ベースとなる文字の大きさに対しての倍率を示す単位です。

em(エム)との違いは、『HTML要素で指定されたもの』を基準にしていることです。

em(エム)は親要素によって基準が変わるため、「サイズ指定でややこしい」というデメリットを補う使いやすい単位です。

p {font-size :1.8rem ;}

 

em(エム)とrem(レム)の違いを理解しよう

 

わたし
わたし

emは1行で複数解釈される時があるからややこい

 

em(エム)は親要素を基準で倍率を指定するので、親要素が重なった場合『倍→倍』と1行で文字の大きさが変化する場合があります。

HTML

<p class="em"><span>好きで好きでしょうがねえんだよ!<span>俺は妹を愛しちゃてる変態なんだよ!</span></span></p>

<p class="rem"><span>好きで好きでしょうがねえんだよ!<span>俺は妹を愛しちゃてる変態なんだよ!</span></span></p>
CSS

.em span{font-size :2em;}

.rem span{font-size :2em;}
ブラウザー表示

好きで好きでしょうがねえんだよ!俺は妹を愛しちゃてる変態なんだよ!・・・< p class="em">

好きで好きでしょうがねえんだよ!俺は妹を愛しちゃてる変態なんだよ!・・・< p class="rem">

em(エム)はspan要素が入れ子になっているので、「2em」が2回解釈されて「俺は妹を愛しちゃてる変態なんだよ!」が4倍の大きさになっています

 

em(エム)を使うと、めんどくさいことが起きるので文字の指定はrem(レム)が無難ですね

 

スポンサーリンク

カラーコードの色指定について理解しよう!

 

わたし
わたし

色の指定は、カラーコードで指定するよ!

 

 

CSSの色は16進数のカラー値(カラーコード)で指定します。

 

16進数0123456789ABCDEF10

1〜9とA〜Fまでの16段数えると、10(いちぜろ)になりFF(えふえふ)まであります。

 

カラーコードで色を指定しよう!

 

わたし
わたし

#から始まる16進数で色を指定するよ!

 

CSSでは、光の3原色R(赤)・G(緑)・B(青)がそれぞれの割合なのかを『16進数で指定』します。

 

  • #ffffff(白)
  • #000000(黒)
p {color :#ffffff;}

 

カラーコードの省略もあるよ

 

わたし
わたし

RGBがそれぞれゾロ目なら省略ができるよ

 

光の3原色R(赤)・G(緑)・B(青)がそれぞれ「ゾロ目なら1文字づつ省略」することができます。

 

  • #ffffff(白)→#fff
  • #000000(黒)→#000
  • #00ff12(明るい緑)→省略できない

 

あまり使わないと思いますが、省略もできるので覚えておきましょう!

 

スポンサーリンク

CSSの色をRGB値・RGBA値色指定について理解しよう!

 

わたし
わたし

ホバーの色の指定に使うと「ふわっと白を乗せる」などの、テクニカルなことができるよ

 

CSSでカラーコード以外での指定方法がRGB値・RGBA値です。

「カラーコードの方がブログではよく使われています」が、『RGB値はエクセル・ワードで使われていて一般的』、RGBA値はあんまり聞かない値です。

RGB値・RGBA値は「10進方」で指定します。

10進数012345678910

 

10進法は一般的な数え方ですね

 

RGB値で色を指定しよう!

 

わたし
わたし

RGB値はエクセル・ワードでも一般的に使ってるね!

 

光の3原色R(赤)・G(緑)・B(青)がそれぞれの割合なのかを『10進方の0〜255の値』で指定します。

 

  • rgb(255, 255, 255)(白)
  • rgb(0, 0, 0)(黒)
p {color :rgb(255,255,255);}

 

RGBA値で色を指定しよう!

 

わたし
わたし

RGB値と透明度を指定できるよ!

 

RGB値に透明度(Alpha(アルファ値))を付加したものがRGBA値です。

あまり聞き慣れない値ですが「R・G・B値の10進方の0〜255の値」+『透明度(アルファ値)0〜1』を足したものです。(1が100%

p {color :rgba(255,255,255,0.5);}

(白色の透明度が50%という意味)

 

スポンサーリンク

「値を指定する時の単位と色の指定方法」のまとめ

 

わたし
わたし

難しいけど、一緒に覚えましょう!

 

CSSでよく使う単位は4つ

  1. px(ピクセル)
  2. %(パーセント)
  3. em(エム)
  4. rem(レム)

色の指定方法は2つ

  1. カラーコード
  2. RGB値・RGBA値

 

今回はややこしい内容をあえて書きました。

 

ややこしくて、頭がパンクしている人もいるかもしれませんね

今回の記事は、CSSをいじる時には必要なことです。

これを知らなければ、思ったようにテーマをいじれない、、、、

理解するのは大変ですが、自分のテーマを触りながら少しづつ理解してくださいね

 

 

【知ってて損なし!】3分で覚えるCSSの基本の『きの字』について
ワードプレスでブログを始めたけど、テーマほいじるのに「CSS」をいじるのは仕切が高くて難しそう、、、、 そんなあなたの為に、CSSの基本を教えましょう! とても簡単にまとめてあるので、ぜひみてくださいね!

 

おおもと
おおもと

質問などがあれば、コント覧に書き込んでください!

- Comments -

タイトルとURLをコピーしました