ステップごとに覚えよう!

ステップ1
まずはここ。ホームページとは何か?~SEOの意味について解説。


ステップ2
ホームページを作る上での準備について解説。


ステップ3
htmlとは?書き方や確認の仕方について解説。


ホームページ作成 初心者 スタイルシートを使ってデザインする

前回、お話した通り、参考ホームページにスタイルシートを追加しました。
htmlタグなどは殆んどいじらずスタイルシート(CSS)で装飾をしています。イメージ・デザインがけっこう変わっているので御覧ください。

まず、当サイトの案内にありますステップ毎に作成したホームページが下記のページとなります。

ホームページ作成 初心者 テストウェブサイト

 ホームページ作成 初心者 テストウェブサイト(イメージ画像)
ステップ毎のホームページ作成

 

スタイルシート適用後

下記がスタイルシートを使ってホームページを編集したページになります。

ホームページ作成 初心者 テストウェブサイト(スタイルシート適用後)

 ホームページ作成 初心者 テストウェブサイト(スタイルシート適用後/イメージ画像)
スタイルシート適用後 ホームページ

 スタイルシートを使用前と使用後を比較すると、けっこう変わっているのがわかるかと思います。(文字の大きさや色はもちろんのこと、細かく見ると本文の間隔なども見やすくなるように調節しています)

追加したスタイルシート

既存のhtmlファイルに以下のスタイルシートを追加しています。
(※htmlタグもほんの少し編集あり/ソースをご確認下さい)

<head>
<style type="text/css">
a{color:#000000;}
a:hover{color:#565656;text-decoration:none;}
body{background-color:#fafee6;margin:0;padding:0;}
#wrapper{width:850px;margin:0 auto;color:#363636;background-color:#ffffff;padding:0 10px; 0 10px;}
h1{font-size:19px;color:#1f8a60;margin:0 0 10px 0;padding:10px 0 0 0;}
h2{font-size:16px;font-weight:bold;padding:0 0 3px 0;border-bottom:1px solid #565656;margin:20px 0 0 0;clear:both;}
p.navi{background-color:#f2f2f2;padding:10px;font-size:15px;}
p{font-size:14px;line-height:20px;padding:10px 0 20px 0;margin:0;}
p img{float:right;margin:5px;}
</style>
</head>

ここではスタイルシートの事は細かく説明しておりません。当サイト「ホームページの作り方 初心者チャレンジ」を身に付けて頂いた後のステップアップとして、こういった表現ができるということでご紹介しております。ホームページ作成の魅力を感じて頂ければ幸いです。

スタイルシートで表現方法が広がる

スタイルシート(CSS)は、ホームページをデザインする装飾するといった技術として用いられます。画像だけがデザインではありません。
これらを身に付けると、ホームページのレイアウトを変更したり、文字色を簡単に変えれたり、背景色をつけたりと色々な事が可能です。

これからホームページ作りに興味がある方は、基礎知識を身に付けた後の次のステップアップとして参考までにして頂ければ思います。

 参考サイトのhtmlソース(タグ)は数ヶ所変更したのみで、殆んど変えておりません。もちろんケースバイケースですが、スタイルシートを取り入れるだけで、htmlタグを変えずにデザインができるところも魅力的ですね。