初心者のためのHTML・CSS入門講座【HTML編】

今回は、Webサイトを制作する上で必要となる知識、HTMLとCSSの入門講座です。

かなり気合い入れて書いたので、中身は充実しているはずです。

HTMLを一から学びたい超初心者はぜひ読んでみて下さい。

そもそもHTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための言語です。マークアップ言語と呼ばれます。

Webで閲覧できるサイトはHTMLで作られています。このサイトもそうです(厳密にはPHPという言語で作られていますが、最終的にはHTMLで出力されている)。

この記事では詳しく書きませんが、CSSというマークアップ言語もあります。

CSSは、HTMLで組まれたサイトのレイアウトを組んだり、色を変えたり、文字とか画像などサイズを変えたり、サイトの装飾に利用されます。

HTMLで土台となる骨組みを作って、CSSで装飾していくのです。基本的に99%くらいのサイトはCSSが使われているので、HTMLとCSSはセットだと思って下さい。

HTMLを見てみよう

このサイトで右クリック→「ページのソースを表示」をクリックしてみましょう。

なにやら訳の分からない文字が出てくると思います。これがHTMLです。

「難しそう」と思うかもしれませんが、慣れればそこまで難しくありません。

それに、全て一つ一つ手打ちしている訳ではなく、自動で出力されるプログラムを使ったり、よく使う部分はコピペしたりもします。全て完璧に理解できなくても大丈夫です。

HTMLを書く準備

テキストエディタの用意

HTMLを始める前に、まずはテキストエディタを用意しましょう。

テキストエディタというのは文書を作成するソフトで、最も有名なのがWindowにデフォルトで入っているメモ帳です。

HTMLやCSSはテキストエディタで記述します。

メモ帳でもHTMLを記述・編集することができますが、機能がなさすぎて不便です。

私がおすすめするのは、Visual Studio Code(VSCode)です。

開発元がMicrosoftで、日本語メニューなのが魅力です。難しい初期設定とかもありません。

Visual Studio Code

今回はVSCodeのみの紹介ですが、他にも色々なテキストエディタが存在するので、時間がある時に試してみて下さい。

ブラウザ

もしGoogle Chromeを入れていないのであれば、必ず入れて下さい。

Google ChromeにはDeveloper Toolsという便利な機能があります。他のブラウザよりも高機能ですので、かなりおすすめです。

Web制作において、Google ChromeのDeveloper Toolsを使わないというのは考えられません。

それでは実際にHTMLを書いてみましょう。

フォルダを用意

デスクトップに新規フォルダを作成して下さい。名前は「sample」としましょう。

フォルダは後程使いますので、今の所はこれでOKです。

HTMLの基礎

HTMLは基本的に、開始タグと終了タグで囲んで記述します。

<p>こんにちは</p>

<p>と</p>がHTMLのタグになります。HTMLのタグは半角で記述します。全角で書くとエラーになります。

</p>のように、終了タグには/(スラッシュ)が入ります。

また、<p></p>で囲まれた要素をp要素と呼びます。p要素は段落を意味します。

その他の要素については後から詳しく説明します。

<タグ> </タグ>

タグで囲まれた部分を要素と呼ぶ。

実際にHTMLを書いてみよう

それでは、実際にHTMLを書いてみましょう。

VSCodeをインストールしたら、「ファイル」→「新規ファイル作成」で新規ファイルを作成してください。

<!DOCTYPE html>

これはHTMLの文書であるという宣言です。今のHTMLはバージョンが5.2です。

HTML4.01やXHTMLの頃はもっと長い宣言文を書かなくてはいけませんでした(コピペしてたけど)。HTML5になってから宣言がかなり短くなりました。

vscode

ここで「Ctrl」+「S」(Macなら「Command」+「S」)を押して保存をしてください。

名前を「index.html」に変更して、先ほど作った「sample」フォルダに保存します。

保存後はこんな感じの表示になります。

「.html」という拡張子で保存すると、VSCodeは自動的にこのファイルが「HTML」ファイルだと認識してくれます。

それでは次に進みます。

<!DOCTYPE html>
<html>
</html>

宣言の後、html要素で全体を囲みます。

<!DOCTYPE html>
<html lang="ja">
</html>

lang=”ja” というのが出てきました。これは属性とその値になります。

属性の直前は半角スペースを開けて、属性名と値をイコールでつなげます。

<!DOCTYPE html>
<html lang="ja">
<head>

</head>
</html>

お次はhead要素が出てきました。head要素の中身はブラウザ上には表示されません。Webサイトに必要な情報を記述します。ヘッドなので脳みそみたいなものです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
</html>

meta要素はサイトの情報を定義するために使われます。

<meta charset="utf-8">

utf-8(UTF-8)というのは文字コードの一種です。文字を表示するだけでも、色々な規格があるということだけ覚えておいて下さい。

他にもShift-JISなどがありますが、ほとんどのサイトがUTF-8で作られています。というかUTF-8以外にすると文字化けになる可能性が高いので、大人しくUTF-8を使っておきましょう。

<title>ページのタイトル</title>

これはブラウザのタブの部分に表示されるタイトルです。他にもGoogle検索の検索結果にも使われます。

ここまで出来たら一旦保存して下さい。

そして、「sample」フォルダを開いて、index.htmlを右クリックして、「プログラムから開く」のGoogle Chromeを選択して下さい。もしくはブラウズに直接ドロップしてください。

ウィンドウ内にはまだ何も表示されませんが、タブにタイトルが出ているはずです。

これでHTMLコードが反映されているのが分かるでしょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>

</body>
</html>

お次はbody要素です。

body要素は文書の中身を表しています。この中に書いたコードがブラウザ上に表示されます。

ここからは実際にブラウザに表示させてみます。

見出し(h1~h6)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
  <h1>一番大きな見出し</h1>
</body>
</html>

h1~h6は見出し(英語でheading)を表します。

基本的にh1は一つのページに一回だけ使います(例外もあります)。

そして、章ごとにh2(大見出し)を付けていくイメージです。

構造的にh2の次にh4が来る構成は厳密には正しくありません。上の図のようにh1→h2→h3という構造を意識して使いましょう。

この記事の目次を見てもらえれば、分かるかと思います。

インデント

先ほどのコードを見てみると、<h1>一番大きな見出し</h1>の前にスペースが二つ分入っています。

このように、字下げをすることでHTMLの構造を分かりやすくしてコードを見やすくすることをインデントと言います。

インデントの仕方は人にもよりますが、私はスペース二つ分空けています。

段落を表すp要素

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
  <h1>一番大きな見出し</h1>
  <p>ここにテキストが入ります。</p>
</body>
</html>

先ほども出てきましたが、段落を表すのがp要素です。WordPressとかブログサービスで文章を書くと、p要素で文章が囲まれて出力されます。ブログを書く人にとってはお馴染みの要素です。

たまに改行のためにp要素で囲むと勘違いしている人がいますが、改行には<br>タグを使います。

逆に、段落を分けるために<br>を連発する人もいますが、これも正しくありません。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
  <h1>一番大きな見出し</h1>
  <p>ここにテキストが入ります。<br>brタグを使って、テキストを改行します。</p>
</body>
</html>

 

コメントアウト

以下のコードを見て下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>一番大きな見出し</h1>
<p>ここにテキストが入ります。<br>brタグを使って、テキストを改行します。</p>
<!-- ここにあるHTMLコードやテキストは無視されます。 -->
</body>
</html>

見慣れない記述がありますね。

<!-- ここにあるHTMLコードやテキストは無視されます。 -->

<!- - と - -> で囲まれた部分は表示されません。ブラウザから無視されます。
これをコメントアウトと言います。

コードのついてメモや説明を書いたり、後で表示させるけど一旦非表示にしたりする時に使います。

リストの表示

次はHTMLを使ってリストを表示させてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
  <h1>一番大きな見出し</h1>
  <p>ここにテキストが入ります。<br>brタグを使って、テキストを改行します。</p>
  <!-- ここにあるHTMLコードやテキストは無視されます。 -->
  <h2>リストを書いてみよう</h2>
  <p>買う物リスト</p>
  <ul>
    <li>マヨネーズ</li>
    <li>醤油</li>
    <li>塩</li>
  </ul>
</body>
</html>

リストには、ul要素とol要素があります。

ul要素は順番に特別な意味がない場合に使います。買う物リストの順番が変わっても、特に支障はありません。

ol要素は順番に意味がある場合に使います。例えば、ランキングのリストです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
  <h1>一番大きな見出し</h1>
  <p>ここにテキストが入ります。<br>brタグを使って、テキストを改行します。</p>
  <!-- ここにあるHTMLコードやテキストは無視されます。 -->
  <h2>リストを書いてみよう</h2>
  <p>買う物リスト</p>
  <ul>
    <li>マヨネーズ</li>
    <li>醤油</li>
    <li>塩</li>
  </ul>
  <p>日本の高い山ランキング</p>
  <ol>
    <li>富士山</li>
    <li>北岳</li>
    <li>奥穂高岳</li>
  </ol>
</body>
</html>

とまあ、HTMLには他にも要素がいっぱいあるのですが、今回は使用頻度の高い要素を紹介してみました。

このページは今後も追加して充実させていくつもりです。

入門レベルではない要素については、別記事で書いて行こうと思います。

画像の表示

HTMLを書く前に画像を用意して欲しいのですが、ない方は下記のフリー素材サイトから何かダウンロードしてください。試すだけなので、一番小さいサイズで大丈夫です。

ぱくたそ

次に、sampleフォルダに新しく「img」というフォルダを作成して、その中にダウンロードした画像を保存してください。そして、画像を「image-test.jpg」という名前に変更してください。

そして、HTMLを以下のように編集してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページのタイトル</title>
</head>
<body>
 <h1>画像を表示</h1>
 <img src="img/image-test.jpg" alt="色とりどりのチューリップ">
</body>
</html>

src属性で、保存されている画像を指定します。「img/image-test.jpg」というのは、「img」フォルダの中にある「image-test.jpg」というファイルを指定しています。

alt属性は、何かしらの理由で画像がうまく表示されない場合、代替のテキストを表示させるために記述します。意外と知らない人も多いのですが、必須の属性です。

私はチューリップの画像をダウンロードして、以下のように表示させました。

簡単ですね。表示されない場合は、フォルダの名前やファイル名が間違っているパターンが多いので確認して下さい。

まとめ

HTMLを試してみた感想はどうでしょうか?意外と簡単だったのではないでしょうか?

そうです、HTMLはそこまで難しくありません。時間がある時に試しにHTMLを書いて、ブラウザに表示させてみて下さい。

次はCSSの使い方を紹介します。楽しみにしていてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です