-本日のアジェンダ-
1限目
学科 CSS基礎①
文書構造を伝える新しいタグ
2限目
学科 CSS基礎①
IDセレクタとCLASSセレクタ
3限目
学科 CSS基礎①
リセットCSSについて
4限目
学科 CSS基礎①
positionプロパティ
5限目
学科 CSS基礎①
仕様まとめ
本日のテーマ
HTML／CSSの仕様理解を深めましょう
便利ツール
HTMLの記述をチェックしてみよう
Gateway – Another HTML Lint
CSSの記述をチェックしてみよう
CSS Validation Service
タグの意味等が思い出せない場合はこちらで調べてみよう
HTML5リファレンス
色の名前とカラーコードです
HTMLカラーコード: WEB色見本 原色大辞典
ウェブフォント
Google Fonts
画像圧縮ツール
TinyJPG
文書構造を伝える新しいタグ
以前では意味をブラウザに伝えることができなかったタグが、HTML5から新しく意味を持ったタグとして登場し、構造などが理解しやすくなりました。
リセットCSS
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。
文字のサイズ
まずは何も書いていないHTMLファイルに、フォントサイズを指定しないでテキストを配置してみてください。そこに表示されたのがブラウザのデフォルトの設定です。ほとんどのブラウザでは、htmlとbodyタグのフォントサイズは100%で表示されます。
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
box-sizing
「要素からpaddingの部分がはみ出てしまう」「線がはみ出てしまう」というような問題をbox-sizingプロパティにより簡単に解決する方法
【CSS】box-sizing:border-boxの使い方
CSSのwidth（幅）について
width(幅)の％指定をしましょう。
CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう
幅・高さの前提としてブロック要素であることだが、imgタグは除外。
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
ボックスの種類の指定のプロパティ（display）