2018.06.24

23. 簡単なホームページを作ってみよう!

目次

ホームページを作ってみよう

ここまで勉強した知識でホームページが作れるので、簡単なものですが、1から作ってみましょう。

リセットCSSを導入しよう

現在使われているブラウザはさまざまですが、それぞれのブラウザ独自のスタイルシートにより要素にあらかじめ余白が設定されていることがあり、これが原因で、同じサイトでもブラウザ間での表示が異なって見えることがあります。また、余計な余白が設定されていることにより、思った通りのコーディングができないこともあります。

これを解決するのがリセットCSSと言われるもので、さまざまな種類がありますが、ここではYUI Libraryが提供しているリセットCSSを使っていきたいと思います。

使い方は簡単で、下のコードをhtmlファイルのheadタグの中にコピペするだけです。

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">

注意する点としては、リセットCSSのlinkタグはスタイルシートのlinkタグよりも上に書くようにしましょう。cssファイルを複数読み込む場合、下に書いたファイルが優先されてしまうからです。

header、div、footerタグでまとまりを作る

divタグは一定のまとまりを作ってスタイルを当てるために使うタグですが、headerやfooterを作るときには、div(id=”header”)とするよりもheaderタグやfooterタグを使うほうが一般的なので、そちらを使いましょう。

上の例では、header、footer、3つのdivにそれぞれheightとbackground-colorを指定してみました。

↓実際にブラウザで見てみると、上から順に、横いっぱいに色がついていることが分かります。


containerを作る

ただし、このまま要素を入力しても画面の左上から表示されてしまいます。今回は、一般的によく使われる、containerクラスを作って要素を中央寄りに表示していく方法について説明していきます。

まずは3つのdivの下に新しいdivを作り、それにクラスを指定します(クラス名は分かりやすければ何でもOKです)。あとはそのクラスにwidthを指定してmargin: 0 auto;で中央に寄せるだけです。

これで、要素をcontainerクラスの中に書けば、幅1000pxの箱の中に表示されるようになりました。

↓試しにh2タグで見出しを作って、containerクラスに背景色を指定してみました。幅1000pxの水色の箱があり、ちゃんとその中に要素が入っているのが分かります。



まとめ

ここまでできれば、これまでの記事も参考にしながら、基本的なホームページは作れるかと思います。

HTML&CSSを一通り学んだら、どんなしょぼいホームページでもいいので、とにかく1から作ってみましょう!もし「こんなホームページが作りたい!」とかのアイディアがないなら、簡単そうなサイトを模写してみるのもいいと思います。

ここまでで書かなかった予備知識的なものは、新たにTipsという形で書いてますので、ぜひ参考にしてみてください。

HTML & CSS Tips

home

scroll