【070-480】試験対策その2-4 CSS3のセレクターとスタイル プロパティ | P2
やっと4つ目のパート。全然終わる気がしない……orz
でも、JeremyとMichaelの掛け合いがだんだん面白くなってきた。
さて、前のセッションではどこに適用するか、でした。
次は、何を適用するか、です。
color、text、box。
color
HTMLで特定の名前があるのは175色くらい。
HEX
Hex値でも指定できる。#を頭につけ、6ケタのHex値で指定する。
p｛color:hex(#000000)｝ 黒になる #000000は黒、#FFFFFFは白
RGB
r(赤)、g(緑)、b(青)の値を0～255の数字で指定する
p｛color:rgb(0,0,255)｝ 青になる
RGBA
rbgに透明度aを加えたのがrbga。不透明度を0.0～1.0で指定できる
p｛color:rgba(0,0,255,1.0)｝ 青、不透明100%
p｛color:rgba(0,0,255,0.5)｝ 青、不透明50%
HSL
色相(hue)、彩度(saturation)、輝度(ligntness)で指定する。
ベースになる色を決めて、彩度、輝度をかえる。
p｛color:hsl(0,100%,50%)｝ 青になる
rgbaのように、hslに透明度を加えたhslaもある。
他のプロパティでも透明度を変えられる
opacity:0.5;
text
下線を付けたり太字にするなら、uやbタグを使えばいい。
面倒なテキストプロパティを使う理由は？
管理しやすいから！HTMLタグではなくCSSで装飾すれば、一括でスタイルを変更できる。
text-shadow
ブラー効果、影を付ける
table{text-shadow: 2px 2px}
table{text-shadow: 2px 2px red} 色も指定できる
table{text-shadow: 2px 2px 2px red} 3つ目の2pxはぼかし
table{text-shadow: 2px 2px 2px gray; font-size: 24pt;}
赤い影と青い影がつく。いくつでも増やせる。
table{text-shadow: 2px 2px 2px red,0 0 10px blue; font-size: 24pt;}
font
font shorthand propert は、キーボードの摩耗を減らすもの(笑)
まとめて指定を行うときに使う。
font-style,font-variant,font-weightは、順不同で指定できる
table{font-style:}
table{font-weight:}
table{font-variant:}
font-weight
フォントの太さを指定する。
table{font-weight:bold;}
table{font-weight:bolder;}
table{font-weight:lighter;}
table{font-weight:100;} 100～900で値を設定する
font-size
フォントの大きさを指定する。
table{font-size:4}
table{font-size:24pt}
table{font-size:24px}
table{font-size:1cm}
table{font-size:0.5in}
フォントの指定
fontはユーザーの環境に入っているものを使う。
table{font-family:'trebucher ms'}
font-face
webフォントを指定できるようにする。
下の例では、urlで指定したフォントを、「niftyfont」という名前でCSS内で使えるようになりました。
@font-face{
font-family: "niftyfont";
src: url("/type/nifty_n.woff") format(woff)
}
.nifty {
font-family: niftyfont;
}
WOFFはとても便利です。
オープンタイプのフォントを使うことができるが、問題もある。
フォントを所有していてもデジタル著作権管理をするのは非常に難しい。
WOFFはセキュリティを担い、知的財産権を守ってくれる。
box
Windows8で重要となる、カラムからです。
div{columns: 400px;} 幅を決める
div{columns: 8;} カラム数を決める
枠、マージン、余白
非常に重要なプロパティ（例で出てくる「#loren」 は div要素）
隙間の設定
#loren{margin:20px} boxと外側のコンテンツの隙間
#loren{padding:20px} boxと内側のコンテンツの隙間
枠線、幅の設定
#loren{border:2px solid red} solid --> dotted にすれば点線が設定できる
#loren{border:2px solid red; width:200px;} 枠を含まない部分の幅が「200px」
#loren{border:2px solid red; width:200px; box-sizing:border-box} box-sizing:border-box を付けると、枠を含む幅が「200px」
#loren{border-left:20px solid green; padding-left:20px}
四辺に一度に設定することもできれば、-top,-right,-bottom,-leftなどのようい
個別設定することもできる。
サイズには接頭語を付けて指定することもできる。
max-,min。
「min-width」なら最小値
HTMLは自分でサイズを最適化しようとするため、最小値をセットしておく。
最低でも80pxで表示する。など。
white-space(normal | pre | nowrap | pre-wrap | pre-line )
空白の表示の仕方を決める。
normalは自動的に改行し、複数の空白やタブや改行をひとつの空白に置換する。
preにすると自動改行せず、空白・タブ・改行はそのまま表示。
overflow(visible | hidden | scroll | auto)
はみ出たコンテンツをどう扱うか。
visibleははみ出して見せる、hiddenは表示しない、scrollはスクロールする、autoは自動でスクロール。
最後はbox-shadowとborder-radius（丸角）
2012年HTMLで丸角が使えるようになった
すごいね！
でもこうした装飾の機能はWindows8の開発テーマとは違う。（バッサリ）
丸みを出す機能のためにいろいろな苦労がありました。
でもWindows8の画面ではきれいな四角が多い
機能を考えず、丸角やグラデーションを多用しないでください！
最後の2人の会話から、丸角は試験に出ないのかなー？という気がしますね。
