コンテンツへスキップ

はじめてのHTML

Hello HTML

HTMLは「Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ランゲージ）」の略で、Webサイトを作るための土台となる言語です。

Webサイトに載せる文章や写真、リンクボタンなど基本的な情報を表示するのにHTMLを使ってコンピュータにわかるように指示します。

HTMLを書くのに必要なもの

エディタを用意する

エディタはHTMLなどのコードを書くのに必要なツールです。

エディタは拡張子が html で保存できるものならメモ帳などでも構いませんが、コードを書くより文章を書くことに趣をおいており、HTMLを作成するにはあまりオススメできません。

おすすめのエディタ

エディタはコードを書くために作られたものを選びましょう。様々な種類がありますが、無料のものでも十分使えます。

無料のものならGitHubが開発した Atom がおすすめです。

Atom：https://atom.io/

有料のものはWeb制作会社でも多く使われているAdobeの DreamWeaver がおすすめです。

Dreamweaver：https://www.adobe.com/jp/products/dreamweaver.html

作ったHTMLを確認する

ブラウザを用意する

ブラウザとはWebサイトを閲覧するためのソフトです。

オススメのブラウザ「Google Chrome」

Googleが開発した Google Chrome は世界で最もシェアがあるブラウザでおすすめです。このブラウザでWebサイトを見られる人が多いということは、Chromeを基準としたWebサイトを構築するのが良いです。

Google Chrome：https://www.google.com/intl/ja/chrome/

その他にFirefox、Safari、Microsoft Edge、Internet Explorerなども有名です。

スマホの場合はそれぞれ標準搭載されているブラウザが良く使われます。iOS (iPhone) ではSafari、AndroidではGoogle Chromeが良く使われます。

HTMLの書き方

HTMLは「 < 」や「 > 」で挟まれた「タグ」と呼ばれる特殊な文字列を使いWebサイトに文章などを表示しています。

ファイル名の付け方

HTMLの拡張子は .html です。HTMLを保存する場合は 〇〇〇〇.html のような形にします。

ファイル名には英数小文字と一部の記号しか使えません。空白(スペース)や日本語は使えません。記号は「 – (ハイフン) 」と「 _ (アンダースコア) 」を使うようにするのが良いです。

HTMLの基本構造

以下のコードはHTMLの基本的な構造です。一つ一つのタグを説明していきます。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="description" content="説明文">
<link rel="stylesheet" href="style.css">
</head>

<body>
</body>
</html>

 

<!doctype> はドキュメントタイプの宣言です。そのページがどのバージョンのHTMLでどの仕様に合わせて作られているかを書いています。<!doctype html> このようにhtml以外に特に指定がない場合はHTML5のドキュメントタイプを指します。

<html> 〜 </html> はHTMLの文章だということを表しています。 <html lang=”ja”> このlangは言語を指し、jaはJapaneseの略で日本語を意味します。つまり日本語の文章であることを示しています。

<head> 〜 </head> この部分はページのタイトルや説明文、外部ファイルのリンク、ページの情報を記述します。ブラウザーには表示されない部分です。

<meta chartset="UTF-8"> これは「UTF-8」という文字コードを指定しています。これがないと文字化けなど起きることがあるので必ず指定します。metaは「メタ要素」と言い、そのページに関する情報を指定します。

<title> 〜 </title> ここにページタイトルを記述します。

<meta name="description" content="説明文"> ここにページの説明を書きます。

<link rel="stylesheet" href="style.css"> CSSファイルの指定です。rel属性に「stylesheet」、href属性にCSSファイルを指定することでCSSファイルに書かれた装飾を反映することができます。

<body> 〜 </body> HTML文章の本体部分です。この中に記述するとブラウザ上に表示されます。

次回は実際にHTMLを書いていきましょう。

HTMLタグ一覧
タグ: