- 更新日: 2020年9月1日
- 公開日: 2020年8月29日
初心者向け！HTMLの特徴とすぐ使えるコード7選
この記事では、HTMLでWebページを作りたい初心者に向けて解説しています。
- 「HTMLってどうやって使うの？」
- 「何か必要なものはある？」
- 「そもそもHTMLで何ができるの？」
HTMLに興味があるけど、どこからどう始めていいか分からないですよね。
そこでHTMLを学び始めるために、大きく以下4つをご紹介します。
- HTMLの特徴
- 必要なソフトと使い方
- HTMLのテンプレート
- すぐ使えるコード7選
また効率良く学習できるように、記事で紹介しているコードはコピー可能です。ぜひ活用してみてください！
HTMLとは？
HTMLとは、Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）の略で、Webページの見た目部分を作っている言語です。
「って言われてもなんのこと？」って感じですよね。
たとえば、今見ているこのページもHTMLで作られています。ページの一番上にある写真も、その少し下にある目次も、今読んでくれてるこの文字も、です。
リンクの色や、見出しの左にあるオシャレな縦棒などのデザインは、”CSS”で設定しています。HTMLでは表示させたい文字などを”タグ”で囲み、CSSではその文字に色をつけたり、透けさせたりしてデザイン。こうしてWebページは作られていきます。
必要なものは2つだけ
まずは”ブラウザ”と”テキストエディタ”さえあれば準備OKです。おすすめは以下。
■ブラウザ
■テキストエディタ
テキストエディタでソースコードを書き、ブラウザで書いたコードを表示します。紹介したものはすべて無料なので、ぜひ書きながら読み進めてみてください！
タグの書き方と保存のルール
ここではHTMLで必須の知識、”タグ”と”拡張子”を解説します！
タグの書き方
HTMLでなにか文字を表示させたいとき、”開始タグ”と”終了タグ"で囲むルールがあります。
具体的には、以下のように囲めばOKです。
<h1>表示させたいもの</h1>
ただ、中には終了タグが必要ないコードもあるので注意が必要です。
保存のルール
HTMLのファイル名には、".(ドット)html"を付けるようにしましょう。".html"は拡張子と呼ばれ、PCやブラウザがHTMLファイルだと認識するための手がかりとなります。
テンプレート付き！HTMLの文書構造
ここからは、HTMLファイルの文書構造を見ていきましょう！
まずは以下にテンプレートを用意しました。テキストエディタにコピペして、使ってみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブラウザタブに表示される文字</title>
</head>
<body>
<h1>CodeCampus</h1>
</body>
</html>
<!DOCTYPE html>
<!DOCTYPE html>
<!DOCTYPE html>は"文書型宣言"と呼ばれ、HTMLの最新バージョン"HTML5"を宣言するタグです。HTMLファイルの1行目には必ず記述します。
< html >< /html >
<html lang="ja"></html>
HTMLに使う全てのタグは、< html >〜< /html >の中に記述します。また、ブラウザに日本語を認識させるためにはlang=”ja”を記述します。
< head >< /head >
<head>
<meta charset="UTF-8">
<title>ブラウザタブに表示される文字</title>
</head>
< head >〜< /head >の中には、そのページ関する様々な情報を記述します。たとえば以下のようなものがあります。
- ブラウザタブに表示するページタイトル
〜 - 文字コード
- CSSファイルのリンク
< head >〜< /head >の中に記述されたものは、ブラウザには表示されません。
< body >< /body >
<body>
<h1>CodeCampus</h1>
</body>
< body >〜< /body >の中には、ブラウザで表示させたいものを記述します。
HTMLファイルをブラウザに表示
もしかしたら、もうコードを書き始めている方もいるかと思います。ここでは先に、ブラウザで表示する方法を紹介しておきますね！
やり方はカンタン。テキストエディタのタブをブラウザのタブに向けて、ドラッグ&ドロップするだけ。
まだコードを打っていない方は、先ほど紹介したテンプレを使ってみてください。以下では、Visual Studio CodeとGoogle Chromeを例に解説します。
テキストエディタ側のタブをドラッグ。
そのままブラウザのタブ部分に向けてドロップ。
試しにブラウザ内で右クリックし、”ページのソースを表示”を選択してみてください。今書いたコードが、ちゃんと表示されたかと思います。
すぐ使えるHTMLタグ7選
ここからは、< body >〜< /body >の中で使えるタグを7種類ご紹介します！
< h1 >〜< h6 >タグ
< h1 >〜< h6 >は見出しを作るためのタグです。< h1 >が１番大きく、数字が大きくなるほどサイズが小さくなります。ただ、< h1 >は記事1番上のタイトルに使われることが多いので、例外を除いて< h1 >を2回以上使うのはおすすめしません。
<h1>CodeCampus</h1>
<h2>CodeCampus</h2>
<h3>CodeCampus</h3>
<h4>CodeCampus</h4>
<h5>CodeCampus</h5>
<h6>CodeCampus</h6>
■ブラウザ表示
< p >タグ
< p >はParagraph(パラグラフ)の略で、段落を表示させるタグです。ブログやメディアなどの文章で繰り返し使われるタグです。
<p>段落</p>
< ul >< ol >< li >タグ
< ul >< ol >< li >は箇条書きを表すタグです。< ul >と< li >のペアか、< ol >と< li >のペアで使われます。< ul >は"・"、< ol >は数字の箇条書きを表します。
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
■ブラウザ表示
<ol>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ol>
■ブラウザ表示
< a >タグ
< a >はリンクを表示させるタグです。< a >< /a >の中には表示させたい文字、href=”URL”(href属性)の中には、その文字をクリックした時に飛ぶURLを入力します。
<a href="https://blog.codecamp.jp/">CodeCampus</a>
■ブラウザ表示
< img >タグ
< img >は画像を表示させるタグです。src=”ファイルパス”(src属性)の中には、読み込む画像ファイルのパスを入力します。HTMLファイルと同じフォルダに画像ファイルが入ってる場合は、画像ファイル名を入力するだけでOKです。また、< img >には終了タグがない点に注意してください。
<img src="computer_programming_woman-1.png">
■ブラウザ表示
< div >とclass属性
< div >は、複数のタグを1つのグループにまとめるためのタグです。
<h1>CodeCampus</h1>
<div>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
■ブラウザ表示
画面上部は< h1 >、その下には< div >でグループ化した< ul >を表示させましたが、これだけでは特に変化はなさそうですね。
そこで< div >にclass属性を付けて、そのclass属性に”文字色をskyblueにするCSS”を設定してみます。
<h1>CodeCampus</h1>
<div class="group">
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</div>
■ブラウザ表示
< h1 >に影響を与えず、< ul >だけデザインを設定できました。
class属性とは名札のようなもので、同じ名札がついているタグは、CSS側でまとめてデザインできます。書き方はclass=”クラス名”で、クラス名には好きな名前を入力可能です。
＼一流デザイナーのスキルが身に付く／
まとめ
この記事では、以下を中心にHTMLをご紹介しました。
- HTMLの特徴
- 必要なソフトと使い方
- HTMLのテンプレート
- すぐ使えるコード7選
HTMLは非常に習得しやすい言語なので、初心者でもすぐ使えるようになります。楽しく学びながら、ぜひサイト作りに挑戦してみてください！
- この記事を書いた人
- 佐藤恭平
