第4回目：実際にマークアップしてみよう
こんにちは！たくぞー（Instagram：takuzo0405）です。
今日はHTML講座の第4回目、基本的なタグを用いてマークアップを実践していきましょう。
第1回目～3回目の講座を見ていない方はこちらからご覧ください。
環境の準備
前回の講座で、3つのブラウザを用意していましたが、今回はChromeのブラウザのみで進めていきます。左側にVSコード、右側にChromeを並べて進めていきましょう。
今回は、ブログやホームページでよくある形のHTMLにマークアップしていきます。
ただし、先にお伝えしておきますと、僕の方で書いていくHTMLが絶対に正しいということではありません。人によって書き方は色々あると思います。
SEOやマークアップの仕方に関して正しく書いていくつもりですが、もし「ここはこうなのでは？」というようなところがありましたら教えていただけますと幸いです。
それではさっそく始めていきたいと思います。
大枠部分のマークアップ
Webサイトには必ずと言っていいほど大枠部分となるheader、main、footerが存在します。まずはそれらのタグを書いていきましょう。
headerタグにはよくWebサイトのトップページに戻るためのリングが付いているロゴ画像とナビゲーションリンクが配置されていますね。
mainタグにはWebサイトのコンテンツ、ブログ記事の内容だったりが書かれます。
footerタグにはコピーライトだったり、特商法や利用規約のリンク、あとはページトップへ戻るボタンなんかが書かれることが多いと思います。
headerタグ内のマークアップ
headerタグにはまずサイトのタイトルなんかが書かれますね。h1タグを使ってタイトルを書いていきます。
続いてロゴ画像をimgタグで表示していきます。src属性とalt属性もいっしょに表示されますので、src属性にパスを指定してここに画像を表示させていきます。
今回はロゴ画像はありませんので、いったんこの状態でブラウザで確認してみましょう。
はい、このように表示されました。検証ツールで確認してみると、imgタグも確かにh1タグの上に空白として存在しています。
あとは関連する別ページに移動するためのナビゲーションもheaderに表示されることがあります。ナビゲーションに関してはnavタグと、ul・liタグと呼ばれるリストタグを使用してマークアップすることが一般的です。
このように書いていきましょう。
はい、無事ナビゲーションリンクが用意できました。今回はダミーリンクなので、href属性には”#”と入れておきましょう。
エメットを覚えるとコードを書くスピードも上がりますし気持ちも良いので、積極的に覚えていきましょう！
mainタグ内のマークアップ
続いて、mainタグ内のマークアップをしていきましょう。
mainタグにはホームページ、あるいはブログの主要なコンテンツなどを表示させていきます。なので、ユーザーにとっても一番の目的となる部分がここに書かれていることになります。
そして、ブログにはよくarticleタグというものが使用されます。
article：記事コンテンツ要素
HTMLのarticle要素は文書、ページ、アプリケーション、サイトなどの中で自己完結しており、 (集合したものの中で) 個別に配信や再利用を行うことを意図した構成物を表します。例えば、フォーラムの投稿、雑誌や新聞の記事、ブログの記事、商品カード、ユーザーが投稿したコメント、対話型のウィジェットやガジェット、その他の独立したコンテンツの項目が含まれます。
引用：MDNリファレンスより
もっと噛み砕いて言うと、article要素は、その範囲がセクションの中で独立しており、それだけで完結していることを示す要素です。
実際に書いてみると分かりやすいので、このように書いていきましょう。
内容は、この第4回HTML講座に合わせて書いてみます。
このようにマークアップができたら、ひとつずつ見ていきましょう。
まず全体のタイトル(h1)が第4回HTML講座となります。
そして、article要素の中にはこのh1の内容として独立していて、かつ完結している内容というのがh2タグで囲んでいるサブタイトル達になります。
ダミーテキストとして使えるコードをご紹介！
ここでひとつ、プチスキルをご紹介します。
先ほど、articleの中のpタグを”内容”というテキストを入れましたが、こういったダミーテキストを入れておきたい場合に活用できるコードが存在します。それは“Lorem”というものです。
lorem+Tabキーでダミーテキストを入力することができます。
アイキャッチ画像に使える画像サイトもご紹介
ブログにはユーザーの目を惹くためのアイキャッチ画像が存在します。アイキャッチ画像自体はimgタグで出力すればいいだけなのですが、せっかくなので便利な画像サイトをご紹介したいと思います。
それは、「Unsplash Source」というフリー画像サイトです。
Unsplash Sourceのページへアクセスすると、下記のようなURLが用意されています。
このURLを、imgタグのsrc属性にコピペしてブラウザも更新してみましょう。
はい！このように、ランダムで画像を表示させてくれました。ただ、このままだと画像が大きすぎますね。笑
Unsplash Sourceの画像に関しては、このように追記することでサイズを調整することができます。
ひとつ注意点として、×（掛ける）ではなくx（小文字のエックス）で書きましょう。仮に掛け算してしまうととんでもない大きさの画像サイズになってしまいます。
このように、Unsplash Sourceの画像は、固定の画像でなくてもいいときだったり、仮の画像を差し込んでおきたいときなんかにけっこう役立ってくれます。実際に画像をファイルに入れる必要がないのも便利ですね。このフリー画像サイトも覚えておきましょう。
footerタグ内のマークアップ
では最後、footerタグの中をマークアップしていきましょう。
footerタグには補足的な情報やサイトマップが記載されていることがありますが、まず確実と言っていいほどあるのがコピーライトですね。
そしてコピーライトにはsmallタグを用いて表示させていきます。このsmallタグをMDNリファレンスで見てみましょう。
small：附随コメント要素
HTMLのsmall要素は、表示上のスタイルとは関係なく著作権表示や法的表記のような、注釈や小さく表示される文を表します。既定ではsmallからx-smallのように一段階小さいフォントでテキストが表示されます。
引用：MDNリファレンスより
上記のように、コピーライトは著作権表記なのでsmallタグでマークアップする必要がありますね。早速このように書いていきましょう。
はい！これでこのページに著作権表記することができました。
ただ、実はよく見るこの書き方、長いし書かなくてもいい部分がたくさんあります。
（Copyright © 2020-2021 takuzo.com All Rights Resarved.）
結論から言うと、これだけで十分なんです。はい、どん！
いかがでしょうか？
かなりスッキリさせることができましたね！
（© 2020 takuzo.com）
削ったところを一つずつ解説していきます。
まずは、
「Copyright」ですが、これは「©マーク」と同じ意味になります。どちらか一つを書けばOKです。
「2020-2021」は発行年から現在も運用しているなら発行年のみで良い。
「All Rights Resarved」は、一見すごく重要そうに見えますが必要ありません。詳しく言うと、ブエノスアイレス条約に基づく記載で、日本は非加盟国なため、日本の著作物にはそもそも意味がありません。
参照：Wikipediaより
普段から何気なく書いているコピーライトですが、ここを一つとっても意外と初耳なことも多いですね。
もう一度まとめると、
短い書き方：© 2020 takuzo.com
Copyright：これは「©マーク」と同じ意味なためどちらか一つを書けばOK
2020-2021：発行年から現在も運用しているなら発行年のみでOK
All Rights Resarved：日本はブエノスアイレス条約非加盟国なため不要
となります。
どちらで書いても特に問題はありませんが、もし短いタイプの書き方を見たら「こういう理由で短縮できるんだ」ということは知っておきましょう。
まとめ
以上でHTML講座が終了となります。
第4回目の講座では、実際にマークアップをしていきましょう！ということで、
- headerタグ内のマークアップ
- mainタグ内のマークアップ
- footerタグ内のマークアップ
を解説していきました。
一般的なブログをイメージしたマークアップとして、headerタグにはWebサイトのロゴ画像やグローバルナビゲーションのリンクの配置、mainタグには記事内容のメインコンテンツを書いていくこと、そして「Unsplash Source」というフリー画像サイトを使ったランダム画像の使い方、「Lorem」というテキスト代替方法、footerタグにはsmallタグを使ったコピーライトの書き方をお伝えしてきました。
今回はHTML講座なので、CSSでのスタイルは当てていませんが、ここまででも見れるようなページにはなっているのかなと思います。
HTMLは、フロントエンドエンジニアとして活動していくためには大前提として覚えるべきプログラミング言語となりますので、今回の講座を基礎編ではありますが繰り返し受講して基盤にしてもらえたら嬉しいです。
これができたらCSSやJavaScriptを駆使して、Webサイトをキレイにスタイルしていく、という段階に進んでいきましょう。
ここまで本当にお疲れさまでした！
お知らせ
最後に、僕が企画から制作、撮影まですべてを手掛けたホームページ制作講座についてご案内させてください。
僕が実際にお金を頂いて納品したホームページをリメイクした、仮想サイトがゼロから作れるようになる講座『Web Sense』をご用意しました。
TOPページ含む全5ページがHTML・CSS・JavaScriptを使って作れるようになります。さらに、基礎的なタグやflex boxのような複雑な要素まで、丁寧に解説しており、即戦力になるスキルを身につけることが可能です。
- 「正しいコードが書けていないかも」
- 「ホームページ制作の独学に限界を感じている」
- 「HTML・CSSをマスターして単価を上げたい」
こんなお悩みをお持ちの方にオススメとなっておりますので、ぜひお試しください！
僕自身もオンラインスクール卒業生ですが、ホームページをゼロから作れるようになる講座としてはおそらく業界最安値だと思っています。
チェックはこちらから↓
