 |
『これからブログを始めようとしてるんだけどHTMLって何だ？』 『HTMLとは？という所からここで基礎的なHTMLの勉強もしたい』 |
こういった疑問に答えていこうと思います。
今回のテーマ
【これだけは覚えよう】 HTMLとは ？をわかりやすく解説！基礎的なHTMLタグも紹介
もくじ
本記事の信憑性
この記事を書いている僕はブログ歴1年半年ほど。
今もブログを継続中でHTMLにはほぼ毎日触れています。
毎日プログラミングをやりながら緩く生きています。
この記事を読むことで得られること
ブログやホームページ作成を自分でできるようなり、またHTMLはプログラミングの基礎なのでこれからのプログラミング生活の第1歩になると思います。
それではいってみましょう！
HTMLとは何？
HTMLとは＂HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)＂の略で、コンピューターに理解してもらうための言語です。
HTMLとはこんなやつです。
出典：photo AC
THEプログラミングみたいなやつですね。
『コンピューターに理解してもらう？HTMLって言語なの？』
＂コンピューターに理解してもらうための言語＂なんて中々聞き慣れませんし理解しにくいと思います。
なので具体例を出して解説します。
例えばあなたが『美容院 おすすめ』と検索して出てくるウェブサイトも、日本語の文字で書かれているだけだと思われますが、実はあれも全てHTMLで構成されています。
その中で画像が貼ってあったり、リンクが貼ってあったり、文字が大きくなっていたり、枠で囲まれていたりと様々な効果を目にすると思います。
あれはポンっとやってできるものではありません。
そのような効果を出すためにはコンピューターに何らかの形で理解してもらう必要があります。
ウェブサイトを見ている人は当たり前のように画像を見たりリンクを見たりしていますが、よく考えたら
『写真をパソコンに載せるってどうやるの？』
『リンクってどういう仕組みなの？』
と細かいことまでは分からないと思います。
コンピューターも同じで細かいところまで教えてもらわないと分からないのです。
そこでHTMLという一種の言語を使い、画像を貼ることやリンクを貼ることなどの指示を出しコンピューターに理解してもらい、効果を出してもらいます。
なのでコンピューターに理解してもらうための言語と言われています。
ごちゃごちゃに英語とか記号が並んでいるように見えますが1つ1つに意味があり、1つも欠けてはいけません。
なぜHTMLが必要なのか？
『HTMLってすごくややこしいし、何でそんなHTMLが存在するの？』
これは人間と同じです。
人間もジェスチャーだけでは伝わらないことはあるけど言語なら伝わることはありますよね。
フワッとしたジェスチャーみたいなものでコンピューターに伝えるのは難しいです。
しかしHTMLを使い細かいことをコンピューターに伝えることでウェブサイトが見やすくなります。
要はHTMLは細かいことを正確にコンピューターに伝え、ウェブサイトを見やすくするために存在していると言えるでしょう。
これだけは覚えた方が良い基礎的なHTMLタグ
さてHTMLについての理解は深まったと思うので、次はこれだけは覚えた方が良い基礎的なHTMLタグを解説します。
どういう仕組みで、どういう効果を持つのかまできっちり解説するので安心してください。
・titleタグ
・pタグ
・brタグ
・h1〜h6タグ
・divタグ
・strongタグ
・ulタグ
・tableタグ
1つずつ解説します。
titleタグ
ブログや記事、ウェブサイトを作成するときに”タイトル”は必ずつけると思います。
その時にこの『titleタグ』を使います。
インターネットで調べ物をしたときにタイトルを見てウェブサイトへとアクセスすると思いますが、そこに表示されているタイトルのことです。
使い方は
<title>ここにタイトル入力</title>
こんな感じです。
ここで『<>』←これ何？
と思った方は多いと思います。
これは”titleタグ”に限らずHTMLで効果を出したい場合必ずやるべきことです。(たまに例外がありますがほぼないので割愛)
『<〇〇>』(開始タグ)で始め 『</〇〇>』(終了タグ)で終わらせます。
これは順番が変わることはありません。
『</〇〇>』で始め
『<〇〇>』で終わらせるのはNGです
スラッシュがある方が最後に来るということ！
〇〇は今回の場合は”title”
『<〇〇>』と『</〇〇>』でサンドイッチするような感じです。
もっとわかりやすく具体例を出します。
HTMLの使い方まとめ(タイトル) 今日はですねプログラミングの基礎とも言えるHTMLの使い方をまとめました。(本文)
としたい場合、
<title>HTMLの使い方まとめ</title> 今日はですねプログラミングの基礎とも言えるHTMLの使い方をまとめました。(本文)
となります。
pタグ
pタグのpとはparagraphの頭文字です。
paragraphとは段落という意味。
つまり『ここの文章は1つにまとめておきたい！』という場合pタグで囲います。
pタグは段落を指定するためのタグです。
使い方は、
<p>ここに文章入力</p>
こんな感じです。
具体例は、
今日はHTMLについて解説です。HTMLは見慣れないものばかりだと思いますが、コツを掴めば理解も早くできるようになります。 そのコツは下記の通り。
としたい場合、
<p>今日はHTMLについて解説です。HTMLは見慣れないものばかりだと思いますが、コツを掴めば理解も早くできるようになります。</p> <p>そのコツは下記の通り。</p>
となります。
brタグ
brタグのbrとはbreakの頭文字です。
breakとは壊すという意味ですが、ここでは改行するという意味を持ちます。
使い方は、
<p>ここに文章入力<br> してみて下さい。 </p>
こんな感じです。
具体例は、
今日はHTMLについて解説です。 HTMLは見慣れないものばかりだと思いますが、コツを掴めば理解も早くできるようになります。
としたい場合、
<p> 今日はHTMLについて解説です。<br> HTMLは見慣れないものばかりだと思いますが、コツを掴めば理解も早くできるようになります。</p>
となります。
ここで分かった方いると思いますが、brタグは『ここで改行する』という意味なので終了タグがなくても使うことができます。
h1〜h6タグ
hタグは見出しを表すタグで、h1〜h6まであります。
数字が小さい方が大きな見出しとなっています。
使い方は、
<h1>ここに見出し入力</h1>
こんな感じです。
具体例は、
<h1>今日の課題</h1> 今日はHTMLについて理解を深めようと思います。 <h2>HTMLとは</h2> ...
こんな感じで続けていきます。
基本的にh1タグから使っていき、h2、h3、h4、h5、h6と順番に使っていくようにしましょう。
ちなみに『h1=タイトル』のことなので、タイトルをつければ勝手に使うことになります。
なので実際に使うのは、h2からになります。
divタグ
このタグは非常に便利なタグで、枠や文字のデザインをレイアウトする時などの範囲指定に使います。
divタグ自体に意味はなく何かレイアウトする時のみ使います。
使い方は、
<div>ここに文章入力</div>
こんな感じです。
具体例は、
このような枠を作りたい場合、
<div class="box6"> <p>ここに文章入力</p> </div>
と入力してできます。
strongタグ
strongとは強くという意味で、文字を太くするという意味を持ちます。
使い方は、
<strong>ここに文章入力</strong>
こんな感じです。
具体例は、
文章入力
としたい場合、
<strong>文章入力</strong>
となります。
ulタグ
ulタグはUnordered Listの略で順序のないリストを表示する際に使用します。
目次とかのことです。
使い方は、
<ul> <li>1つ目の箇条書き入力</li> <li>2つ目の箇条書き入力</li> </ul>
『<li> </li>』は『<ul> </ul>』とセットになります。
箇条書きを1つ1つ『<li> </li>』で囲みます。
そしてそれらを『<ul> </ul>』でさらに囲みます。
具体例は、
このようにしたい場合、
<ul> <li>HTMLについて</li> <li>HTMLの活用方法</li> </ul>
となります。
tableタグ
表の大きさや枠線の有無など、表のデザインを決めるタグです。
使い方は、
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="width: 50%;"> </td> <td style="width: 50%;"> </td> </tr> <tr> <td style="width: 50%;"> </td> <td style="width: 50%;"> </td> </tr> </tbody> </table>
こんな感じです。
具体例は、
としたい場合、
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="width: 50%;">HTMLとは</td> <td style="width: 50%;">◯◯◯◯◯◯◯◯</td> </tr> <tr> <td style="width: 50%;">HTMLはどこで使うか？</td> <td style="width: 50%;">◯◯◯◯◯◯◯◯</td> </tr> </tbody> </table>
となります。
HTMLを覚えるならワードプレスがおすすめ
まず単刀直入に言いますが、HTMLは本記事のような誰かの記事をを通して勉強することはおすすめできません。
なぜかというと
覚えられないからです。
HTMLは英語と同じだと思います。
学校で関係代名詞や過去分詞などの文法を習っても実用性ってないですよね。
それならできるできないは別として海外に飛んで自分で英語を学びながら、現地の人と会話をして英語に触れる方が圧倒的に英語を覚えられます。
つまりHTMLも見て覚えるより、自分で手を動かして自分で触れてみる方が早く覚えることができます。
『だけどHTMLの触れ方ってどうするべきかな？』
こういった方はワードプレスがオススメです。
ワードプレスとはブログの作成やサイトの作成ができるCMS(コンテンツ管理システム)の1つで、無料ソフトウェアです。
ワードプレスは世界的に使われているCMSなので安心安全で、インターネットにあるサイトの4分の1はワードプレスだと言われています。
ワードプレスでブログを書いたり、サイトを作成したりするのはHTMLが必要になってきます。
しかしHTMLが必要と言っても難易度は高くありません。
その理由はワードプレスはテキストエディタとビジュアルエディタというものが存在し、
・テキストエディタとはHTMLで書く ・ビジュアルエディタとは日本語や英語のような文字を書く
という2パターンがあります。
要はビジュアルエディタで、
僕は今回HTMLを覚えるためにこのブログを通してアウトプットをしようと思います。
というような文字を入れるとテキストエディタでは、
<p> 僕は今回HTMLを覚えるためにこのブログを通してアウトプットをしようと思います。</p>
と自動でHTMLのpタグが入力されているという機能があります。
逆にテキストエディタで、
<p><strong>プログラミングは独学で学んでいこうと思います。</strong></p> <p>その際のアウトプットの場としてこのブログを利用していこうと思います。</p>
このようにHTMLで入力して、ビジュアルエディタで
プログラミングは独学で学んでいこうと思います。 その際のアウトプットの場としてこのブログを利用していこうと思います。
にすることもokです。
『これをやったらどうなるんだろう？』
という疑問が出た時に
・文字→HTML ・HTML→文字
どちらからでも試してみることが可能です。
ワードプレスのダウンロードリンクはこちらから
というようにワードプレスは僕自身も利用していて非常にHTML勉強に役立っています。
というかこのサイトもワードプレスですよ！
またHTMLを勉強していくと分かりますが、HTMLは全て覚える必要は無いんです。
strongやtitleというように英単語の意味の通りの効果を出すことができます。
なのでHTMLの大枠のコツさえ掴めば後は余裕ってことです。
HTMLの勉強は簡単ではないと思われがちですがそれは最初の初速だけです。
何事も始める時は辛いものです。
そこの壁さえ突破すればあとはやり続ければ勝手に習慣化します。
HTMLのようなプログラミング技術は今後必ず役立つと思います。
やってて損は無いことなのでぜひ頑張ってみてください。
またHTMLがある程度理解できた方は次のステップは”CSS”を学ぶことをお勧めします。
プログラミングにおいてCSSもHTMLと同様に重要なものなので学ぶ必要があると思います。
CSSについての記事も書いているので良かったらそちらも見てください。
>>【初心者向け】 CSS とは何？今すぐ使えるCSSコードも紹介
終わりです。
ピンバック: 【初心者向け】 CSSとは 何？今すぐ使えるCSSコードも紹介