Hello！ファズです
という方に向けてHTMLを解説！！
WEB制作といえば必要不可欠なこの基本的なコード。
ブログを始める際に気になる方もいるようですが、結論をいうと「最初から必要！」というわけではありません。
知識は徐々につけていけるので、初歩の初歩の人からでもブログを始める時には気にしなくてOK！
基本的にはWordPressと呼ばれるツールを使うことになるので、「WordPressのテーマ選び」や「使い方」がポイントになってきます。
細かいアレンジやサイトの大きな変更を望む場合は必須になるのである程度学習が必要になります。
「HTML」はどういったもので、何ができるのかなどをお伝えしていくので参考になれば幸いです！
【初心者におすすめの記事】
◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい
そもそもHTMLってなに？
HTMLとはハイパーテキストマークアップランゲージを略したもので、WEBサイト構築の基本であり必須。
情報をちゃんと伝え、表示させるためのWEB言語です。
WEBサイトに情報を載せる際、テキストだけだとコンピュータはどこに表示してどういう形にするのかを理解することができません。
そこでテキストや画像に、HTML構文でタグと呼ばれるものでマークアップ。つまり、印をつけることでちゃんと理解させることができます。
HTML構文で記述されたタグを含めた内容にすることで、WEBサイト上でデザインされた表示が可能になります。
少し前まではHTML5と呼ばれる構文を使用した書き方が主流でしたが2022年に廃止され、現在ではHTML Living Standardと呼ばれるものが新しく登場したので、勉強を始める方はこちらを推奨します。
案件によっては何年も前に作られたサイトの改修もありますが、ある程度最新のものを勉強したあとで古い記述を学習することができるので問題ありません。
基本的にHTML構文やタグだけではWEBサイトのデザインを実現することはできず、CSSと呼ばれる言語と合わせることが必須ですのでニコイチと覚えてください。
ぼくがHTML/CSSの勉強する際、ごっちゃになってよくわからなかった経緯があります。なのでしっかり理解してもらうために、本記事ではHTMLにしぼった記事を書いていきたいと思います。
CSSについて知りたい方は別記事でよろしくお願いします。
HTML構文とタグについて
構文とは決まった形の文のことです。HTMLの構文は通常テキストをタグと呼ばれるコードで挟みこむことで、画面上にちゃんと表示させることができます。
構文を無視したタグの配置はレイアウト崩れを起こしたり、ちゃんと表示されなかったりします。
下記は構文にタグを使った例。テキストの始まりと終わりに<>に囲んでいるのがわかるかと思います。<>の中にある「title」などがタグ名となります。
title開始タグ <title>ここにサイトタイトルがはいります。</title> title終了タグ
div開始タグ <div>ここにコンテンツの中身を入れます。</div> div終了タグ使い方はシンプルで、基本的に開始<>タグと<>終了タグでテキストを挟んで使用します。
例外として閉じタグが必要のないものや終了タグが省略可能なものもいくつかあります。
タグはたくさんあり、役割によって使用するものが変わってくるので適切なものを使用するようにしましょう。
WEBサイトの構成
WEBサイトとはいくつものページから成る一つのサイト全体の総称です。
同じ意味でよくホームページと呼ばれることがありますが、ホームページとはそのサイトのTOPページを指す名称なので厳密にはWEBサイトとは違います。
WEBサイト全体に共通した単体の大まかな構成を説明します。
<head>上部。サイトタイトルや検索時に表示される見出しなどの情報</head>
<body>中部。WEBページに実際に表示される内容</body>
<footer>下部。コピーライトやプライバシーポリシーを表示する領域</footer>上記が主にWEBページを形成する基本的な三つの構成です。
それぞれエリアを分けてHTML構文による『上部、中部、下部』の部位を記述することで、情報を入れ込む場所を明確化する決まりがあります。
実際の制作では、同じようにbodyの中でコンテンツエリアを分けて作るのが基本になります。
（例）
<head>サイトタイトルや検索時に表示される見出しなどの情報</head>
<body>
<div>コンテンツエリア1</div>
<div>コンテンツエリア2</div>
<div>
コンテンツエリア3
<div>コンテンツエリア3の1</div>
<div>コンテンツエリア3の2</div>
</div>
</body>
<footer>コピーライトやプライバシーポリシーを表示する領域</footer>閉じタグ不要タグ
<br> , <img> , <hr> , <meta> , <input>属性
タグには属性と呼ばれるものを設定することができます。
基本に様々な属性を操作することで、レイアウトやアニメーションなどを実現することができます。
<div id="zokusei01" class="zokusei02"></div>
<a href="" target="_blank"></a>上記のサンプルではわかりやすくdivタグの中にidとclass属性を設定した例。
ちなみに、属性であるidとclassはタグに設定することでCSSを操作ることができるので欠かせないものといえます。
また、サンプルのidやclassのように異なる属性を複数セットして使用することも可能。
要素
HTMLを勉強していたり、現場でやり取りする中で要素という言葉がでてくることは珍しくありません。
要素とは、簡単に言うとhead、body、footerの中に入るタグやテキストを含むHTMLコードのことを指します。
下記はbodyに入れたコード例。
パターン01ではclass属性にあるdiv1の要素は「前後のdiv要素を含まない」のテキストが要素になります。
<!-- パターン01 -->
<body>
<div class="div1">前後のdiv要素を含まない</div>
</body>パターン02ではdiv2の要素はdivを含む「<div>前後のdiv要素を含む要素</div>」が要素にあたります。
<!-- パターン02 -->
<body>
<div class="div2">
<div>前後のdiv要素を含む要素</div>
</div>
</body>HTML構文はパターン02のようにdivの中にdivをいれたりすることができる「入れ子」と呼ばれる概念があります。
つまり、入れ子の数や位置によって”要素”が指す内容は変わるということですね。
要素とは特定の位置やタグを指す言葉ではなく、都度示す場所が変化するものと考えてもらって差し支えないでしょう。
また、要素にはブロックレベルとインラインレベルの二つのレベルがあります。
ブロックレベルは囲った要素を一塊のブロックとしてまとめる役割があります。
例えばdivの中にaタグやpタグを入れた場合、divが箱の役割を果たすので、二つの要素をグルーピングするといったことができます。
逆にインラインレベルは入れ子にすることができないので、箱としては使えません。
例えばaタグ。わかりやすいかわかりませんが、ぼくのイメージだと下記コードの形の場合、インラインレベルであるaタグがテキストの形にゴムタイツのようにフィットする感じ・・笑
<div>
<a>ゴムタイツのように文字にフィット！だから箱にはできない</a><!-- これはおっけー -->
</div>
<a>
<div>ゴムタイツのように文字にフィット！だから箱にはできない</div><!-- これはだめ -->
</a>このレベルを使い分けることでデザイン表現を実現していくのがセオリーとなります。
ちなみに上記のコードではインラインレベルであるaタグの中にブロックレベルを入れるのは構文違反ですが、CSSによりブロックレベルとインラインレベルはデフォルト値から再指定できるので実際は可能です。
実際に書いてみる
HTMLがどういったものなのか知りたい方がこの記事を読んでくれていると思うので、実際に触ってみるのがいいと思います。
HTMLは他のプログラム言語よりも環境づくりは難しくないのでわかりやすいようにお教えします。
まずは下記をご用意ください。
準備するもの
- エディタ（メモ帳などでOK）
- 作ったメモ帳を保存するフォルダ
準備ができたら下記のコードをメモ帳などのエディタを使って手打ちかコピペして書いてみてください。
すでに勉強を始めている方へ！下記のエディタはおすすめなので、ぜひ使ってみください。
<head>
<title>まずは触ろうサンプルテスト</title>
</head>
<body>
<div class="box1">
<p>box1の要素pタグです</p>
<a href="https://fusm.site/" target="_blank" rel="noopener noreferrer">box1のリンクサンプル</a>
</div>
</body>
<footer>
©copyright
</footer>上記はそれぞれhead、body、footerに分けたコードです。
書き写しorコピペができたらフォーマットをhtmlにして準備したフォルダに保存してください。
あとは保存したファイルをブラウザにドラッグ＆ドロップするかダブルクリックなどで実行してもらえたら表示されるはずです。
上から順に説明。
開かれたブラウザタブにはheadに記述したtitleが表示されていて、bodyとフッター部分の記述はブラウザにテキストとして表示されていると思います。
表示されているのがHTML、その配置や色を変更していったりするのがCSSです。
head部分は先にお話したようにメタ情報と呼ばれる記述で、ぱっと見で見える部分ではありませんが、勉強を重ねるとすぐに大事な情報だということがわかるかと思いますのでここでは割愛します。
リンク部分はhref属性の値に当サイトのURLを入れてtarget属性で別タブ表示させています。
まとめ
わかりやすく説明できていたでしょうか？
触ってみると基本の構文とタグさえ知っていればそう難しい言語ではないことがわかったかと思います。
もちろん細かなルールややってはいけない組み方など勉強は必要ですが独学は十分に可能です。
もし、基礎を身につけるのに自信がないといった心配があるのであれば、オンラインスクルールなどを利用してみてもいいかもしれません。
筆者はオンラインスクールではありませんでしたが、最初は人に教えてもらった経緯があります。
独学でも勉強できましたが、やはり最初のロードマップを組む参考にはなったので何を調べたらいいかわかりやすかったです。
もし、ここが分かりにくいなどあればコメントください！手直ししますので。
以上です！またね〜
コメント