メモ

メモを入力してみよう!


Lesson 14「単位の指定」

練習を見る

学習概要

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

補足

%での指定は「画面のサイズ」によって変わると説明しましたが、正しくは「親要素の大きさに対してのサイズ」になります。
親要素とは自分の要素(タグ)を含んでいる直近の要素(タグ)になります。
(pタグの中のaタグから見ると、pタグが親要素)
親要素がない場合(htmlタグなど)は「ブラウザ画面のサイズ」になります。
また、%指定はフォントなどに使用することも出来ます。(基本、フォントに使うことはありません)

「RGBカラー」で検索すると色見本やカラーコードが書かれているので、それを参考に色を指定しましょう。

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

ログインが必要です

この練習への質問一覧

ログインが必要です

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

こちらの部活では HTML CSS について学んでいきます今回学んでいくのはこちらですねスタイルシートで指定できる単位というものを今回は学んでいきたいと思いますまずたいにはですね二種類ありまして大きさを表す単位と色を表す単位というのがありますて大きさを指定できる単位はですねいくつかあるんですけれども主に使うのピクセルというものとパーセントというものになりますピクセルから見てきたと思うんですけれどもピクセルで指定できるのはですね英語ちゃんに出てるように本当のサイズ文字の大きさですねを指定したいだとか要素ボックスですねボックスの縦幅だったりをカバーだったりボックスの大きさを指定することができますこのピクセルで大きさを指定した場合ですね実際に画面に表示される大きさというのは画面の解像度によって違ってきますペコの解像度というのはですねパソコンのスペックとかにですね解像度画面をディスプレイの解像度はいくつとかって書いてあったりしますけれども実際ですねこの画面ディスプレイというのはあの方ではですね縦と横の格子状になっているんですねで細くひとつひとつ分かれていますその一つ一つの更新ですね色をつけてあげることで実際に文字を表示しているって仕組みになってるんですねこのひとつひとつのですねこうしがピクセルと呼ばれるものになりますこのディスプレイの解像度がですね上がった場合なんですけれどもディスプレイ指定のサイズは変わらなくてもですね画面の解像度が変わった場合赤の内部の方ではこの講師というのがひとつひとつが小さくなります細くなるんですねなのでそのぶん動画や画像が高精細に見れます同じくですねぇもしもそのピクセルで指定するとその講師に対しての大きさになりますので前の解像度よりも実際に表示される文字と音が小さくなりますご飯ですね大きさをピクセルで指定した場合画面の解像度によって実際に表示される大きさが決まってくるというものになります次2パーセントでの指定方法なんですけれども俺はもしではなくてボックスの要素です音の大きさに対して指定できるものになります猫のパーセントで大きさを指定した場合ですね実際に画面に表示される大きさというのはディスプレイのサイズによって違ってきます例えばディスプレイがですね13インの時に予測ですねの横幅を70%とスタイルシートで指定した場合ですねこのように画面の横幅のサイズを100%としてその中の70%これが実際のボックスの横幅になりますこれがもしですね画面のサイズが11インチだったとするとその画面のサイズ100%に対しての綿70%の大きさで適用されな形になります9パーセントでのですね大きさの指定方法というのはまレスポンシブデザインとかって言うんですけれども例えばですねこれは私が販売しているワードプレスというですねブログシステムのついたですねホームページが簡単に作れる店舗 R 8になるんですけれどもパソコンや携帯でもですね同じような形で見れるようにしたいというホームページを作りたいときに使うようになるしてここにありますこの画面のサイズによって大きさが実際決まってくる電話パーセントでの指定方法になります次に色の指定方法を見ていきたいと思うんですけれどもまず色を目で指定する方法というのがありますのであったようにですねデートだとかブルーホワイトとかっていう形で実際に書いて否定するような方法にありますこの指定方法はですね基本的な色には使えるんですけれどもちょっと凝った色を使いたいとかですねそういう時には色の名前がなくてですね指定できないということがありますのでそうした場合ですね次の RGB からというもので色を指定してあげますこの RGB カラーというのはですね色の三原色と言われるレッドブルーグリーン赤緑青ですねこの三色の割合を決めてあげるというのが主になりますスタイルシートで RGB カラーを指定する場合ですねこのような形になります頭にシャープを付けてですね6桁で指定してあげますね気玉ですね0から9までとそっから B C D E F という形の0から F までの指定します後の6桁の家ですねそれぞれ二桁ずつで RGB Red Green Blue という形して別れていますそれぞれに数値を入れてあげることで色が作られるというものになります次ですねさっきのと同じような RGB カラーの指定方法で今度は3桁で指定する方法がありますこれはですね6桁で指定した場合にいることのふた桁が同じ数値だった場合33とか FF とか00とかってんですねそういう場合にそういう場合に一桁で書くことができる指定方向になります最後はですね rgba という指定方法になりますこれは先ほどの RGB COLOR RED BLUE Green という色の指定を法に加えてですね透明度というものも否定することは出来ます主 BL ですねスタイルを指定する場合 rgba かっことしてそれぞれの色をカンマで区切って指定する形になります色はですね先ほどもと違ってゼロから今度全て数値でですね255まで指定できるの形になりますそれぞれのレッドブルーグリーンの色の量を指定してあげてですね最後に透明度というものを指定してあげます透明度は0から1までで0.5とかという形で小数点で指定してあげることができます以上がですねスタイルシートでの対応しておりますはいいかがだったでしょうか色々なして午後はありますけれどもピクセル RGB の話ですねこの二つを覚えるようにしましょう