メモ

メモを入力してみよう!


Lesson 14「単位の指定」

学習概要

CSSで指定できる「大きさの単位」と「色の単位」について学んでいきます!

補足

コメントはありません

この練習でわからない所を質問する※部活外の質問はできません

ログインが必要です

この練習への質問一覧

ログインが必要です

Lesson 14「単位の指定」の内容※SEO用のため読めません

皆さん初めまして、ウェブカツ講師の斉藤です。こちらの部活ではHTML&CSSについて学んでいきます。
今回学んでいくのこちら。
単位の指定

スタイルシートで指定できる単位というものを今回は学んでいきたいと思います。
まず単位には二種類ありまして、大きさを表す単位と色を表す単位というのがあります。で大きさを指定できる単位はいくつかあるんですけれども主に使うのはpx(ピクセル)というものと%(パーセント)というものになります。pxから見ていきたいと思うんですけれども、pxで指定できるのはこちらに出ているようにフォントのサイズ、文字の大きさを指定したりだとか要素、ボックスの縦幅だったり横幅だったりボックスの大きさを指定することができます。このpxで大きさを指定した場合ですね実際に画面に表示される大きさというのは画面の解像度によって違ってきます。この解像度というのはパソコンのスペックとかに画面のディスプレイの解像度はいくつとかって書いてあったりしますけれども、実際ですねこの画面ディスプレイというのは中の方では縦と横の格子状になっているんですね。で細かくひとつひとつ分かれています。その一つ一つの格子に色をつけてあげることで実際に文字を表示しているって仕組みになってるんですね。このひとつひとつの格子がpxと呼ばれるものになります。このディスプレイの解像度が上がった場合、ディスプレイ指定のサイズは変わらなくても画面の解像度が変わった場合、中の内部の方ではこの格子というのがひとつひとつが小さくなります。細くなるんですね。なのでその分動画や画像が高精細に見れます。同じく文字もそのpxで指定するとその格子に対しての大きさになりますので前の解像度よりも実際に表示される文字が小さくなります。大きさをpxで指定した場合画面の解像度によって実際に表示される大きさが決まってくるというものになります。

次に%での指定方法なんですけれども、これは文字ではなくてボックス・要素の大きさに対して指定できるものになります。この%で大きさを指定した場合実際に画面に表示される大きさというのはディスプレイのサイズによって違ってきます。例えばディスプレイが13インチの時に要素、ボックスの横幅を70%とスタイルシートで指定した場合、このように画面の横幅のサイズを100%としてその中の70%、これが実際のボックスの横幅になります。これがもし画面のサイズが11インチだったとするとその画面のサイズ100%に対しての70%の大きさで適用されるような形になります。この%での大きさの指定方法というのはレスポンシブデザインとかって言うんですけれども、例えばこれは私が販売しているWordPressというブログシステムのついたホームページが簡単に作れるテンプレートになるんですけれども、パソコンや携帯でも同じような形で見れるようにしたいというホームページを作りたいときに使うような指定方法になります。この画面のサイズによって大きさが実際決まってくるというのが%での指定方法になります。

次に色の指定方法を見ていきたいと思うんですけれどもまず色名で指定する方法というのがあります。今まであったようにredだとかblue、whiteとかっていう形で実際に書いて指定するような方法になります。この指定方法は基本的な色には使えるんですけれどもちょっと凝った色を使いたい時には色の名前がなくて指定できないということがありますので、そうした場合次のrgbカラーというもので色を指定してあげます。このRGBカラーというのは色の三原色と言われるRedGreenBlue赤緑青、この三色の割合を決めてあげるというのがrgbカラーになります。スタイルシートでrgbカラーを指定する場合、このような形になります。頭に#シャープを付けて6桁で指定してあげます。桁は0から9までとそこからABCDEFという形の0~Fまでの指定をします。あとの6桁のうち、それぞれ二桁ずつで RGB(Red Green Blue)という形で分かれています。それぞれに数値を入れてあげることで色が作られるというものになります。

次にさきほどと同じようなrgbカラーの指定方法で今度は3桁で指定する方法があります。これは6桁で指定した場合に色ごとの二桁が同じ数値だった場合(33 FF 00)そういう場合に一桁で書くことができる指定方法になります。
最後はrgbaという指定方法になります。これは先ほどのrgbカラー(Red Green Blue)という色の指定方法に加えて、透明度というものも指定することが出来ます。rgbaでスタイルを指定する場合rgba()かっことしてそれぞれの色をカンマで区切って指定する形になります。色は先ほどのものと違って0~255(全て数値)まで指定できる形になります。それぞれのred green blueの色の量を指定してあげて最後に透明度というものを指定してあげます。透明度は0~1までで0.5とかという形で小数点で指定してあげることができます。
以上がスタイルシートでの単位の指定方法になります。

はいいかがだったでしょうか。
いろいろな指定方法がありますけれどもpx、rgbのカラー指定、この二つを覚えるようにしましょう。
ではまたお会いしましょう、さよなら。