こちらの記事は静的サイトを作成する上で、まずはHTMLのマークアップ方法をわかりやすく解説している記事になります。
「とりあえず出来ることは分かったけどじゃあどうやってサイトとして作成するの？」
「模写するといいみたいだけどどうすればいい？」
などの疑問が解決できる記事になっております。
※CSSはまた後日の記事に書きます。
まずは目標とするデザインを決める
まずは何事もここからです。
見本サイトを真似して作るのか、自分で紙などに作りたいサイトの配置を大まかに決めて作成するのかなどはお任せ致しますが、まずは見本サイトを真似することをお勧めします。
模写に最適な見本サイトを私の方でも例として載せておきますので、参考にしてください。
模写する際にこの時の私が気になったことは「画像をどうするか」です。
右クリックで画像は保存できるのですが、背景として使用されている画像は右クリックではダウンロードできません。
保存する方法もあるのですが、正直手間ですしそこに頭のリソースを使って欲しくないので他の代替え画像などで大丈夫です。
「フリー 背景画像」
などで検索すれば出てきますのでその背景画像を使用してください。
尚、縦に長いページなどは全て真似しようとせずに例えばページの半分だけとかからまずは始めてください。
最初から思い通りに配置することは恐らく無理だと思いますので心が折れない程度にしましょう！
HTMLの作成
ここからはHTMLファイルの作成に入ります。
ちなみに私が使っているテキストエディタはVisual Studio Codeというものでフリーで使えます。
以前の記事で書きましたがドットインストールで勉強すれば一番最初にダウンロードし、使用しているかと思いますので設定や使い方などに関しては割愛します。
ダウンロードしていない方はそちらを前提に記事を書いていきますので、よろしければこちらのテキストエディタを使ってみてください。
まずは見本サイトの画像は<img>タグで、テキスト内容は<p>タグ、<ul>タグ、<div>タグなどで囲み
縦に全ての必要な要素を書いていきましょう。
そしたらHTMLファイルをGoogle Chromeなどのブラウザにドラッグ&ドロップすると恐らくこのような感じになるはずです。
何も考えずとりあえず上から順に表示したいものを縦に並べてください！
HTMLのマークアップ
サイトを作成する上で必ず必要なボックスイメージを説明します。
上から順に必要な要素と言われてどのように並べたでしょうか？
例えば以下の図のような場合A〜Iまで順番に並べませんでしたか？
もしA〜Iの順番で並べられていれば正解です。
順番としては左から右へ、次に下へいきまた左から右へという順番です。
そしたら次に<div>タグで縦に並んでいる要素を囲っていくのですが、この<div>タグの用途が最初にわからなくなるところではないでしょうか？私がそうでした^^;
<div>というのは色々また使えるのですが、用途としてはボックスを作っていく為に使います。
通常要素はただ書いただけだと縦に並んで行きますよね？
これはデフォルトで「display: block;」となっており、つまりは縦にしか並んでいかない状態です。
では横に並べたいときはどうするか。
後の記事で説明しますがCSSで使用する「display: flex;」を使うのですが今のままでは全て横一列に並びます。
そこで見えないボックスを作っていく訳です。
このような感じです。
これが<div>タグの主な使用用途です。
<div>で囲われている部分を横並びにすると、<div>の中身全てが一つの要素という扱いになり、そこからまた縦並びになるので任意の場所で横並びと縦並びを使い分けられる訳です。
画像の横に文字を持ってきたい場合も同じ要領です。
まとめ
いかがでしたでしょうか？まずはHTMLをしっかりと理解した上でCSSを記述しないと完成直後にごちゃごちゃになって、直したいけどどこをどうすればいいのかわからない！
という風になってしまいます。
なのでマークアップ段階でしっかりと頭でイメージしながら進めていきましょう。
次回はここからCSSの記述方法について分かりやすく解説していきますので是非ご覧ください。
