1月の授業日記

1/12 クラス/IDセレクタ

クラスセレクタ

タグに名前を付けて独自のスタイル指定が可能になる

<タグ class="クラス名">(再出する場合)

タグに名前を付けて識別=クラス属性

 . クラス名{プロパティ:値}

つけた名前に.をつけてCSSのセレクタにできる=クラスセレクタ

既存タグで示せない部分への指定

htmlタグは最低限のものしか用意されていない
特定の意味・表示効果を持たないタグ<span>
既存のタグで示せない任意のエリアを括り、class等で指定できる

<span>~</span>

行内の一部など改行しない場合

<div>~<div>

ブロックなど改行を伴う部分を指定

きょうのひとこと

 ・頑張りました。

1/19 html5とボックスモデル

htmlのバージョン

htmlにはバージョンがあり最新版がhtml5

<!doctype html>

html書類の1行目におかれhtml5であることを示す

html5で追加されたタグ

よく使用されるdiv名がタグで用意され終了タグの重複など分かりやすくなった

<section>~</section>

章の区切り

<article>~</article>

日付毎・記事毎の区切り

<main>~</main>

ページの主要部分の括り

ボックスモデル

CSSでは各要素が「ボックス」と呼ばれる短形領域を持ち、以下のような設定が行える

margin:値

border

paddingの外側に罫線が指定できる

border:スタイル 太さ 色

padding

ボックスの内側の内容物との余白

padding:値

ボックスのサイズ

ボックスの幅は親要素いっぱい高さは内容物のサイズだが指定で変更できる

width:値

height:値

ボックスの大きさをpxで指定できる

ボックスのセンタリング

ボックスの外側=マージンの左右の値を同じにする(auto)と真ん中に配置される

margin:auto

IEの互換性

IEはデフォルトではCSSの解釈が独自だった古いIEとの互換モードになっているので切り替えが必要

ツール>互換表示設定

きょうのひとこと

今日も頑張りました。