学科 CSS基礎①

-本日のアジェンダ-

1限目
学科 CSS基礎①
「セレクタ」 「プロパティ」「値」

2限目
学科 CSS基礎①
CSSの記述【文字】

3限目
学科 CSS基礎①
idとclassについて

4限目
学科 CSS基礎①
CSSの点数計算

5限目
学科 CSS基礎①
本日のまとめ

本日のテーマ

ここからデベロッパーツールが便利です!

CSSとは?

Cascading Style Sheets(CSS)
カスケーディング・スタイル・シート
拡張子は「.css」

Cascading Style Sheetsとは、HTML や XML の要素をどのように修飾するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 ウィキペディア

参考サイト

CSSの記述について

セレクタ{
プロパティ:値;
}

参考サイト

「 命名規則 」について

命名規則とは、プログラミングを行う際にソースコード上の識別子の名称となる文字列を決定するためのルールを定めたもの。ネーミング規則、ネーミング規約、あるいは命名規約とも呼ぶ。 通常は、ソースコードの可読性や視認性の向上、プログラミング効率およびメンテナンス性の改善などを目的としている。

参考サイト

学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
htmlの記述【body】

2限目
学科 HTML基礎⑤
より細かな内容の記述について

3限目
学科 HTML基礎⑤
CSSでデザインする為のHTML記述について

4限目
学科 HTML基礎⑤
CSSでデザインする為のHTML記述について

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

本日のテーマ

デザインする為のHTML記述

bodyの中のタグ基本その1
(テキスト、画像をマークアップ)

  • h1~h6
  • p
  • hr
  • ul li
  • ol li
  • dl dt dd
  • table caption tr th td

bodyの中のタグ基本その2
(その1の中にリンク、画像、改行、埋め込みのタグ)

  • img
  • a
  • br
  • iframe

bodyの中のタグ基本その3
(更に意味を持たせるブロック「block」のタグ)

  • section
  • nav
  • header
  • footer
  • main

bodyの中のタグ基本その4
(更に意味を持たせるインライン「inline」のタグ)

  • em
  • strong
  • i
  • b
  • small

bodyの中のタグ基本その5
(デザインの為に使うタグ)

  • div
  • span

同じ種類タグを差別化する為に使う属性

  • id=””
  • class=””

それ以外に様々な種類のタグもありますが
まずはこれらをしっかり覚えておきましょう。

参考サイト