学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
ウェブフォントについて

2限目
学科 HTML基礎⑤
疑似クラスについて

3限目
学科 HTML基礎⑤
背景画像について

4限目
学科 HTML基礎⑤
floatプロパティでナビを作ろう(clearfix)

5限目
学科 HTML基礎⑤
本日のまとめ

本日のテーマ

CSSで見た目を変えましょう。

【復習】これまでのHTMLタグ(body内)

h1~ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・background-color・font-size・width・margin・paddding ・display・float・clear ・content
【疑似要素】 :before・ :after

便利ツール

HTMLの記述をチェックしてみよう
 Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
 CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
 HTML5リファレンス
色の名前とカラーコードです
 HTMLカラーコード: WEB色見本 原色大辞典
画像圧縮ツール
 TinyJPG

ウェブフォント

ウェブフォントはウェブサーバ上に置かれたフォントデータを利用する仕組みなので、ユーザの閲覧環境に左右されません。
Googleが提供する無料のウェブフォントサービス「Google Fonts」を利用してみましょう。 (授業用PCのIllustrrator, Photoshopへのインストールはご遠慮ください。)

疑似クラス

対象の要素の状態や条件について、スタイルを指定するものです。
リンクテキストにポインターが乗ったら、テキストをの色を変える(:hover)等が有名です。

学科 HTML基礎④

-本日のアジェンダ-

1限目
学科 HTML基礎④
ブロック要素とインラインブロック要素

2限目
学科 HTML基礎④
floatプロパティでナビを作ろう(float)

3限目
学科 HTML基礎④
floatプロパティでナビを作ろう (clearfix)

4限目
学科 HTML基礎④
floatプロパティでナビを作ろう(clearfix)

5限目
学科 HTML基礎④
本日のまとめ

本日のテーマ

CSSで見た目を変えましょう。

【復習】これまでのHTMLタグ(body内)

h1~ h6・ p ・ a ・img・ul( li)・ol( li)・ dl(dt・dd)・table(th・tr・td)
div ←ジョーカー
header・nav・main・section・footer

【復習】これまでのCSSプロパティ

color・background-color・font-size・width・margin

便利ツール

HTMLの記述をチェックしてみよう
 Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
 CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
 HTML5リファレンス
色の名前とカラーコードです
 HTMLカラーコード: WEB色見本 原色大辞典


CSSのwidth(幅)について

width(幅)の%指定をしましょう。
CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう


ブロック要素について

要素が、縦積みで表示されるものだけでしょうか。
本日は、これまでに出たタグで検証してみましょう。
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?


疑似要素について

clearfixの中で、疑似要素の果たす役割を理解しましょう。
CSSの疑似要素とは?beforeとafterの使い方まとめ。


画像圧縮ツールのご紹介

ブラウザにドラッグ&ドロップするだけで、JPGやPNGファイルを圧縮するWEBツール、それが「TinyPNG」です。
TinyJPG