体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

まずはここから!HTMLの書き方【初心者向け】

HTMLの基礎がわかったら、HTMLの書き方について覚えていきましょう。本記事は、初心者向けに、基礎となるHTMLの書き方を解説した記事です。

HTMLでは、文字列にタグで性格付けを施すことで全体を構造化していきます。

 

本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。(動画は2つに分かれています)

 

タグの書き方

タグを書く際はまず「」を書き、その間に性格を指定する要素名を入れ、「」を作ります。それをコピペして「」と、2つ並べます。(タグでは、基本的に半角記号を使います。間違って全角を使わなように、なるべくコピペして書きましょう)

それから、2つ目の「」に「/」を加え、「」という形にします。このとき、「」を開始タグ、「」を終了タグといいます。

そして、文字列は、開始タグと終了タグのあいだに最後に書くようにしてください。

 

たとえば、文書のなかに見出しを作りたいときは、「hタグ(h=headerの意)」を使って次のように書くことができます。

HTMLの書き方

 

要素とは

HTML要素には、現在100を超える種類があります。代表的なものをいくつか紹介しましょう。
h1 – 見出し(h1,h2,h3,h4…と、数が大きくなるほど見出しは小さくなります)
a – リンク
p – 段落
ul,li – 箇条書き

 

なかには、開始タグのみでタグを作ることができるものもあります。
img – 画像を表示する
br – 改行
hr – 線を引く

 

属性と値

また、要素は、その特性や状態などを示すために属性を指定することもできます。属性は、開始タグの要素名の後に半角スペースで区切って書き入れ、さらに、その程度を値で調整することができます。

 

例えば、a(アンカー)タグでは下記のように記述します。

TechAcademy

 

HTMLを書いてみよう

これまでの書き方を踏まえて、実際にコードを書いてみます。

ここでは、テキストエディタに「mi」を使っています。

HTMLの書き方

HTMLの書き方

はじめてのHTMLを作りました

 

それぞれのタグについて解説していきます。

 

一番上のはドキュメントタイプといい、このHTMLファイルがどのバージョンを使って書かれているかを宣言するものです。これがないとHTMLファイルとして認識されないので、必ず書く必要があります。

ちなみに、は、HTML5のバージョンを使っていることを意味します。

 

HTMLのタグは、基本的に入れ子構造です。タグのなかに別のタグを入れ、さらにそのなかに別のタグを入れ…といった具合に書き込んでいくことができます。

ロシアのマトリョーシカをイメージしていただくとわかりやすいと思います。

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。