CSS（カスケードスタイルシート）の作成手順を動画で説明しているページです。理解しづらいCSSを簡単、丁寧に説明している動画です。 CSSをホームページビルダーで作成する方法をSTEP１から順番に説明しています。この説明にしたがって作ってみました。Microsoft Expression Webでも同様のことが出来ます。各要素の指定が英語になっているのでちょっと戸惑うかもしれない。作成にはホームページビルダーが便利ですが、後で調整・変更する場合はMicrosoft Expression Webの方がより詳細な設定ができように思います。

STEP-1　CSSファイルを作成してリンクする STEP-2　区画割りをする STEP-3　BOXモデルで本文を作成する STEP-4　navigationを作る STEP-5　classを使う

ホームページビルダーで完全CSSページ作成★25分速習―１ http://www.youtube.com/watch?v=ZCsBo3OJphU ホームページビルダーで完全CSSページ作成★25分速習―2 http://www.youtube.com/watch?v=TVgIjlkVzcU ホームページビルダーで完全CSSページ作成★25分速習―３ http://www.youtube.com/watch?v=sO2bCbWASMI

作成例１　CSSファイルを作成してリンクする　区画割りをする

作成例２　CSSファイルを作成してリンクする　区画割りをする

作成例３　BOXモデルで本文を作成する

作成例４　navigationを作る　classを使う

作成例５　navigationを作る　classを使う

作成例６　navigationを作る　classを使う

作成例７　完成版

ホームページビルダー Ver15を使用しているところ

Microsoft Expression Web Ver4.0を使用しているところ

ホームページビルダーについているテンプレートを使って、各div部分に色をつけてみた。色をつけると各divが鮮明に判って、ページのイメージがよく分かる。最終的には色は削除又は別の色にすることになる。  （ホームページビルダーで見たところ）

Microsoft Expression Web Ver4.0で見たところ

KompoZerで見たところ KompoZer - Downloadsで日本語をダウンロードしてくる http://www.kompozer.net/download.php KompoZer用無料テンプレート ホームページを自分で作る http://www.1cm100m.com/templates/kompozer/t/

戻る