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でのやり方は次回お届け！
