ホームページ初心者

ホームページの基礎中の基礎であるHTMLを学ぶ

投稿日:

HTMLはサイトを作るための言語になります。どのようなサイトを作るにしてもHTMLの基本を理解していなければどこかのタイミングでつまずいてしまいます。

「サイトを作るための言語」と聞くとすごく難しそうなイメージを持つかもしれませんが、実はそれほど難しいものではありません。

私たちが普段使っている日本語は世界的に見てすごく難しい言語だと言われていますが、何の難しさも感じず毎日使っていますよね。

それは友達や家族と会話するためには日本語を必要とし、日常生活の中で訓練しているからです。
つまり、使っていれば自然と覚えるということです。

これはHTMLでも同じことが言えて、パソコンと会話するためにはHTMLが必要で、そのために使っていれば自然と使えるようになります。

とはいっても、生まれてすぐに日本語が喋れなかったように、すぐにHTMLを使えるようになるわけではありません。

まずは基本からしっかりと理解する必要があるでしょう。

HTMLとは

HTMLとは、"HyperText Markup Language"の頭文字から出来た言葉で、ウェブページを作るために開発された言語になります。「パソコン語」のようなイメージを持つといいでしょう。

このHTMLはインターネットで表示されるほとんどのサイトを作成するために使われていますが、基本的な構造はすべてに共通しています。

HTMLを理解するためにも、まずは基本構造を理解しましょう。

HTMLの基本構造

HTMLでは「タグ」と呼ばれるものを使ってマークアップしていくことになります。
今あなたが読んでいるこの文章もそうです。「pタグ」と呼ばれるものを使っています。

"p"は"paragraph"の頭文字からきていて、「段落」を意味します。

一例ではありますが、このようなタグを使ってマークアップしていきます。

そして、HTMLで必ず必要なタグがあります。これがHTMLの根幹となっている部分です。

<html>
   <head>
      <title></title>
      <meta name="keywords" content="">
      <meta name="description" content="">
   </head>
   <body>
      <h1></h1>
      <p></p>
   </body>
</html>

ここで使用しているタグは「htmlタグ」「headタグ」「bodyタグ」です。

htmlタグはサイト全体のソースを包括するもの、headタグにはtitleタグやmetaタグ、bodyタグには実際に表示される部分を記述します。

覚えておきたいタグ一覧

実際に表示される部分をbodyタグ内に記述することになりますが、よく使うタグを紹介したいと思います。

<!--Heading-->
<h1>大見出し</h1>
<h2>見出し</h2>
<h3>小見出し</h3>

<!--Paragraph-->
<p>段落(文章を書きます。)</p>

<!--Break-->
<br>

<!--Unordered List-->
<ul>
  <li></li>
  <li></li>
</ul>

<!--Ordered List-->
<ol>
  <li></li>
  <li></li>
</ol>

<!--Image-->
<img src="" alt="">

<!--Anchor-->
<a href=""></a>

これらのタグは良く使うので意味と一緒に覚えましょう。

h1タグ、h2タグ、h3タグ

これらは見出しを表すタグでHeading」からきています。
ここではh3タグまでしか紹介しませんでしたが、実際にはh6タグまで存在します。

pタグ

先ほども出てきたタグですが、Paragraph」からきています。
一つの段落ごとに記述します。

brタグ

改行したいときに使うタグでBreak」からきています。
この文章の改行にも使っています。

ulタグ

リストを表示する際に使うタグでUnordered List」からきています。
「Unordered」なので番号をつけないリストが表示されます。

olタグ

こちらもリストを表示する際に使うタグでOrdered List」からきています。
ulタグとの違いは、リストの前に数字が表示されることです。

imgタグ

これは分かりやすいと思いますが、画像を表示する際に使うタグです。
多くのサイトで画像が使われていると思いますが、ほとんどすべてこのタグで表示されています。

aタグ

主にリンクを表示させるときに使うタグになり、Anchor」からきています。

ソースと表示を比べてみる

初めてhtmlソースを記述する人は本当に表示されるのか不安になると思います。
そこで私が記述したソースとその表示を比べてみましょう。

記述するhtmlソース

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>レンサバヒカQ</title>
   </head>
   <body>
      <h1>レンタルサーバーの選び方</h1>
      <p>レンタルサーバー選びは初心者の人には難しく感じるかもしれません。<br>
      そこで、当サイトではおすすめのレンタルサーバーを紹介します。</p>
      <h2>エックスサーバー</h2>
      <img src="http://rensabahikaku.net/wp-content/themes/keni/images/add/xserver_feature.png" alt="エックスサーバーの特徴">
      <p>エックスサーバーは以下のようなメリットがあります。</p>
      <ul>
         <li>ハイスペック</li>
         <li>月額料金が安い</li>
      </ul>
      <p>次にエックスサーバーの申し込み方法を確認します</p>
      <ol>
         <li>公式サイトへアクセスします。</li>
         <li>申込みボタンをクリック</li>
         <li>必要事項を記入し申込み</li>
      </ol>
      <a href="http://www.xserver.ne.jp/">エックスサーバーの無料お試し申し込みはこちら</a>
   </body>
</html>

実際の表示

表示画像

このように表示されます。

「あれ?デザインが・・・」と思った方もいるかもしれませんが、htmlはあくまでも根幹の部分になるだけであり、デザインの部分はCSSが担当することになります。

まとめ

いかがでしたでしょうか。
htmlは難しく感じがちですが、実際のところ非常にシンプルな構造になっています。

とはいってもすべてをすぐに覚えられるようになるわけではありませんので、実際にてを動かしながら分からないところは都度覚えていくという形がおすすめです。

ショートカットすることを考えずまずは使ってみることをしてみてください。

-ホームページ初心者

Copyright© レンサバヒカQ , 2019 AllRights Reserved Powered by AFFINGER4.