【超初心者向け・前半】HTML/CSSって何?HTMLについて簡単に解説!

【超初心者向け・前半】HTML/CSSって何?HTMLについて簡単に解説!

「あの意味のわからない文字列に加えて複雑な操作を行わなければならなくてすごく難しそう」
「パソコン操作もままならないのにホームページの更新なんて絶対無理」
そう思っていませんか?

更新をするだけならそんなに難しいものではありません。

大幅にプログラムを組み直したり、裏のシステムを触ったりするのでなければ、Wordなどの文章作成ツールを使って文章を入力できる方なら誰でもできます


今回はHTML/CSSについてご紹介します。

前回はホームページを更新するための基礎の基礎をご紹介していますので、更新をするための流れがわからないという方はまず下記を確認をしてみてください。

BrandingCreator

ホームページの更新を行う方法を知っていますか?ある日ホームページを触ることとなった担当者の方々のために、ホームページの運…

それではそれぞれの役割と併せて、何が書かれているのかもサンプルを見ながら一つずつ見ていってみましょう。

HTMLの基礎知識

HTMLの基礎知識

HTMLとは、ホームページ(WEBサイトやサイトとも言います)を作るために使われる言語です。

HTMLは「Hyper Text Markup Language」の頭文字を取った略称で、マークアップ言語と言います。
ちなみに、厳密にはHTMLとCSSはプログラミング言語とは言わないので、残念ながら「HTMLとCSSができる」=「プログラミングができる」とは言いません…。

「あれが言語と呼べるの?言語って日本語とか英語とか人間が会話するためのもののことを言うんじゃないの?」
と疑問に思われた方もいるかもしれません。

実はプログラミングと言うのは機械と人間が会話するための言語なのです。
機械には人間が使っている言語をそのまま理解するということは本来できません。
そのため機械専用の言葉に置き換えてあげる必要があります。

サイバー系の映画とかで0と1が大量に羅列されている映像を見たことはありませんか?
実はあれが機械語です。
機械は本来0と1としか人間に返答ができないのです。
オンかオフ、YESかNOというようにしか機械は返事ができないと思ってもらうとわかりやすいかもしれません。

0と1だけじゃパッと見ただけでは何が書かれているのか人間には理解できませんよね。
0と1の羅列を人間が理解しやすいように組み直していったものが、プログラミングの世界で言うところの「言語」として発展していったのです。

言語化することにより人間は機械に比較的容易に命令を出せるようになり、機械とのコミュニケーションも簡単にできるようになっていきました。


話しを戻します。
HTMLは、言語の中でもホームページの見た目部分を表示させる役割の言語に該当します。

少し実際のコードを見てみましょう。
(※広告ブロックの拡張機能をオンにしていると「Code Pen」がうまく表示されない場合があるので、画面が表示されない場合は広告ブロックを一時的にオフにしてください)

ちょっとメモも書き加えておきましたが、まだ何がなんやら全然わかりませんね。
少し解説していきましょう。

まず、「<」と「>」の間に「html」「head」「body」など、いろいろと入れられていますね。
<>カッコで囲まれたものを「タグ」と言います。
「head」が「<>」に囲まれてたなら「headタグ」、「body」が「<>」に囲まれてたなら「bodyタグ」と呼び、「名称+タグ」で表します
そのまんまですね。

タグには書き方のルールがあります。
タグは文頭では「<名称>」とだけ記述すれば良いのですが、文末では「」として「/(スラッシュ)」を入れて文を閉じるということをしなければなりません。
人間が文章を書く時に文末に句点を書くように、機械はHTML言語を使う時はスラッシュで区切らないとどこからどこまでが命令文なのかを理解できないのです。
「<名称>」でタグの開始位置、「」でタグの終了位置を指定すると覚えておいてください。
タグの間にメインの中身を記述していくこととなります。

ちなみに、このタグの中身はひとまとまりのグループとして考えていきましょう
このグループのことを「要素」と呼びます。
例えば、bodyタグの中に記述されてるものはひとまとめに「body要素」と呼びます。
「名称+要素」の表すので、タグの呼び方と一緒ですね。

タグにはたくさん種類があるのですが、それぞれのタグにはそれぞれの役割があり、タグの中に何を記述できるのかも決められています
このタグの種類が少し多いように見えるため、初心者の方からすると難しそうで取っ掛かりにくく見えるのですが、実は書いてあることはいたってシンプルです。

タグを記述することでHTMLを使って機械への命令をすることができるようになります。
headタグを使う→「head要素を表示してくれ!」
bodyタグを使う→「body要素を表示してくれ!」

それでは次にそれぞれのタグについて見ていきましょう。

HTMLの具体例【タグについて見てみよう】

HTMLの具体例【タグについて見てみよう】

タグにはそれぞれ役割があります。

タグの働きについて簡単に見ていきましょう。

【タグについて見てみよう1】headタグ

headタグはページ内の設定をする場所と考えてもらって基本差し支えありません。
ここで記述する内容は表にはほとんど見えないものばかりです。

SEO対策ということをみなさんは聞いたことがありませんか?
検索されやすくするために行う対策のことです。
headタグ内では主にこのSEO対策に関連する記述を多くすることとなります。

【タグについて見てみよう2】bodyタグ

bodyタグにはページ内で表に見える要素を詰め込んでいくこととなります。
このbodyタグの中にページで発信したい情報を記述していくことになり、HTMLのメインの部分となります。

発信したい情報やコンテンツ(情報の中身のこと)をこのbody要素の中に書いていくこととなるので、HTMLページを作る際の大半の時間をこのbody要素内で掛けることとなります。

【タグについて見てみよう3】divタグ

divタグはグループ化をするために用います。
コードを思いつくままに書いていったのでは、どこに何が書いてあるのかわかりづらくなってしまいます。
そのため、コードをある一定のルールの下でまとめてあげることで、どこに何が書いてあるのかをわかりやすくしてくれます。

例えば、数百人の小学生があちこちにいるとして、名簿を作ることになったとしましょう。 一人ひとりの名前や顔がたとえわかったとしても、ただ単にリストに羅列していったのではわかりづらいですよね?
この場合、性別、地域、学校、クラスなど、ある程度の基準の下でグループ分けした方がどこに誰がいるのかは断然わかりやすくなります。
divタグも似たようなもので、一定のルールで要素をまとめてあげた方がどこに何があるのか見返した時にわかりやすくなり、保守管理も簡単になります。

【タグについて見てみよう4】hタグ

hタグは見出しを表現するタグです。
文字の大きさが変わるので、初心者の方は単純に文字の大きさを変えるためだけに使用しがちですが、文字の大きさを変えるためだけに使うものではありません

hタグは、h1からh6までのタグが用意されています。
イメージとしては、本の章・節・項を参考にするとわかりやすいでしょう。
h1が章、h2が節、h3が項に当たると考えるとわかりやすいです。

hタグのそれぞれの関係性ですが、h1はh2よりも大きな見出し、h2はh3よりも大きな見出し、h3は…というように、「h1>h2>h3>h4>h5>h6」の関係性となります。
ちなみにh1タグは、各ページでなるべく1つだけに絞った方が構造的には無難なのですが、実は複数使っても問題はありません。

hタグの使い方についてはこちらの記事で解説しています。
※現在記事準備中です

【タグについて見てみよう5】pタグ

pタグは文章を表現するために使うタグです。
ホームページ内で表現したいテキストはこのタグを主に使っていきます。

文字を入力していたら空白を入れることもあります。
「 」と入力することで空白を入れることもできるのですが、できればCSSで空白を入れるように記述してあげましょう(ここではCSSでの空白の入れ方についての説明を省きます)
ちなみに改行をしたい場合には、brタグを文末に書いてあげるだけです。

【タグについて見てみよう6】imgタグ

imgタグは画像を挿入するときに使います。
先程のサンプルコードを見てみましょう。

imgサンプルコード

imgタグの中に「src」「alt」という記述がありますよね?
これは「属性」と言って、タグの動作を制御するためにプラスで付け加えるルール設定のようなものと思っておいてください。
属性も、「名称+属性」と言う呼び方になります。
src属性、alt属性という感じです。

タグによっては指定の属性が必須となる場合があります。
今回のimgタグの場合は、「src属性」でソースのデータがある場所(専門用語ではディレクトリと言います)を指定してあげる必要があります。
imgタグでsrc属性を指定してあげないと、
「画像のデータはどこにあるの?どこに画像データがあるかわからないから表示できないよ」
と機械が返答をしてきて、画像が表示されません。
imgタグではデータのある場所を必ず指定してあげるようにしましょう。

ちなみに、「src」は「Source」の略で、「alt」は「alternate」の略です。
今はそんな属性もあるんだということを頭の片隅に置いておくだけで問題ありません。

ディレクトリについてはこちらの記事で解説しています。
※現在記事準備中です

【タグについて見てみよう7】aタグ

aタグはリンクを表示するタグになります。

自分のサイトから別のサイトやページに飛べるようにしておきたいときに使います。
aタグにもリンクを設定する際には必ず必要な属性で、「href」属性と言うものがあります。
「href=”リンク先の場所(ディレクトリ)”」と書くことでリンクを設定できます。

aタグは性質上、他のタグよりも使い方に少しだけ注意があるタグでもあります。
今はまだ少し難しい内容になるので、こちらについては下記の別記事でまとめています。
※現在記事準備中です

【タグについて見てみよう8】ul,ol,liタグ

ul,ol,liタグはリスト表示するときに使います。

「olって何?」
と思われたかもしれませんが、違いはシンプルです。
ulタグがliタグの文頭に「・」がつくように指定をするタグで、olタグがliタグの文頭に「番号」がつくように指定をするだけの違いです。

liタグは、ul,olどちらかでグループ化されたものの中身となるリストを表すものとなります。
箇条書きリストを作りたいときには、liタグの中に本文を書いていくこととなります。

実際のサンプルコードを見てみよう

ここまででよく使われるタグを一通り見ていきました。
まだまだ種類はありますが、書いている内に自然と慣れていくので、今覚えられなくても焦る必要はありません。

それでは、最後にHTMLコードが実際にどのように使われているのかを確認してみましょう。
簡単なサンプルを作ってみましたので、タグがどこでどのように使われているのか確認をしてみてください。
コードを見るには下記ボックスの「HTML」ボタンを押してください。

「class」というものがタグ内に書き加えられていますが、これも属性の一種です。
CSSと一緒に見た方が理解をしやすいので、classについては次回のCSSの記事で説明します。

最後に注意点があります。
HTMLも保守管理をしていくために一定のルールが決められています。
なんでもかんでも思いつくがままに書かず、先に全体像を決めてから書いていくことが大切です。
めちゃくちゃなコードを書くと、後々管理する人がコードに何が書いてあるのかを理解するまでに時間がかかったり、更新がしづらくなったりしてしまいます。
ちゃんと考えてからコードを書き始めるのが非常に大切なのだということを少し覚えておいてください。

コードの書き方についてはサイト設計の話になります。
サイト設計についてはこちらの記事で解説をしていますので、ご覧ください。
※現在記事準備中です


次回は後半となるCSSの紹介をします。
それでは。