ページをデザインする

ホームページ作成5日目:ページをデザインする

メインページ(inde.html)とスイルシート(tyle.c)の作ったら次はデザインを整えていきましょう。ここがホームページ作成の1番重要な部分で、もっとも勉強が必要になるところなのですが、今回は私がホームページ作成していて最もよく使う部分について3つ説明してみたいと思います。

1.色をつける(文字に色をつける、背景色を付ける)

「color:#ffffff;」で色を指定する

HTML

  1. <p> ページの文章をこのように作っていきます。<div class="siro">ここの一部分の色を変更したいと思います。</div> </p>

スイルシート

  • .white{
    color:#ffffff;
    }

文字の色を変更するには「color:#ffffff;」を使って指定していきます。「#ffffff」の部分で色を指定することになります。どんな色があるのかについてはまずカラーリファレンスなどを見るとわかるようになっています。

2.大きさを変える(文字の大きさ)

「font-size: 12px ;」で文字の大きさを指定する

HTML

  1. <p> ページの文章を作っていきます。<div class="12px">ここの文字を12ptで指定したいと思います。</div> </p>

スイルシート

  • .12px{
    font-size: 12px;
    }

3.余白を作る

指定の方法を学ぶ

「div」

「span」

「スイルシート」