下記の見本が今回Dreamweaverで作成したスタイルシートになります。コピーはせずにあくまでも参考にして、Dreamweaverで入力をして作ってみてください。。又今回はレイアウトやナビゲーションの設置を基本に作成してありますので、文字に対する装飾はほとんどしてありません。文字に対する入力もDreamweaverの画面上で自分なりに試してみるのも勉強になると思います。
@charset "utf-8"; body { font-size: 90%; line-height: 1.5; padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } h1, h2, h3, h4, p, ul, li, dl, dt, dd { margin: 0px; padding: 0px; } ul { list-style-type: none; } img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } a { color: #00f; text-decoration: none; } a:hover { color: #666; text-decoration: underline; } hr { display: none; } /*全体 ----------------------------------------------*/ #wrapper { padding: 0px; width: 800px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; border: 1px solid #CCC; } /*ヘッダー ----------------------------------------------*/ #header { background-repeat: no-repeat; height: 250px; width: 800px; background-image: url(images/topmihon.jpg); } #header ul { position: absolute; width: 800px; top: 200px; } #header ul li { float: left; } #header ul li a { height: 50px; width: 158px; line-height: 50px; display: block; background-color: #999; border: 1px solid #CCC; text-align: center; color: #FFF; } #header ul li a:hover { color: #333; background-color: #CCC; } /*サイドバー ----------------------------------------------*/ #sidebar { float: left; width: 250px; padding: 10px; background-color: #F3F3F3; } /*メイン ----------------------------------------------*/ #main { padding: 10px; float: left; width: 490px; margin-left: 20px; } /*フッター ----------------------------------------------*/ #footer { clear: both; background-color: #CCC; padding: 10px; } #footer p { text-align: right; } #footer ul li { float: left; padding-left: 10px; } #footer address { clear: both; }
以上がDreamweaverでホームページを作るときに操作の基本になります。後は、各タグの意味などを理解していけば簡単に操作はできスタイルシートのタグを手入力する手間も省けてとても便利です。また上記のスタイルシートは丸ごとコピーしないでDreamweaverの操作で入力してくださいね
最終更新日: 2013年3月13日