読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

CSSからWebデザインを習得

CSSとは

  • テキストP.64〜
  • CSSCascading Style Sheets)HTML文書に装飾・レイアウトをほどこすための言語
  • タグまたはタグに付与した名前をもとに、そこに適切な値を設定しブラウザーがその値をもとに表示できるようにする言語

勉強のステップ

  1. Webサイトを見る
  2. デフォルトCSSが適用されたページを見る
  3. HTMLのソースコードを見る
  4. CSSソースコードを見る
ギャラリーサイトの活用
  1. ギャラリーサイトを閲覧する
  2. 気になったサイトを分類しながらブックマークする
  3. ブックマークを管理する

HTMLのソースコードを見る
  1. ブラウザのソース表示を実行する
  2. ページの文書構造を確認する
  3. ページの情報を確認する
ブラウザのデフォルトCSSが適用されたページを見る
  1. 標準スタイルシートを無効にする(Pendule - Chrome拡張機能を利用する)
  2. どのような順序で表示されているか確認する

Pendule - Chrome拡張機能

f:id:web-css-design:20160821175647p:plain

WebデザイナーCSSが適用されたページを見る
  1. ウィンドウサイズを変更してみる
  2. テキストズームで文字サイズを変更してみる
  3. ページズームでページ全体を変更してみる
WebデザイナーCSSソースコードを見る
  1. すべてのCSSを表示する
  2. スタイル情報を表示する
  3. ブラウザのデフォルトCSSを無効にしてみる