よく使うHTMLタグ(その1)*

あけましておめでとうございます!元旦ですね♪


2019年1本目はHTMLタグをまとめます!

知っておけばだいたいのアプリをつくる時にも困らないものを、いくつかの記事に分けて、ぜんぶで10~15種類くらい紹介する予定です。

今日はいきなり5種類やっちゃいます



HTML初めて聞いた!という人で興味がある人は、以下の記事を読んでからの方がわかりやすいかも。


簡単におさらいしておくと、HTMLとは『タグと呼ばれるとんがりかっこでつくった目印』で挟んでつくるテキストでした。

<h1> </h1> → 大きく表示できる
<p> </p> → ひと段落にまとめられる
<b> <b> → 太字として表示できる

これら3つのタグで文章をはさむことで、ただのテキストが『はいぱー』なテキストになります。

HTMLの『HT』ですね。ハイパーテキストです。

<br>
<hr>

この二つは例外的に終わりのタグで挟まずに単体で使います。

文章を読む時の『区切り』として改行したり線を引いたりしてくれるタグです。
使いこなせば読みやすい表示になるHTMLテキストをつくれるということですね!


それではこれらのタグを使ってコードを書くとどうなるか見てみましょう。

タグの間に日本語を書くだけなのでとっても簡単です*


今日のHTMLコード

<h1>人は言葉を食べる</h1>
<hr>
<h3>人は考える葦</h3>
<p>私たちは人間です。</p>
<p>いつも何かを考えています。</p>

<h3>本を読む人</h3>
<p>本を読んだことがありますか?<br>私たちは生まれてから今までに、どれくらいの文字を読んできたのでしょうか</p>

<h3>人の成長とは</h3>
<p>そんなことを考えても、どれくらいのご飯を食べてきたかもわかりません</p>
<p>ただ一つ言えるのは、<b>ご飯を食べて体が育つように、言葉を食べると心が育つ</b>ということです。</p>
<br>
<hr>
<p>私は人がそういう生き物だと思います*</p>


とんがりかっこを使って決まったアルファベットをサンドイッチしたマークで日本語を挟むだけなので、慣れると普通の文章を書くのとそんなに変わらない時間で書けますよ♪


人間が見るとちょっとごちゃっとしていて読みにくいのですが、パソコン(ブラウザ)はこれを解読する機能を持っていて、人間に見やすいように表示してくれます!

たとえば、

<p>私たちは人間です</p>

これは、<p>が『ここから段落始まりますよ〜』という意味で、</p>が『ここで段落終わりますよ〜』という意味になっています。


<p></p> 『私たちの間の文章が1段落ですよ〜』

というような感じで、『それぞれのタグの意味』をブラウザはすべて知っているということです*


ブラウザで見た時の表示

上に書いたHTMLのコードは、基本的にはただの文字をとんがりかっこでできたタグで囲んでいるだけです。繰り返しになりますが、この文書のことを、HTML文書と言います。

ちょっと英語にするとHTMLドキュメントです!


ブラウザで開いた時の見た目は次の画像のようになります。

色は無く、文字も左揃えでシンプルですが、強調すべきところが強調されていて、ちょっとブログっぽくなっていますね*



[参考画像] ブラウザで上のHTMLコードを表示したときの表示画面

ブラウザで上のHTMLコードを表示したときの表示画面


ちなみに<h1></h1>の見出しタグは『1』のところが『1』〜『6』まで好きな数字を使えます!『6』に近づくほど見出しの文字の大きさが小さくなります


HTMLタグだけでもちょっといい感じになる

どうですか?

はじめは慣れないと思うので、HTMLコードと実際の表示を何度か見比べて見てください。

pタグを二つ並べると段落だから隙間ができるんだな〜とか、brタグは他のタグの中でも外でも使えるんだな〜とか、色々気づくことがあると思います!


『たった5個のHTMLタグだけでも、アリスの表示にかなり近い記事を書けるんだな〜』と思うとすごいですよね!


h、p、b、br、hr

ちゃんと5個ともどんな見た目のテキストになるのかイメージできるようになりましたか??

もし説明できないな〜と思うタグがあれば、読み返して見てくださいね。最初は大変ですけど、がんばりましょう♪


もう完璧な方はおつかれさまでした!

でも、HTMLの真骨頂はこんなものじゃないですよっ。

次回は『このタグがあったからインターネットが広がった!』と言ってもよさそうなくらい大切なタグや、『情報を可視化する』上でとても役に立つタグをみていきたいと思います*



P.S.

やってみたい人がお手元で試せるようにやり方の説明の記事を書くか、わかりやすい説明記事を紹介した方がいいなと思ったので、めも。

公開日:2019/01/01
獲得ALIS:32.36
akari's icon'
  • akari
  • @akari
家にいる時間が好きです。デザイン系の制作会社でフロントエンドエンジニアをしています。
コメントする
  • nico
  • 7ヶ月前

大変勉強になりました!
基礎編もじっくりと読んでみます♪

返信
コメントする