0613 スタイルシートにお初にお目にかかる
Dreamweaver
コーディングに使うAdobeのソフト。コードの入力補助をしてくれる。
CSS
Cascading Style Seatのこと。文書構造と体裁を分離させるという理念を実現するために提唱されたスタイルシートのひとつ。
セレクタ
何に対して{ }内のCSS命令を適用するかというところの「何」をセレクタと呼ぶ。
セレクタの種類としては
・タイプセレクタ(今日学んだ)
・IDセレクタ
・classセレクタ
・子孫セレクタ
・属性セレクタ
・ユニバーサルセレクタ
等がある。
タイプセレクタ
要素に対してスタイル指定する
h1 見出し1
h2 見出し2
:
:
p 段落
address コピーライト
blockquote 引用文
ul リスト
ol 番号付きリスト
dl 定義リスト
a リンク
img 画像の挿入
em 強調(emphasis)
strong 強い強調
div グループ(division)
table 表組み
form フォーム
span 任意の範囲指定
br 改行
<使い方>
(<head>内や外部スタイルシートに)
h1{
color: #FFF;
}
(<body>内)
<h1>大見出し要素</h1>
ボックスモデル
ボックスの構成要素として
・コンテント
・パディング
・ボーダー
・マージン
ボックス幅=コンテント領域幅+パディング+ボーダーの太さ+マージン
パディング
ボーダー辺に対しコンテントの読みやすさを確保するために空ける空間。
内容の嵩を増して大きいと思わせる設定。
padding-top / padding-right / padding-bottom / padding-left の順に記述する。
まとめて記述する場合は padding を使用。
padding: A B C D; 4つの値を指定
padding: A B; 2つの値を指定(Aが上下、Bが左右)
ボーダー
border-width / border-color / boder-style
マージン
ブロックとブロックの間の空間を広げる設定。
双方のブロックが接する部分のマージン
を0に設定すればボックスとボックスはくっついて表示される。
Paddingと同じように指定が可能。
フォント指定
フォント指定は下記の3つで間に合うとのこと。
“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif
今日の演習
paddingとmarginがまだ頭の中でごちゃ混ぜになってる。
しかしながらボックスの構成の基本要素は理解できた。
演習1、2をおうちで復習。
1週間お疲れさまでした。いやー濃かった!
楽しかった。