プログラミング

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で行います。

レイアウトを変更する「float:〇〇;」は、その後の要素にも影響を与えるので、必ず擬似要素の「::after 」などでfloatを解除(clear: both;)するようにしましょう。

 

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

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

 

おすすめ書籍

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

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

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

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

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

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

よくわかるHTML5+CSS3の教科書【第3版】 [ 大藤幹 ]
価格:3024円(税込、送料無料) (2019/6/24時点)

楽天で購入

 

 

最後に

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

-プログラミング
-

Copyright© Nanayaku blog , 2019 All Rights Reserved Powered by AFFINGER5.