1限目
学科 HTML/CSS基礎④
CSSの記述方法について
2限目
学科 HTML/CSS基礎④
CSSの記述方法について
3限目
学科 HTML/CSS基礎④
Webページ制作実践
4限目
学科 HTML/CSS基礎④
Webページ制作実践
5限目
学科 HTML/CSS基礎④
本日の講義のまとめ
■設定の見直し
全角空白にチェック
保存は8Nへ
デスクトップに作ったフォルダに格納
名前はindex.html
保存すると本文が青くなる。
親子の関係（入れ子構造）にタブをそろえる。
タブの文字数を適宜変更（4くらい）
Headタグ
メタタグ
タイトルタグ
リンクタグ
<meta charset=”UTF-8″>メタタグを挿入
タグを揃える
サイトで描画されるのはボディタグの中だけ。
html.cssのお勉強サイト
は、タグに表示される
ディスクリプションは検索結果の説明文に表示される。
■Bodyタグ
H1..2..タグ
Pタグ
タグを揃えてクロームで確認
■スパンタグ＝ひとつの範囲として定義する
もう一つスパンタグを書く
横並びで追加された→スパンタグはインライン（NOTブロック）
なのでブロックの端っこまでではなく個別の範囲で反映される。
私たちが学んでいるのはHTML5 CSSはCSSフリー
インラインブロックは応用
■文字コード
■コメントアウト
コメントアウトは描画されない。
H1がコメントアウトされる
作業の進捗をメモしてもOK
■パス
→道順
alt属性は必ず付ける
srcソース →属性
属性と属性の値””
imgタグを使う準備が整った
alt属性も入れてあげる
画像をimgフォルダに移送させたら表示されなくなる。
移動先を指定してあげる
表示された
width と height
画角があるのでwidthだけを指定することが多い
■Aタグ
ハイパーリンクを指定する
imgタグはインライン
aタグもインライン
ハイパーリンクを指定してあげる。
（外部リンク＜他のサーバー＞を入れた）
新しいタブで開かせるハイパーリンク
“target=”_blank”
■リンクタグ
style.cssファイルを作る
デスクトップにこんな感じで格納
<link href=”reset.css” rel=”stylesheet”>
href. relはセット
エレメントとスタイルがある
パスが通ってない
スペルミスなどは検証ツールで確認！
青いアイコンに変えて、左側上でマウスを動かしてみると連動する。
背景を黄色で指定
スペルミス
打ちなおす
back groundを入力
色を入れる
→クローム上で反映される。
→大本を編集（コピペで編集）
■Class
H1やH2など多用するタグのそれぞれの設定ができる
文字を青くする
■divタグ
ひとかたまりの範囲として定義する
↓
ボックスをカラーコードから指定することもできる
cccはグレー
■CSSショートハンド
このコードでも同じことができる
margin:上 右 下 左
margin: 0 50px;
↑
この場合は2つの値は上下、左右
中央に配置 （計算をして中央に置いてくれる）
DEFを中央配置
80％の大きさで計算して表示してくれる
画面幅とは？？
Bodyに対しての80％。
↓は、親に対しての80％
右寄せ
マイナスマージン
ueとsitaを追加
マージンの相殺
同じになる
８０に変える
ちょっと広くなった（80が反映された）
sitaの上を100にする
広くなった
マージンの相殺が起こる。
大きい数字の方が反映される。80＜100
100が反映されている。
配置で間を開けたい場合はボトムだけ取る、といったような統一性をもって作業すると変なことにならない（カモ。）