独学でプログラミングを勉強する方法。HTML編。(第三回)

独学でプログラミングを勉強する方法。HTML編。(第三回)

実際に手を動かして勉強しよう!

プログラミングを学習する方法を紹介していきたいと思います。
前回では、調べ方を紹介しました。 今回は実践編です。まずは習うより慣れろです。

自己紹介

現役プログラマー。この道 15 年ですが、まだまだ現役を続けたいと思っています。 バックエンドを担当していますが、たまにフロントを少しだけお手伝いします。

Codepenのアカウント作成

Codepenは無料でHTML/CSS/Javascript編集、実行できるWebサイトです。

Codepen

初心者の方が最初につまづくものとして、環境のセットアップがあります。しかし、Codepanを使えば煩わしいセットアップはありません。 とりあえずプログラミングを体感するのが目的な場合はCodepenが最適だと思います。

注意点として、Codepenで一生懸命コードを書いてもそのままWebサイトができるわけでありません。 Webサイトを立ち上げる場合はプログラミング以外に色々とやらなけれいけません。Codepenでは、あくまでプログラミングを体感する、コードの動作を確かめたい場合に利用して下さい。

Codepenの公式サイトはこちらから

画面右上にあるSign Upからアカウントを作成して下さい。

Signup

HTMLでHello World

まずはログインしてから画面左のメニューのPenをクリックして下さい。

Start

すると以下の画面が表示されます。

Code-editor

画面左のHTMLに以下のように入力して下さい。

Hello-world

下の画面にHello Worldと表示されたと思います。

HTMLとは

HTMLとはHyperText Markup Languageの意味です。厳密にいうとHTMLはプログラミング言語ではありません。

HTMLとはコンピュータが理解できるように、文章にタグをつけて意味をもたせる、というものです。 これだけだと意味が分からないと思います。

コンピュータは人間と違って、人間の言葉が理解できません。 そこで、どの文章がタイトルで、どの文章がリストで、などを記述してあげる必要があります。そして、コンピュータはそのタグを元に表示を変えたりします。ちなみに、SEOにとっても重要になってきますが、それは別の記事で紹介します。

例えば先程の例では以下のように入力しました。

index.html
<h1>Hello World</h1>

さて、h1というのは見出しです。h1〜h6まであります。1が一番大きく、6が一番小さい見出しです。 新聞だと一面にデカデカと記載される見出しが、htmlで言うところのh1です。

タグはたくさん種類があります。例えば、

  • p
  • ul, li
  • br
  • strong

などです。他にも大変多くのタグが存在しますが、一度に全部覚える必要はありません。一つずつ覚えていきましょう

ちょっとした文章を書いてみよう

では、以下の文章を先程のCodepenの画面に打ち込んで見て下さい。

index.html
<h1>Hello World</h1>
<p>今日は若干冷えますね。</p>
<p>ええ、すっかり冬になりました。<br/>明日は雪のようです。</p>
<p>明日これを仕入れたいのですが。<strong>在庫はありますか?</strong></p>
<ul>
  <li>醤油</li>
  <li>みりん</li>
</ul>
<p>ええ、ありますとも。</p>
タグ 説明
p パラグラフを意味します。つまり段落です。意味のある塊を表現したい場合に使います。
br 改行を意味します。pタグの中で意図的に改行する時はbrタグを使用します。
strong 強調したい文字がある時に使用します。
ul/li リストを表現したい時に使用します。

このように、コンピュータに分かるように、文章に意味を持たせることができます。 近年は、SEO対策でこれらのタグを使い分ける、という意味の方が大きいかもしれません。

というのも、単純に見た目だけをきれいにするのであれば、CSSを利用することで可能だからです。 CSSについては次回紹介します。


Written by Yasuhiro Ito
Software engineer

© 2021, Yasuhiro Ito