-本日のアジェンダ-
1限目
学科 CSS基礎①
widthとheight
2限目
学科 CSS基礎①
widthとheight
3限目
学科 CSS基礎①
リセットCSSについて
4限目
学科 CSS基礎①
仕様まとめ
5限目
学科 CSS基礎①
仕様まとめ
本日のテーマ
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・font-size・width・margin・paddding ・display・float・clear ・content・text-align・ list-style・font-family・text-decoration・border・background・box-shadow
【疑似要素】 :before・ :after
【疑似クラス】 :hover
便利ツール
HTMLの記述をチェックしてみよう
Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
HTML5リファレンス
色の名前とカラーコードです
HTMLカラーコード: WEB色見本 原色大辞典
ウェブフォント
Google Fonts
画像圧縮ツール
TinyJPG
CSSのwidth(幅)について
width(幅)の%指定をしましょう。
CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう
幅・高さの前提としてブロック要素であることだが、imgタグは除外。
【CSS】displayの使い方を総まとめ!inlineやblockの違いは?
ボックスの種類の指定のプロパティ(display)
練習用素材
box-sizing
「要素からpaddingの部分がはみ出てしまう」「線がはみ出てしまう」というような問題をbox-sizingプロパティにより簡単に解決する方法
【CSS】box-sizing:border-boxの使い方
リセットCSS
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。