「初心者もできる！プログラミング基礎講座」シリーズでは、ウェブサイト制作におけるプログラミングの基礎について書いています。順を追って読んでいくと、簡単なホームページの制作や編集ができるようになります。第1回は、ウェブサイト制作におけるプログラミングとは何か、プログラミング言語の基本であるHTMLについて解説します。
プログラミングとは？
ホームページなどのウェブサイトは基本的に、HTMLとCSSというプログラミング言語でできています。こうしたプログラミング言語を使ってウェブサイトなどを作っていくことをプログラミングといいます。ざっくりですが、この意味でのプログラミングについて書いています。
HTMLとは？
ハイパーテキスト マークアップ ランゲージ（hypertext markup language） の略です。直訳でハイパーテキストをマークアップする言語ですが、少し分解して説明します。
ハイパーテキスト
ハイパーリンクのついた文章のことです。ブログ記事を読んでいても、テキストに下線がついて色が変わっているのをよく目にします。そのテキストをクリックすると関連した情報を得ることができます。単なる文章ではなく、様々な情報を含んだテキストというイメージで良いと思います。
マークアップ
簡単に言えば「印をつける」ということです…が、どんな印でしょうか。そのテキストがサイト上でどんな要素となるのか印をつけます。例えば、このテキストは「タイトルです」「見出しです」「画像です」といった具合です。
どのようにマークアップするかについては、次の「HTMLの基礎」で解説します。
HTMLの基礎
テキストをタグで囲むことによって意味を持たせる（ ＝ マークアップする）ことができます。タグは< >で要素を囲んで記述します。
例として、画像の場合、<h1>（見出し）タグで囲まれているので、テキストは見出しとして表示されます。
タグの呼び方
- 開始タグ：<h1>
- 終了タグ：</h1> （ / が入っている）
この2つのタグで囲むことによりテキストがマークアップされます。タグに囲まれたテキストが、そのタグの要素を持つことになるということです。
タグの様々な要素
- 段落：<p>
- リンク：<a>
- リスト：<li>
- 画像：<img>
などなど、様々な目的を持つ要素があります。普段からよく使うものはそれほど多くなく、20種類もないくらいです。すぐに覚えなくても、使っていくうちに覚えてきますので安心してください。
例えば、前述した見出しですが、<h1><h2>・・・<h6>まであります。<h1>から<h6>に向かってだんだん小さくなっていきますが、見出しという要素に変わりはありません。
プログラミングに必要なもの
- テキストエディター
- ブラウザ
- サーバー
- FTPソフト
- 折れない心
1～4については、すでにご準備いただいているかもしれません。もしまだの場合は、以下の記事が参考になります。
コアースのブログ
5については…、あまり難しく考えずとにかくやってみることが大切だと思います。すべてを理解する意気込みよりも、全体像をイメージするくらいの向き合い方でやっていくなら”折れずに”楽しめると思います。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第1回】はいかがでしたか。ウェブサイト制作におけるプログラミングとは何か、プログラミング言語の基本であるHTMLについてかんたん解説してきました。
次回は、HTMLのタグのいくつかについて、リンクやリストや画像などの要素を取り上げていきます。難しくないので、気楽な気持ちでご覧ください。そうしているうちにプログラミングの基礎をいつの間にか理解していると思いますよ。
次回をお楽しみに！