1月の授業日記
1/12 クラス/IDセレクタ
クラスセレクタ
タグに名前を付けて独自のスタイル指定が可能になる
＜タグ class="クラス名"＞(再出する場合)
タグに名前を付けて識別し、付けた名前をCSSのセレクタにして独自の指定が行える
.クラス名{プロパティ：値；}
既存タグで示せない部分への指定
htmlタグは最低限のものしか用意されていない
特定の意味・表示効果を持たないタグ＜div＞＜span＞
既存のタグで示せない任意のエリアを括り、class等で指定できる
＜span＞～＜/span＞
行内の一部など改行しない場合
＜div＞～＜/div＞
ブロックなど改行を伴う部分を指定
きょうのひとこと
divで括ると領域が判りやすくできます
1/19 html5とボックスモデル
htmlのバージョン
htmlにはバージョンがあり最新がhtml5
＜!doctype html＞
html書類の1行目に置かれhtml5であることを示す
html5で追加されたタグ
よく使用されるdiv名がタグで用意され終了タグの重複など分かりやすくなった
＜section＞～＜/section＞
章の区切り
＜article＞～＜/article＞
日付事・記事ごと等の区切り
＜main＞～＜/main＞
ページの主要部分の括り
ボックスモデル
CSSでは各要素が「ボックス」と呼ばれる矩形領域を持ち、以下のような設定が行える
margin
ボックスの外側の間隔
margin:値
border
paddingの外側に枠線が指定できる
border:スタイル 太さ 色
padding
ボックスと内容物の余白
padding:値
ボックスのサイズ
幅は親要素いっぱい高さは内容物のサイズだが指定で変えられる
width:値,height:値
ボックスの大きさをpxで指定できる
ボックスのセンタリング
ボックスの左右のマージンを同じ値にする(auto)と真ん中に配置される
margin:auto