1限目
学科 HTML/CSS基礎②
ファイル管理について
2限目
学科 HTML/CSS基礎②
Webページ制作実践
3限目
学科 HTML/CSS基礎②
Webページ制作実践
4限目
学科 HTML/CSS基礎②
Webページ制作実践
5限目
学科 HTML/CSS基礎②
本日の講義のまとめ
最初のトップに書き込むコード
↑コメントアウトは実際のサイトには表示されないけれどメモ書きとしてHTMLに残るもの。制作側のためのメモ書き
★パスを通す
パスとは道順、こことここが繋がってるよ、ファイル同志の繋がりがあることの表記。
画像を入れたい場合
★imgタグは閉じタグがない
imgタグは属性を入れられる
imgタグは src（ソース属性？）とalt属性（画像の説明）を入れることができる。
読み上げソフトを利用している人のためにalt属性も必ず入れてあげる！
↑
alt情報
↑
ソース情報
名前を指定してあげる
■画像の場所を変えた時にもパスを通してあげる。
Aタグ
別のファイルに飛ばすこともできる01.htmlファイルへ遷移
anotherフォルダ
パスを通すにはルートを確認して1つづつ
上はimgはタグ
下はCSSで表示させている。
botはimgを認識する。情報としてはimgが意味として載ることが大事ならimgとしてコードを描く。
意味のある画像HTML
意味のない画像CSS＝ex:装飾としての背景（back ground）
インラインとはオブジェクトのみに反映させるもの
↓
インラインはその単体のオブジェクトに影響する。
ブロックはブロック全体に影響する。
インラインブロックもある→上部の表参照
■CSS
セレクタ・プロパティ値
HTMLは単体でも動ける。
CSSはHTMLあって動くもの。
pタグに対して
文字を赤
背景を赤
ウィズス（幅）200px
ハイト（高さ）200px
CSSファイルを作って保存
表示させる↓
pタグを個別に指定してカラーを変える
個別に色を変えられた
ブロックとオブジェクトのみ
ｐで書いたのにＣＳＳの方が適用されている
■CSSの上書き
一番最後に書き込んだコードが上書きされる
WEB制作において外部ファイルに書いていく。
人が作ったファイルを確実に作り変えたい場合、HTMLファイルに書き込んで作っていく。→外部ファイルで書き込みして反映さえることができる。
セレクタには得点がある。
参考サイト
- Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説
- 【図解たっぷり】Chrome検証ツール入門！コーディングの“崩れる”“直せない”を解決
- 検証ツール（デベロッパーモード）の使い方
右クリックで検証→見本となるサイトのコードを見ることができ、自分で書き換えたりしてみることもできる。→見本サイトを更新したら元に戻る。（実際に書き変えられているわけではない）