皆さんこんばんにちは、ユウです。
今回はHTMLを書いていく際に、必要となるWebページ全体の区切り方について紹介していきたいと思います。
HTMLの基本的な書き方は以前紹介しているので、全体的にHTMLを知りたいという方はそちらから見た方が良いかと思います。
https://cupuasu.club/html-basic-writing/
区切り方、と聞いてよく分からないと思うかもしれませんね。
Webページを書いていく際は、<body>タグの中の各要素にクラスやidという名前をつけ、各項目ごとに管理しやすくしていきます。
今回はその方法について紹介していこうと思いますので、最後までお付き合い下さい。
この方法を知っているのと、知らないとでは明らかな差が出てしまうので、まだ良く理解できていないという方はぜひ読んでほしいです。
今回の記事を読むメリット
・Web制作の練習方法がわかる
・Webページの区切り方がわかる
どうやってWeb制作を練習しよう？？
Progateなどで一通り、HTML&CSSなどを練習し終えるとそのあとの練習方法がわからない、ということが起こります。
今回は3つのステップで練習方法を解説していきます。
- Webページ全体をイメージする
- Web構造を見やすくする
- Web制作の練習方法
Webページ全体をイメージする
まず、Webページを作る際、一番最初に行うことはWebページ全体を各項目ごとで区切っていくことです。
どういう意味かというとは下の画像を見ていただくと分かります。
これはYahoo!JAPAN（https://www.yahoo.co.jp/）さんの検索画面の画像です。
色線で区切っているのが分かるかと思います。
Webページを制作する際には、この色線で区切ったように、コードでも実際に書いていくようになります。
コードの内容を書いていくと、このようになります。
body タグの中に区切った要素を入れていく感じです。
箱の中に箱を作っていくイメージですね。
区切った中にどんどんと、そこに関しての情報を記述していきます。
最初のうちに練習するのは、Yahoo!JAPANさんのような複雑な記事ではなく、LP（ランニングページ）といわれる、企業紹介や商品紹介をしているページがおすすめです。
LPで私がおすすめするのは『iSara（https://isara.life/）さん』のページです。
最初の内は早いかもしれませんが、大体の知識と技術が上がってきたときに模写（コードを見ずにページの外観をまねしていく）に挑戦してみて、完璧にできたら十分な力がついているので、ぜひ力がついたと感じた時に挑戦してみて下さい。
模写する際には最初の内はページ全体を印刷なりして、実際にペンで各項目ごとを区切っていくのがおすすめです。
Webページの構造を見やすくする
これで body の中身は区切っていくということが分かったかと思います。
それでは、body を区切ったあとは、どうしていくのかという説明をしていきたいと思います。
下の画像を見て下さい。
これは私が以前に作ったものです。
これは body から Works と言う名前を与えて、区切ったものの中身となります。
勘がいい人は分かっているかもしれませんが、この区切った中身も区切っていきます。
区切るとこんな感じです。
コードを書いていくとこんな風になります。
今回はわかりやすくするために簡潔に書いていますが、本来はもっとクラス名などを足しています。
このように囲んでいくことでCSS等も適用させやすくなっていきます。
画像の container 部分を見てもらえたら分かるように、また区切った後の中身でも区切っているのが分かるかと思います。
この構造はマトリョーシカのような感じですね。
Worksに対して h2 と container は子要素
h2 と container に対して Works は親要素
と言うようにこの構造によって親子関係が生まれてきます。
HTMLはこの親子関係によって構成されていくので、誰がどのような位置に存在しているのかを理解しながら作っていくことが大切なこととなってきます。
このように中身を書いていくことによって、Webページを作っていきます。
Web制作の練習方法
この構造を自分で想像して、自分で実際に書いていくというのはかなり練習が必要になっていきます。
はじめの内はなれないかもしれませんが、練習していくことによって理解が深まる内容なので、ぜひどんどん練習していって下さい。
Web制作の練習で、注意することは
・サイトを印刷などしてペンで実際に囲んでいったりする
・一つのサイトだけではなく様々なサイトを見る
・最初の内はLPだけ見る
・おしゃれすぎるWebページはおすすめしない
おしゃれすぎるのを見てしまっては、意味が分からなくなってしまい、やる気が削がれてしまいます。
自分で探すときは、いったんWebページ全体をみて、少しでもいけるんじゃないかな？と感じたものを選んで下さい。
そうすると、力がどんどんとついていくのでおすすめです。
Web制作の練習方法まとめ
・Web制作の練習はまず区切り方をイメージすること
・区切った後に構想をイメージすること
・実際のサイトを模写して、Web制作を練習しよう！
最後に
今回はWebページを区切っていく方法について触れていきました。
実際に書いていく際には本当に必要な力となっていくので、ぜひ練習してみてはいかがでしょうか。
私が紹介した練習方法以外にもネットでは様々なことが上げられているかと思います。
もし、そっちの方が自分には合ってるかもな～と感じた場合はもちろんそちらをしてほしいです。
Web制作技術を上げていき、Web制作を楽しんでいきましょう！
今回はこれで以上になります。
最後まで読んでいただきありがとうございます。
