WEBはじめました

お花屋さん→WEB広告代理店→色々

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

 

 

マージン

ブロックとブロックの間の空間を広げる設定。

双方のブロックが接する部分のマージン

f:id:nkjm24:20140616121514p:plain

を0に設定すればボックスとボックスはくっついて表示される。

Paddingと同じように指定が可能。

 

 

 

 

フォント指定

フォント指定は下記の3つで間に合うとのこと。

“Hiragino Kaku Gothic ProN”, Meiryo, sans-serif

 

 

 

今日の演習

paddingとmarginがまだ頭の中でごちゃ混ぜになってる。

しかしながらボックスの構成の基本要素は理解できた。

演習1、2をおうちで復習。

f:id:nkjm24:20140616121508p:plain

f:id:nkjm24:20140616121514p:plain

 

1週間お疲れさまでした。いやー濃かった!

楽しかった。