ホームページ作成講座

• ■STEP1　　HTMLファイルとCSSファイル
  • ★HTMLファイルの新規作成
  • ★CSSファイルの新規作成
  • ★まずは、このタグを覚えて！（段落と改行）
  • ★HTMLファイルの編集
  • ★背景の色
  • ●サンプル１
• ■STEP2　　見出し
  • ★見出しを付ける
  • ★見出しに色を付ける
  • ★見出しのボックスを大きくする
  • ●サンプル２
• ■STEP3　　文字のスタイルと位置
  • ★文字の色と太さ
  • ★行揃えの位置
  • ★文字の大きさ
  • ★行の高さ
  • ●サンプル３
• ■STEP4　　画像
  • ★画像の貼り付け
  • ★背景の画像
  • ★画像の大きさ
  • ★画像の位置（右寄せ、左寄せ）
  • ★画像の位置（中央寄せ）
  • ★画像の位置（backgroundプロパティ）
  • ★画像に文字を重ねる
  • ★画像に画像を重ねる
  • ★画像の重ねる順番を変える
  • ●サンプル４
• ■STEP5　　リンク
  • ★同じページへのリンク
  • ★違うページへのリンク
  • ★外部サイトへのリンク
  • ★別窓を開いてリンクを表示する
  • ★リンクにツールチップを表示する
  • ★リンク切れを確認する
  • ●サンプル５
• ■STEP6　　CSSのボックスレイアウト
  • ★ボックスを指定しないレイアウトの場合
  • ★幅固定の1ボックスレイアウト
  • ★幅可変の1ボックスレイアウト
  • ★ヘッダーとフッターの3ボックスレイアウト
  • ★幅固定の2カラムのボックスレイアウト
  • ★幅可変の2カラムのボックスレイアウト
  • ★サイドバー幅固定、メイン幅可変の2カラムのボックスレイアウト
  • ★幅固定の3カラムのボックスレイアウト
  • ★両サイド幅固定、メイン幅可変の3カラムのボックスレイアウト
  • ●サンプル６
• ■STEP7　　動画
  • ★<video>タグを用いた動画の埋め込み
  • ★<video>タグを用いた動画が再生できない場合
• ■STEP8　　テーブル（表）
  • ★テーブルの基本
  • ★ヘッダセルとデータセル
  • ★ヘッダ、ボディとフッタ
  • ★テーブルの見出し
  • ★テーブルの表示位置と幅
  • ★セルの表示位置と幅と余白
  • ★セルの結合
• ■STEP9　　リスト（箇条書き）
  • ★リストの基本
  • ★リストの項目のマークを変更する
  • ★リストの項目のマークを画像にする
  • ★リストの項目のマークを付けない
  • ★順序付きリスト
  • ★リストの項目番号のタイプを変更する
• ■STEP10　　メニュー
  • ★メニューの基本
  • ★横並びのメニュー
  • ★色をつける
  • ★マウス操作で色を変える
  • ★下線と点線を消す
  • ★丸みをつける
  • ★幅の調整
  • ★背景に画像を使う
• ■STEP11　　ドロップダウンメニュー
  • ★ドロップダウンメニューの基本
  • ★ドロップダウン機能のない２階層メニュー
  • ★ドロップダウン２階層メニュー
  • ★縦並びドロップダウン２階層メニュー
  • ★縦並び展開型ドロップダウン２階層メニュー
• ■STEP12　　アコーディオンメニュー
  • ★CSSで作るアコーディオンメニューの基本
  • ★CSSで作るアコーディオンメニュー（クリックで展開）
  • ★Java scriptで作るアコーディオンメニュー
  • ★シンプルなコードのアコーディオンメニュー１
  • ★シンプルなコードのアコーディオンメニュー２
• ■STEP13　　レスポンシブデザイン
  • ★モバイルフレンドリー
  • ★2カラムのボックスのレスポンシブデザイン
  • ★ビューポートの設定

▼STEP1へ