Section1:WEBサイトのしくみ
  • はじめに 準備と基礎知識
  • サイトとウエブサーバー
  • html文書の編集方法
  • CSSについて
  • CSSの中身
  • htmlとcssの関係
htmlとCSSの基礎知識
  • エディターの準備
  • htmlとCSSの実際
  • タグの書き方(1)
  • タグの書き方(2)
  • CSSの説明
  • CSSをhtmlに適用する
Test_Siteの制作
  • HTMLの構造
  • head要素
  • body要素
トップページの制作
  • index.htmlの構造
  • bodyの設定
  • containerの配置
  • containerのCSS設定
  • containerの中央配置
  • class(クラス)とid
コンテンツの制作
  • bodyの仕上げ(1)
  • bodyの仕上げ(2)
  • フォントの設定
  • header, main, footerの配置
  • header, main, footerのCSS設定
  • headerの仕上げ
  • Logo_areaのCSS設定
  • Logo_areaの仕上げ
  • Logo_areaのリンク設定
  • バナー画像の配置
  • Global_Naviの設定(1)
  • Global_Naviの設定(2)
  • Global_Naviの設定(3)
  • Global_Naviの設定(4)
  • パスの指定方法
Side_naviの制作
  • 画像と要素の配置
  • Side_navi, Main_box, Banner_boxのCSS設定
  • なぜ横一列に配置されない?
  • Side_navi ul, liの配置
  • Side_navi ul, liのCSS
  • ロールオーバーのhtml設定
  • ロールオーバーのCSS設定
  • トップ以外のボタンのhtml設定
  • トップ以外のボタンのCSS設定
  • スキマはどこから?
Main_boxの制作
  • 内容の検討
  • テキストの挿入
  • テキストのマークアップ
  • MainBox_itemのCSS設定
  • MainBox_itemの仕上げ
  • 新着情報の設定(1)
  • 新着情報の設定(2)
  • 新着情報の設定(3)
  • Banner_boxの制作
  • footerの制作
corporate.htmlの制作
  • ページの概要
  • MainBox_subの配置とCSS設定
  • Subpage_Titleの設定
  • Corporate_titleの設定
  • tableの設定(1)
  • tableの設定(2)
  • tableの設定(3)
  • Side_naviの設定
modelhouse.htmlの制作
  • ページの概要
  • ページの準備
  • MainBox_itemの設定
  • Item_titleの設定
  • Item_box, Item_textの設定
  • Side_naviの設定
お問合せformページの制作
  • ページの準備
  • ページ内容の検討
  • ワーヤーフレームの検討
  • p要素の設定
  • CSS3でグラデーションを設定
  • labelとinput要素の配置
  • input要素のCSS設定
  • CSS3によるシャドウの設定
  • メールアドレス入力部品の設定
  • 郵便番号入力部品の設定
  • ラジオボタンの設定
  • チェックボックスの設定
  • プルダウンメニューの設定
  • 送信とリセットボタンの設定
  • リンク先urlの設定