HTML・CSSでWebサイトを作りました

こんにちは、Nanayakuです。

今回は、HTTML・CSSでWebサイトを製作することについて解説していきます。

制作物

tech boostのカリキュラムにそって、画像のようなWebサイト（viewの部分）を作りました。

GitHub：https://github.com/sabakan789/tech_boost

その後、応用として↓の画像のWebサイトを制作しました。

GitHub：https://github.com/sabakan789/tech_boost

制作工程

私がWebサイト（応用課題）を制作した工程を解説していきます。

構図の作成

ざっくりとしたサイトの構図を、↓の画像のように手書きで書きました。

右がサイト全体の構造で、左が各要素の細かい配置です。

この設計図を書く時に、各要素のクラス名を決めておきます。

headの設定

ヘッダー（見えない部分）の設定を書いていきます。

まずは、css・img・htmlファイルを画像のように作ります。

cssファイルを読み込ませるため、linkタグにURLを書きます。

画像のようにファイルの配置にしていた場合、hrefのURLの最初に/を入れたら読み込まれません。

<link rel="stylesheet" href="/CSS/style.css">・・・×

<link rel="stylesheet" href="CSS/style.css">・・・○

エディターのショートカットで「/」が書かれた状態で出るので、注意が必要です。

違う階層にある場合は「/」が必要で、この書き方を相対パスと言い、詳しい書き方は「webliker」の相対パスの使い方で解説しています。

また、ディレクトリ名が大文字か小文字かちゃんと区別して書きましょう。

bodyのHTMLコードを書く

HTMLに見出し・画像・文章など全て書きます。

その後設計図で振り分けたclass名を、それぞれの要素に付けていきます。

CSSのコードを書く

最初に、全体の背景の色やfontの大きさなどをbodyのcssに書いておき、次にheader・main・footerのCSSを書きます。

CSSは大枠となる要素から書いていくと調整等しやすいです。

左側の記事のリストで例えると、

1. containerと大枠を作る
2. listと各記事ごとの枠を作る
3. imgのレイアウトを「float:left;」にして、imgの右隣に文章が来るようにする
4. img・各文章の大きさ、領域を調整する

この作業を、header・その他main・footerで行います。

簡単なWebサイトの作り方はドットインストールでも解説しているので、ぜひ参考にしてみて下さい。

ドットインストール ：実践！ウェブサイトを作ろう

おすすめ書籍

おすすめ書籍とありますが、買うことは推奨しません。

基本的にネットを調べれば、HTML・CSSのことは、ほぼ全て載っています。

自分もtech boostの課題をやる時も、この本を4ページくらいしか（確認で）読んでいません。

どんなタグ・セレクタがあるか（一通り）本で読んでみたい人以外は、買わないほうがいいです。（お金の無駄になります）

基本分からなくなったら、ググるでいいと思います。

最後に

備忘録がわりに作ったので、間違っている所とかあったら、コメントくれると嬉しいです。