【入門編】HTMLって何?初心者でも超わかりやすいHTMLの基本と書き方

トリ課長

やあ。トリ小屋(株)へようこそ。
君にはネットショップの運営を任せたい。
HTMLは知ってるかな?
HTML?なんすか?

やる木なし男くん

トリ課長

おや、HTMLを知らないようだ。早速解説するから、しっかり聞いてくれたまえ。
…ウス。(メンドクセェ)

やる木なし男くん

HTMLの基本

HTMLとは

HTMLとは、WEBページに文字や画像を表示させるための命令のようなものだ。

HTMLファイルというのは、その命令が書かれた命令書みたいなものだね。

今見ているこの記事も、実は裏側は文字だらけなんだよ。

裏側↓

ははは。見ているだけで吐きそうだろう。

でも我々が普段使う種類は限られているから、それさえ覚えておけばなんとかなるもんだよ。

まずはHTMLがどんなルールで動いているかを教えよう。

ルール

先ほどの記事の裏側の画像に、< >という記号がたくさん書いてあるのがわかるかね?

これをタグと言うんだ。

< >=タグ

命令を書く時には、

<命令開始のタグ>◯◯<命令終了のタグ/>

という形式にする必要がある。

例えば「うぇぶたま」という文字を赤くしたい時、

日本語でHTML風に書くと

<後ろの文字を赤くしろ>うぇぶたま</赤くするのはここまでだ>

となる。

これだと我々日本人にはわかりやすいだろう。でも、残念ながらこれではHTMLとは言えない。

なぜならタグの中の文字は、全てアルファベットで書かないといけないからだ。

正しくはこうだ。

HTML

<font color="red">うぇぶたま</font>

ページ上での見え方はこうなる↓

うぇぶたま

まあそもそもネット自体アメリカ軍が開発したものだからね。

でも、そんなにがっかりするな。

ほとんどが君たちにも馴染みがある単語だから大丈夫だ。

font(フォント)は、エクセルやワードで文字の書体を変える時に使われる言葉だから、馴染みがあるだろう?

カラーもレッドももはや日本語だ。簡単だな。
(細かく色を指定する時は、コードで指定する別の方法を使うよ。)

というわけで、かたまりで見るとややこしそうでも、一つ一つ取り出して見てみるとそんなに難しくはないことがわかったかな。

HTMLでできること

WEBページはHTMLの命令でできていることはイメージできたと思うが、HTMLだけでWEBページが作れるわけではないんだよ。

HTMLでできることは、以下のようなことだ。

・文字(テキスト)や画像を表示させる
・リンクを飛ばす
・表を作る

HTMLでできないこと

・WEBページ全体の背景色を変える
・表示する文字や画像の余白を調整する
・ボタンや見出しなど、文字にデザインをつける

これらを調整するには、CSS(スタイルシート)というものを使うことになる。

ここは、ややこしかったらひとまず読み飛ばしてくれてかまわんよ。

HTMLの書き方・よく使うタグ一覧

HTMLの基本はわかったかね?

わからなくても、とにかくHTMLをたくさん書けばわかるようになるから、まずは読み進めて自分で書いてみてくれ。

注意

ちなみに、HTMLはすべて半角のアルファベットでなければならない。

特に、スペースは初心者が見落としがちだから要注意だ。

◯<font color>(すべて半角)
✕<font color>(すべて全角)
✕<font color>(スペースが全角)

文字のサイズを変える

文章の中で一部文字の大きさを変えたい場合は、上の◯の部分に1〜7の数字を入れれば大きさが変わる。

ちなみに、指定がない場合フォントサイズは勝手に3になる。
その場合は、文字を小さくしたければ2以下、大きくしたければ4以上にするんだ。

HTML

<font size="1">フォントサイズ1</font>
<font size="2"><フォントサイズ2</font>
<font size="3">フォントサイズ3</font>
<font size="4">フォントサイズ4</font>
<font size="5">フォントサイズ5</font>
<font size="6">フォントサイズ6</font>

実際の見え方は以下のようになる。

フォントサイズ1
フォントサイズ2
フォントサイズ3
フォントサイズ4
フォントサイズ5
フォントサイズ6

文字を太くする

太くする方法は2通りある。

HTML

<strong>文字を太くする</strong>
<b>文字を太くする</b>
文字を太くする
文字を太くする

どちらも見え方は同じだが、意味が違う。

<strong></strong>は、重要だから強調しますよという意味だ。
<b></b>は、ただ文字を太くするという意味だ。

検索エンジン(googleなど)はネット上のすべてのページをパトロールしている。
はパトロール中のおまわりさんに重要な箇所だよ、と伝えるために存在するんだ。

デザイン上目立たせたいというだけならを使えばいい。

まあそこまで重要なタグじゃないから、迷ったらにしておけばいいさ。

一番おまわりさんが重要視しているのは、タイトルや見出しタグだからね。

画像を挿入する

HTML

<img src="画像URL">

imgはimage、srcはsorce、つまり画像のソースはこのURLです。という意味だね。

画像をアップロードすると、必ずURLが発行されるから、それを書けばいい。

ここで、閉じタグがないことに気づいた君は、なかなか観察力があるね!

画像を引っ張ってくるだけで、範囲などを指定する必要がないから、閉じタグは必要ないんだ。

リンクを飛ばす

HTML

<a href="URL">△△</a>

△△は、飛び先のリンクを説明する言葉を入れるんだ。

例えばトップページのURLを貼るなら、こうなる。

HTML

<a href="https://web-tama.net/">トップページヘ</a>

は?href?何語?と思った君、僕も全く同感だよ。
読み方は、エイチレフというらしいよ。

これだけは覚えてもらうか、このページをお気に入り登録して、毎回コピペしてもらうしかないね。

リンクが飛ばない方は参考にしてね 【初心者】HTMLリンクの飛ばし方・飛ばない時の対処法

画像にリンクを貼る

それからリンクを貼れるのは言葉だけではない。画像にも貼れるんだ。

例えばよくサイト上部のロゴをクリックするとトップページに飛ぶようになっているだろう?
あれは、ロゴにリンクを貼っているんだよ。

段落ごとにまとめる

HTML

<p><文章></p>

pタグを使うと、文章の始まりや終わりにいちいち改行タグ
を入れなくても、改行されて文章が読みやすくなるんだよ。

は単純に「改行する」という命令タグだから、PCで見る人に合わせて入れるとスマホで見る人には変な部分で改行が入ることがある。

pタグを使えば、100%ではないが色々な端末からアクセスする人が見やすいよう調整してくれるので、まとまった文章を書く時はpタグで囲んであげるといい。

見出しをつける

見出しというのは読者にとっても検索エンジンのおまわりさんにとっても非常に大切だ。

例えば本の目次を見れば、その本が何を伝えたいのかよくわかるだろう。

見出しタグも同じ役割をする。

見出しタグはh1〜h6まである。

h1がタイトルや大見出しにあたり、数字が小さくなるにつれて中見出し、小見出し、と小さくなる。

本で例えると、タイトルが<h1></h1>、章が<h2></h2>、節が<h3></h3>といった感じだ。

HTML

<h1>【入門編】HTMLって何?初心者でも超わかりやすいHTMLの基本と書き方</h1>
<h2>HTMLの基本</h2>
<h3>HTMLとは

【入門編】HTMLって何?初心者でも超わかりやすいHTMLの基本と書き方

HTMLの基本

HTMLとは

HTMLは誰のために書く?

HTMLはWEB上に表示させるために書かないといけないものだが、実はそれだけじゃない。

ページを表示した後、HTMLを読みに来る人がいるんだ。
誰だと思う?

さっき少し話した、検索エンジンのおまわりさんだ。

検索エンジンというとややこしいから、呼び方をgoogleに統一しよう。

そして、おまわりさんのことを、この業界のトリはクローラーと呼んでいる。

どうしてgoogleのクローラーがパトロールすると思う?

それは、君たちが何かのキーワードで検索した時、そのキーワードに一番ふさわしい記事が上位に表示されるようにするためなんだ。

googleは君たちがストレスなくネット上の情報を拾えるように、どの記事をどんな順番で表示するのが一番ふさわしいか、一つひとつの記事をパトロールして決めているんだよ。

その時にgoogleが参考にする大切なものの一つが、HTMLだ。
googleにとってわかりやすく、正しいHTMLが使われていると、googleからの評価も高くなる。

せっかく公開したWEBページだから、多くの人に見てもらいたいよね。
そのためには、googleやyahooの検索結果で上の方に表示してもらう必要がある。

だから、君たちがHTMLを書く時には、ユーザーにとってもgoogleにとってもわかりやすく書くことが大切なんだよ。

関連記事:googleにとってわかりやすいHTMLとは

HTMLファイルは、簡単に作れる

ちなみに、HTMLファイルと聞くと難しく聞こえるが、メモ帳でメモを新規作成して、”◯◯.html”という名前をつければもうそれがHTMLファイルなんだ。

それをWEBサイトにアップロードすれば、サイト上に公開されるぞ。

トリ課長

どうだ君、わかったかね?
では早速このHTMLファイルを編集して、文字を見やすくしてみてくれ
HTML?なんすか?

やる木なし男くん

トリ課長

・・・

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です