HTML/CSS-13日目
はじめてセルフのジェルネイルに挑戦したんですが、
二度としたくないと思いました。
-------------------------------------------------------------
今日はこないだからやってる２段組レイアウトを少しいじってから、ナビメニューを作ってみます。
幅を％指定する
CSSで幅を指定するとき、pxをメインで使用して来ましたが、今回は％で指定してみようと思います。
pxは絶対値と呼ばれ、ブラウザのサイズが変わってもサイズは変動しません。
しかし％を使えば、（例外もありますが）サイズを変動させることができます。
％は、
こんな感じで使います。
じゃあこの場合、widthは何に対しての90％になるのか？という話ですが、
％が指定されたセレクタのひとつ外の要素
この場合、wrapperはbodyに内包される子要素です。
なので、これはbodyに対して90％で出力されます。
要するにbodyのサイズが変われば、wrpperのサイズも常にその90％を保って変動するということです。
しかし、親要素のサイズがpxで指定されていると、親要素のサイズは変わらないので、(今回でいうbody)、wrapperの90％も変動はしません。
このサイズによって変動する設定を持つサイトを、
レスポンシブサイトといいます。
PC用サイトをスマホで快適に見られるようにと、最近ではよく使用されています。
------------------------------------------------------------------
ナビメニューを作る
目指すのはこの形です。
たて向きと横向きの2種類のメニューを作ります。
この画像、横並びメニューの項目５が色違いますよね。
これはカーソルを乗せたときに色の変化が起こるように指定しています。
これも作っていきましょう。
HTMLはこんな感じ。
では、ここからCSSを記述します。
まず、リストのマーカーを消します。
line-heightについては、IE6以前のバグ対策用だそうです。
一気に増えた
各要素についてのコメントは記載していますが、
line-height: 34px;
これについて、ボタンの高さと行の高さは同じです。
heightで指定することも可能ですが、そうすると文字が中心に来ないので、また別で文字の高さを指定することになります。
また今回はline-heightにpxという単位がついていますが、これは一行のみの文字列を上下中央におきたいときに使用します。複数行のときは単位をつけずに調整しましょう。面倒そう。
text-decoration: none;
下線はHTML側の<a>タグで自然に発生するので、ここで消しといてあげましょう。
ブラウザではこうなります。
CSSに少し細工。
ボックスの内側に陰をつけました。
その下にhoverという擬似クラスを与え、カーソルが乗ったときの挙動を指定します。
.Atype ul li a｛....｝
.Atypeクラスの中の、<ul>の中の、<li>の中にある、<a>に作用してくださいねという指定方法です。
これでたて型メニューが完成しました。
少し立体感ない？
項目1にカーソルを乗せました。
へこんだっぽくない？
次は横並びのやつを作ります。
これであらかじめ全体の幅を指定しておきます。これをしないと、ブラウザの幅が狭くなったときに横幅を保ってくれません。
heightについて、このulの中にある子要素はfloatで左に浮かせます。そうすると、親要素であるulは、浮いているこのリストのボタンを認識できなくなります。
これを回避するため、前回はclearを使って解決しましたが、
今回はあらかじめ親要素に高さを持たせることで解決していきます。
さらに記述します。
floatで先頭を左に、後続の要素を右に回り込ませます。
ここはもうさっきのたて並びと同じ。色だけ変えていきます。
hoverプロパティを書いていきます。
これもさっきと同じ。
完成しました。
へこんだ感じになってない？
HTML/CSS-12日目
先日作った二段組のレイアウトですが、
全ての要素のpaddingとmarginはそれぞれ10pxずつでした。
でも、よくみるとなぜか余白がバラバラ......。
今回はmarginとpaddingのルールについて説明します。
そもそもmargin（外向きの余白）は、垂直方向には隣接するマージンは加算されません。
大きい方の値のみ適用されます。
でもその中で例外が存在します。
それについて説明します。
こないだ作ったレイアウトがこちら。
これ、余白が均等ではありません。
この理由を解明していきます。
まずはこんな風に余白に番号を振ります。
で、各番号について説明して行きます。
コードはこちら。コード見ながらじゃないとわかりづらい。
CSSです。
まず①、外側の余白。
これは上下左右均等です。
div.wrapperの内側のpadding:10px;
と、
headerとfooterのmargin:10px;
が、加算されて20pxになっています。
ルール１：paddingとmarginは加算される。
②について。
これは、
headerの外側下のmargin:10px;
と、
nav,articleの外側上のmargin:10px;
が、加算されています。
ルール２：marginの上下間のmarginは相殺が原則だが、floatしたものとは加算される。
CSSをみてみてください。
navとarticleはfloatされています。
③、
やたら広い余白。
navは左寄せ、
articleは右寄せなので、ここに関してはなんのあれもないです。
でももし仮に、
navとarticleを共に左寄せにした場合、③には加算された空白が発生します。
ルール③：フローとされた左右間のmarginは加算される。
④について、
フロートしたnavとarticleと、footerのmargin:10px;が相殺されています。
ルール４：フロートされた要素のmarginでも、次要素がclear:both;すれば、相殺される。
以上！
HTML/CSS-11日目
最初の方とかめっちゃきちんと内容書きよったのに最近ものっそい雑になりよる。
どうでもいいけど鶏に似合うスニーカー探してます。
今日は２段組のボックスレイアウトを作ります。
----------ぱっ-------------------------------------ぱっ----------------------------------------
ボックス要素を使用して二段組のレイアウトを作っていきます。
完成を目指すのはこの形。ものすごいレゲエ臭。
早速やっていきましょう。
中身を作る（HTML）
では、HTMLから。
完成図、わかりづらいけどグレーの背景色の中に白いまとまりがあって、
その中にさらにヘッダーやらなんやかんやと、各要素が入っています。
この白い、二段組ボックスレイアウトの一番外側のひとを、一般的にwrapperと呼びます。
HTMLで中身を書いていきます。
<header><article><nav><footer>
そしたらそのwrapperの中にさらに上の4つの要素があるので、適当にタグを作って書いていきます。
<header>には<h1>が、
<nav>には<ul>が、基本的には必須となります。
装飾なしですが、中身はこれで完了です。意外と少ないですね。
調子乗って色は自分好みに変えながら進めます。
完全に調子に乗った輩の挙動。
-------------------------------------------------------------------
各要素を装飾する（CSS）
CSSを書いていきます。
CSSを書き始める前に、まず、これらのすべての要素がボックスになっているか確認しながら進めたほうがいいです。今回ははしょる。
全体の背景色を決める
ここでついでにリセットもしておきます。
さらに、全体の背景色を設定。
少し詰まって、背景も変わりました。
ボックス関連を指定
ここから、
ボックス関連を指定していきます。
wrapper
外側からせめて行きましょう。
.wrapperはヘッダーやフッターなどを内包する一番大きい外側の箱です。
赤い下線部marginの10PX autoは、垂直方向に10PX、さらに左右方向に自動で余白を取って配置してという命令。
さらにそのネストに当たるボックスについて書いていきます。
header
頭の部分です。
背景色、高さ、内外余白を指定します。
横幅は指定しないので、外部余白分のみ左右に余白が発生します。
article
右側の箱です。黄色いやつ。
幅と高さを指定し、floatで右側に浮かせます。
nav
左側水色の箱です。リスト入りのやつ。
幅と高さを指定し、左側に浮かせます。
footer
一番下の箱です。
clear: both;
footerの上部にはnavとarticleがありますが、これら２つはfloatにより浮いています。
clear: both;と書くことで、フロートによる要素の回り込みを解除します。前回のブログでやったやつ。
これで完成です。
ちなみに、footerのclearを書かないとこうなります。
なぜなら、navとarticleがフロートにより浮いているから。
親要素であるwrapperがこの浮いている２つを認識できないのです。
footerにclearをかけてやることで、親要素にfooterを認識させ、footerまでの領域をwrappwrが確保できるようにします。
では、footerがない場合に領域を確保させるには？
clearfixを使う
先日のブログに書いた「clearfix」を使います。
親要素の最後に、clear=bothを含んだブロックレベル要素をおく、というやり方です。
おさらいもかねて、改めてやってみます。
①divにクラス[clearfix]を与える
クラスを二つ持たせるのは問題ないので、まとめて持たせてあげましょう。
②外部CSSにclearを書き込む
.clearfix:after
で、clearfixというクラスをもつ箱のafter(後)に、このCSSを適当します。という意味になります。
content="";
CSSから文字を出力することが可能になります。""の中に文字を入れると、clearfixというクラスを持つ箱の後に、その文字列が出力されます。
display: block;
ブロック要素にします。clear=bothを含んだブロックレベル要素をおかないと解除されませんので、ここでブロック要素にします。
clear: both;
これで解除の命令を出します。
綺麗にまとまりました。
これで段組レイアウトボックスは完成です。
レッツトライ↑
HTML/CSS−10日目
自分の復習用にブログしよるんにやたら語り口調になるの、めっちゃウケるな。
-----------------------------------------------------------------------------------
marginのところはもう自分がわかっとるけいいことにする。
もうめっちゃわかっとるけいいことにする。
性格出るわ〜( ◠‿◠ )
はい。
今日は枠線とかするよ
-----------------------------------------------------------------------------------
枠線のスタイルを指定する
border-style
値は5種類。
none:なし
dotted:ドット点線
dashed:点線
solid:一本線
double:二重線
HTMLは割愛しますが、以下CSSをみてみます。
見出し1にドット、
見出し2に点線、
見出し3に二重線を指定します。
ブラウザ出力です。
二重線は3px以上くらいからじゃないとたぶん見えんって先生言いよったよ
--------------------------------------------------------------------------
ボックスの回りこみ位置を指定する
float
floatプロパティを使用すれば、ボックスの回りこみ位置を指定できます。
プロパティは以下3つ。
none:回り込みの指定なし
left:ボックスを左に寄せる。その後に続く要素は右側に回りこむ。
right:ボックスを右に寄せる。その後に続く要素は左側に回りこむ。
早速以下のコードを見てみます。
このCSSだと、
.boxの中身を囲むためのborderが居るので
<div class=box>タグ内の
<img>と<p>のどちらもまとめて、要するに全部、枠線で囲むことになります。
しかしブラウザでは、
こんな風に、imgだけ囲みきれていません。
完全に浮いている。
そうなんですね〜〜〜floatタグは「浮かせて配置をずらす」ヤツなんですね〜クラスでも浮いてるやつっていましたよね〜〜〜あっ涙出てきた
なので、この状態では、
親要素<div>からみると、ネストになっている子要素<img>は、浮いた状態になっているということになります。
よって全体を囲みたくても、imgは浮いているので垂直方向が認識できず、このような状態になります。
この対策方法は、
「親要素の最後に、clear=bothを含んだブロックレベル要素をおく。」
これです。は？
あんまりよくわからんけど、解決するために、CSSで以下のように指定します。
ボックスの回りこみを解除する
clear
clearプロパティは、floatで浮かせたボックスの回りこみを解除します。
none:回りこみを解除しません。
left:左寄せを解除します。
right:右寄せを解除します。
both:回り込みすべてを解除します。
CSSにclearを入れていきます。
コードを追っていこう
HTML13行目<div>に、clearfixというクラスを持たせます。
CSSは上のように記述します。
いや、一通りできたんやけど、ちょっとここに関しては説明がうまくできる段階までいってないので後日出直す（悔しい）
------------------------------------------------------------------------------------
指定したボックスからはみ出た要素を片付ける
overflow
overflowプロパティを使うと、ボックスからはみ出た要素について指定することができます。
visible:はみ出したまま（初期設定）
hidden:はみ出したものを隠す
scroll:スクロールで表示可能にする
auto:ブラウザに丸投げ（大体スクロールになる）
いま、このコード
これをブラウザで表示します。
はみ出てます。
これを隠すため、overflowプロパティを指定します。
赤線の部分です。今回は調子に乗ってスクロールとかしちゃう〜💔❤️👨❤️👩
こうすると、
ボックスにスクロールバーが発生し、はみ出ていた内容がスクロールで確認できるようになりました。
利用規約とかでよく見るやつ。なんかすごいと思いました。
------------------------------------------------------------------------------
リストスタイルを指定する
<ul>でリストを作成すると、自然にリストマーカーが発生します。
初期設定は黒い丸。味気ない。
これを変えてみましょう。
CSSでリストスタイルを指定します。
めっちゃある。
noneだとなくなります。お試しあれ。
ちなみに画像を引っ張ってくることもできます。
こんな感じ。かわいくなた。
眠すぎるのできょうはここまで。
明日はtomorrow
HTML/CSS−9日目
これから毎日ここに一言だけ書くようにします。
結婚したら旦那より稼ぎたい
あと今日の講義脳が半分聞いてなかった
----------------------------------------------------------------------
ボックスモデルについて
HTML/CSSにおけるボックスモデルです。
CSSにおいて各要素は四角いボックスの中に表示されると考えています。
パディング：ボックス内側の余白（緑のとこ）
プロパティ一覧
padding-top:
padding-right:
padding-left:
padding-bottom:
マージン：ボックス外側の余白（紫のとこ）
プロパティ一覧
margin-top:
margin-right:
margin-left:
margin-bottom:
枠線（ボーダー）：ボックスの境界線（黒い線）
この図を見ながらでも、簡単に配置ができます。
簡単にコードを書くぜ
HTMLは割愛します。
赤枠のbody部分では、あらかじめブラウザで決められていたbodyの余白（各5pxくらい）を、打ち消します。なんかブラウザにはあらかじめすこし余白があるらしい。
で、これがブラウザ出力。正直HTMLも割愛とかしとるし、自分でもいま見返してなんしよったかあんまり思い出せぬ
あそう、リセットCSSというのがあって、
この記述をすることで、すべての要素のmarginとpaddingを0にできます。
旧ブロックレベル（divを除く）では、
初期値では前後が一行空く使用になっています。
これをなくしてから、CSSを書くと割りと思い通りになるらしい
ちなみに、４行目の、この*はユニバーサルセレクタといい、
すべての要素をさすセレクタです。
子供がよく言う「みんな死んじゃえ」の、みんなの部分です。
まだざっくりとしか説明できない、深追いしてないからね
今日の内容本当にしんどい
-------------------------------------------------------------------------------
ボックスの実際の大きさについて
CSSでは、標準モードという考え方によりボックスの大きさが決定されます。
実際の幅＝width+padding+borderで計算できます。
たとえば
width:400px;
padding:50px;
border:10px solid black;
このとき、実際の幅は、
10+50+400+500+10になり、520pxとなります。
このしたの四角の幅が520ね
なんでこんなに大きさ違うん〜みたいなときは、
box-sizing:border-box;
これをかいてあげるとボーダー（枠線）にあわせたボックスのサイズが指定されます。
幅、高さが思い通りにならないときはこの記述をしてみましょう。
すごい申し訳ないんですけど、この日の講義は途中で力尽きてここまでです。
めっちゃ大事なmarginのとこぜんぜんブログにかけんのめっちゃウケる。 多分つぎ書く。
HTML/CSS−8日目
こんにちは。月曜日です。
（笑）⇦これにたまにむっちゃ腹たつときある。
今日もCSSを進めます。
なんとなくダミー文作成のお勧めのサイト貼っときます。
--------------------------------------------------------------------
フォントサイズとSEO
たとえば、こんなコードがあります。
<h1>と<h2>があります。
HTMLでは<h1>のほうがサイズが大きいとされますが、
CSSでは<h2>のほうが大きい文字サイズと指定されています。
実行結果はこちら
こんな感じです。
これだけ見ると、やはり文字が大きいほうが大事、協調されているという感覚になりますが、
google検索のbotには、文字が小さくても、
<h1>のタグのほうがメインの見出しであると判断されます。
要するに、CSSはSEOの観点から見ると、まったく無意味ということらしいです。
------------------------------------------------------------
先週の続き。
rgba法をbracketで使用します。
colorの値のところを帯がけし、右クリックすると「クイック編集メニュー」が出てきます。帯がけからのctrl+Eでも可。
そうするとこの画面が出てきますので、好きに編集してください。
------------------------------------------------------------------------
fontプロパティ
装飾や、文字サイズについて、各プロパティを見て行きます。
font-family
HTML/CSSには、継承というものがあります。親セレクタに設定したものは、すべての子要素に引き継がれるというもの。
でも、子要素に個別にCSSを指定してあげれば、それは個別指定のCSSが反映されます。
fontなどはいちいち文字列のたびに指定するのは面倒です。そこでbody（親セレクタ）に全体に適用したいフォントを持たせてしまいましょう。
先ほどのコードにbodyのフォント設定を加えました。
でも画像を見ると、h2は個別に設定してあります。
ちなみに、美しくCSSを記述するために、親要素は上に、子要素は下に書いていくようにしましょう。性格出ます。
------------------------------------------------------------------
text-decoration
テキストを装飾するプロパティです。
値として、
none:装飾なし
underline:下線
overline:上線
line-through:取り消し線
が、あります。
このコードを見ます。
これをブラウザで確認すると、
こうなります。
ただこれ、あんまり推奨されてません。
なぜなら、この画像でもわかるように、リンクに見えるから。
本来は、<a>タグでつくったリンクの下線を逆に打ち消すために使用されることがほとんどです。
以下に使用例をあげます。
このindex2へ というのは本物のリンクです。見出し２ですというでっかいのはフェイクです。
CSSで<a>で自然に発生するリンクの下線を打ち消します。
これで消えました。後々手の込んだサイトを作る際、必要になってくる記述だと思いますので、覚えておきましょう。
---------------------------------------------------------------------------------
text-align
これを使うと、行を簡単にそろえることができます。
右そろえにしてみます。
ブラウザ出力します。
このプロパティは、初期値がleft（左）になっています。
ほか、文字関連のプロパティいろいろあります。
---------------------------------------------------------------------
line-height
line-heightを使うと、行の高さを指定できます。
この設定方法について、単位をありにするかなしにするかで見せ方が非常に変わります。
このコードのCSSの部分を見ます。
<p>タグのCSS指定に、
line-height: 1.5em;
という記述があります。
emという単位つき。
これだと、ブラウザではこうなります。
文字がかぶってます。
では、単位を消してみましょう。
ブラウザで確認します。
解消されました！
この違いは、line-heightの性質にあります。
単位がある場合、小さい文字にあわせて行の高さが決められます。
逆に単位がない場合、使用している一番大きい文字のサイズに合わせて高さをとってくれます。
複数行にわたる長い文章で、かつ、サイズの異なる文字を含むときは、単位のない行間指定をしましょう。
--------------------------------------------------------------------
まとめて記述する
さて、ここまでフォントの指定をしてきました。
これをいちいち書くやり方もありますが、まとめて記述も可能なんです。
先ほどのコードの<p>の部分についてのCSS
です。これをまとめていきます。
一行にまとまりました。念のため、最初のバラバラコードはコメントアウトで殺しました。
めっちゃわかりづらい。これ、順番ミスると動作しません。
スタイル ウェイト サイズ/行間 フォント
この順番です。
わかりづらいので今後はもうしません（笑）
-----------------------------------------------------------------
背景プロパティ
fontに引き続き、背景プロパティについても見て行きましょう。
background-repeat
背景画像を設定する。
これについて、値は
repeat:繰り返し
repeat-x:水平方向に繰り返し
repeat-y:垂直方向に繰り返し
no-repeat:一度のみ
この４種類があります。
初期値はrepeatなので、指定せずとも繰り返してくれます。
-xと-yについて、ブラウザ左上を基準とし、その行、列にしたがって繰り返します。
background-position
背景画像の位置を決めます。
値はtop,center,bottomや、right,center,leftなどで決めます。
％による指定も可能です。
background-attachment
スクロール時の背景画像の表示方法
fixed:背景画像固定 スクロールすると流れて行っちゃう
scroll:スクロールするとついてきます
このほかにもいろいろあります。書きませんけど。
これらについてもfontと同じく、プロパティをまとめて指定できます。
下部にコメントアウトしている各プロパティをまとめたものです。
background-position:center center;
これについては、
background-position:center;
これと同義です。
ちなみに、fontプロパティにもいえることですが、
個別で書いたプロパティとまとめたプロパティを混在させることはNGです。
後から書いたほうのみ適用されます。
まとめて書くか個別で書くか、どちらかにしましょう。
明日はブロックモデルを書きます。
HTML/CSS−7日目
口だけ達者星人の黙らせ方教えてください。
本日のラインナップは〜〜〜こちら！（？）
フォントを選ぼう
CSSでのフォントの使い分け。
作成したwebサイト、macで見るかwindowsで見るかわかりませんよね。
そんなときは、記述を以下のように変えましょう。
これなら
windowsのときメイリオ、
macのときヒラギノ...で出力してくれます。
このコード、""でくくられている部分とそうでない部分があります。
次の場合、くくる必要があるという風になってます。
○日本語の全角文字
○アルファベットでも途中で半角スペースがあるもの
個人的にそんな関係なくね？とか思ってしまいましたが、ルールーは守りましょう。w
googlr fontをHTMLで使用する
今回、googleが出してる日本語フォントをひっぱってきて使用しました。
やり方簡単に書いておきます。
①ここにアクセスする
https://googlefonts.github.io/japanese/
②ほしいフォントの書体名をクリック
今回は赤枠のはんなりのやつにします。
自動スクロールでさくっと飛んでくれます。
③コピペします。
青枠の部分をHTMLの<head>内部、
オレンジ枠の部分をcss内にコピペします。
オレンジの下線の部分がコピペ済みの部分です。
赤枠はデフォのセレクタなので、こちらでフォントを変えたいセレクタを指定します。
これで保存すれば、指定したフォントが適用されます！
-------------------------------------------------------
ＣＳＳのセレクタについて
クラスセレクタ
.クラス名{プロパティ:値;}
これをすることにより同じタグでも差別化が可能。
タグに直接CSSを指定するタイプセレクタは個人的にお勧めしません。
たとえばHTMLの中に<p>が３つ、そのうちひとつだけを赤にしたいとき、
<p></p>
<p></p>
<p></p>
この状態でCSSに
p {color:red;}
と表記すると、
<p>タグの３つすべてが赤になってしまいます。
そこで、
<p class=test> </p>
<p> </p>
<p> </p>
こういう風にクラスをもたせてあげて、CSSで、
.test {color:red;}
.testでクラス＝テストをピンポイントで指定することで、一番上のひとつだけを赤色にしてあげることができます。
CSSを指定するときは、必ず頭にピリオドが必要です。
コードでいうとこんな感じ。
このままだと<p>タグ部分がすべてcrimson色になります。
こんな感じ。
このうち、上の2行（HTML内、13・14行目）に、testを与えているので、そこでクラスセレクタの出番。
.testでクラスにCSSを指定してあげましょう。
変わりました。
ちなみに、今このコードだと、
pも.testもCSS指定しているので、
testをクラスにもつ上の2行は重複してCSSを持つことになります。
ですが、クラスセレクタのほうが強いので、緑が反映されます。
クラスセレクタは、強い。
カワイイは、作れる。（？）
ちなみに、
こんな風にクラスを2つ指定することも可能です。
3つ以上はあまりよろしくないようです。
-----------------------------------------------------------------
idセレクタ
属性にid名をつけて、CSSを適用します。
通常のセレクタよりかなり強い！
クラスよりも強いです。
ただし、
id自体は何度でも使えますが、
同一のid名はひとつのHTML内で一度しか使えません。（一意といいます）
反対にclassはどれだけでも使えるため、
それに比べて再利用性、汎用性が低い。
この理由から、idセレクタは最近ではあまり使われないようです。
コードはこちら。
クラスのときは頭にピリオドでしたが、IDのときは＃（ハッシュ）になります。
idの場合、classとは違い二つ指定することはできません。id名は１つのみです。
----------------------------------------------------------------------------
セレクタのグループ化
CSSの、
#box1,#box2のところに着目です。
こんな風に半角スペースを空けてCSSに記載すれば、まとめてCSSを指定できます。
冗長なコードにならなくてすむので、効率的です。
---------------------------------------------------------------------
CSSの単位
px(ピクセル)＝画素。デジタル画面はだいたい画素の集合体。絶対値。16px=1em。
em(エム)＝16px。相対値。
％(パーセント)＝100％＝16px=1em。相対値。
相対値はブラウザの文字サイズに依存します。ブラウザの文字サイズを変えると、文字サイズは変化します。
絶対値を使用した場合、ブラウザの設定に左右されません。
---------------------------------------------------------
コメントアウトについて
HTMLの場合、コメントアウトは
<!--コメントアウト-->
これで実装できました。
CSSの場合、
/*コメントアウト*/
これで実装します。
コードで確認します。
CSSのコメントもHTML同様、ネスト化はできません。
-----------------------------------------------------------------
CSSで色を指定する
CSSでの色指定は
red
blue
green
など、色名を指定していましたが、
最近では、
#ff0000
#ad9027
こういった16進表記や、
rgba(255,0,0,0.5)
このrgba表記も主流になっています。
16進表記では、
# (ff) (ff) (ff)
赤 緑 青
この三色で二桁ごとに分かれています。
0からfまでの16個の数字を2桁で指定、それが3色分なので256色を表現できます。
0が黒、fに向けて明るくなっていきます。
#ffffffで白、
#000000で黒を表現します。
#ff0000のとき、赤のパラメータがmaxで、緑と青の部分が0なので、真っ赤になります。
ちなみに、#ff3300など、各色のパラメータの二桁が同じ数字のとき、#f30という風にはしょれます。
#aa2288→#a28
#0088cc→#08c
こんな感じで。
rgba法では透明度を指定できます。
aの部分をアルファと呼び、
0が完全に透明、1が完全に不透明です。
このrgbというのは、加法混色のひとつといわれています。
光のかけあいで色を表現しています。Bracketsでのやり方は次回お届け！
