初心者向け!HTMLの特徴とすぐ使えるコード7選



初心者向け!HTMLの特徴とすぐ使えるコード7選

この記事では、HTMLでWebページを作りたい初心者に向けて解説しています。

  • 「HTMLってどうやって使うの?」
  • 「何か必要なものはある?」
  • 「そもそもHTMLで何ができるの?」

HTMLに興味があるけど、どこからどう始めていいか分からないですよね。

そこでHTMLを学び始めるために、大きく以下4つをご紹介します。

  • HTMLの特徴
  • 必要なソフトと使い方
  • HTMLのテンプレート
  • すぐ使えるコード7選

また効率良く学習できるように、記事で紹介しているコードはコピー可能です。ぜひ活用してみてください!

目次
  1. HTMLとは?
  2. 必要なものは2つだけ
  3. タグの書き方と保存のルール
  4. タグの書き方
  5. 保存のルール
  6. テンプレート付き!HTMLの文書構造
  7. <!DOCTYPE html>
  8. < html >< /html >
  9. < head >< /head >
  10. < body >< /body >
  11. HTMLファイルをブラウザに表示
  12. すぐ使えるHTMLタグ7選
  13. < h1 >〜< h6 >タグ
  14. < p >タグ
  15. < ul >< ol >< li >タグ
  16. < a >タグ
  17. < img >タグ
  18. < div >とclass属性
  19. まとめ

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、Webページの見た目部分を作っている言語です。

「って言われてもなんのこと?」って感じですよね。

たとえば、今見ているこのページもHTMLで作られています。ページの一番上にある写真も、その少し下にある目次も、今読んでくれてるこの文字も、です。

リンクの色や、見出しの左にあるオシャレな縦棒などのデザインは、”CSS”で設定しています。HTMLでは表示させたい文字などを”タグ”で囲み、CSSではその文字に色をつけたり、透けさせたりしてデザイン。こうしてWebページは作られていきます。

必要なものは2つだけ

まずは”ブラウザ”と”テキストエディタ”さえあれば準備OKです。おすすめは以下。

■ブラウザ

■テキストエディタ

テキストエディタでソースコードを書き、ブラウザで書いたコードを表示します。紹介したものはすべて無料なので、ぜひ書きながら読み進めてみてください!

タグの書き方と保存のルール

ここではHTMLで必須の知識、”タグ”と”拡張子”を解説します!

タグの書き方

HTMLでなにか文字を表示させたいとき、”開始タグ”と”終了タグ"で囲むルールがあります。

image

具体的には、以下のように囲めば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を例に解説します。

テキストエディタ側のタブをドラッグ。

image

そのままブラウザのタブ部分に向けてドロップ。

image

試しにブラウザ内で右クリックし、”ページのソースを表示”を選択してみてください。今書いたコードが、ちゃんと表示されたかと思います。

すぐ使えるHTMLタグ7選

ここからは、< body >〜< /body >の中で使えるタグを7種類ご紹介します!

< h1 >〜< h6 >タグ

< h1 >〜< h6 >は見出しを作るためのタグです。< h1 >が1番大きく、数字が大きくなるほどサイズが小さくなります。ただ、< h1 >は記事1番上のタイトルに使われることが多いので、例外を除いて< h1 >を2回以上使うのはおすすめしません。

 <h1>CodeCampus</h1>
 <h2>CodeCampus</h2>
 <h3>CodeCampus</h3>
 <h4>CodeCampus</h4>
 <h5>CodeCampus</h5>
 <h6>CodeCampus</h6>

■ブラウザ表示

image

< 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>

■ブラウザ表示

image

 <ol>
   <li>箇条書き</li>
   <li>箇条書き</li>
   <li>箇条書き</li>
 </ol>

■ブラウザ表示

image

< a >タグ

< a >はリンクを表示させるタグです。< a >< /a >の中には表示させたい文字、href=”URL”(href属性)の中には、その文字をクリックした時に飛ぶURLを入力します。

 <a href="https://blog.codecamp.jp/">CodeCampus</a>

■ブラウザ表示

image

< img >タグ

< img >は画像を表示させるタグです。src=”ファイルパス”(src属性)の中には、読み込む画像ファイルのパスを入力します。HTMLファイルと同じフォルダに画像ファイルが入ってる場合は、画像ファイル名を入力するだけでOKです。また、< img >には終了タグがない点に注意してください。

<img src="computer_programming_woman-1.png">

■ブラウザ表示

image

< div >とclass属性

< div >は、複数のタグを1つのグループにまとめるためのタグです。

<h1>CodeCampus</h1>
<div>
  <ul>
    <li>箇条書き</li>
    <li>箇条書き</li>
    <li>箇条書き</li>
  </ul>
</div>

■ブラウザ表示

image

画面上部は< h1 >、その下には< div >でグループ化した< ul >を表示させましたが、これだけでは特に変化はなさそうですね。

そこで< div >にclass属性を付けて、そのclass属性に”文字色をskyblueにするCSS”を設定してみます。

<h1>CodeCampus</h1>
 <div class="group">
   <ul>
     <li>箇条書き</li>
     <li>箇条書き</li>
     <li>箇条書き</li>
   </ul>
 </div>

■ブラウザ表示

image

< h1 >に影響を与えず、< ul >だけデザインを設定できました。

class属性とは名札のようなもので、同じ名札がついているタグは、CSS側でまとめてデザインできます。書き方はclass=”クラス名”で、クラス名には好きな名前を入力可能です。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

この記事では、以下を中心にHTMLをご紹介しました。

  • HTMLの特徴
  • 必要なソフトと使い方
  • HTMLのテンプレート
  • すぐ使えるコード7選

HTMLは非常に習得しやすい言語なので、初心者でもすぐ使えるようになります。楽しく学びながら、ぜひサイト作りに挑戦してみてください!

関連記事

佐藤恭平
この記事を書いた人
佐藤恭平
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp