【初心者ノート】HTML5 CSS3の基礎をしっかり学ぶ

カンプイメージ

WEBデザインの基本HTML5CSS3について、実際に練習用ページを作りながら入門者向けにまとめてみたいと思います。

はじめに

HTML/CSSW3Cという非営利組織が標準化をしています。1994年の発足以来、何度かバージョンが更新され、2017年に 勧告されたHTML 5.2CSS3が当記事執筆時点(2019年)の最新バージョンです。

当記事ではHTML5.2CSS3を使って説明します。なお記事内での表記はHTMLCSSとします。

1章 WEBページ作成の準備

HTMLCSSを使ってWEBページを作成するためには、パソコン上にテキストエディタブラウザが必要です。

テキストエディタ

テキストエディタは、HTMLファイルとCSSファイルを記述するために必要です。
テキストエディタにはたくさんの種類があります。

仕事などで本格的にWEBページを作るのであれば高機能なエディタが作業効率を高めてくれます。
学習用にはそれほど高機能のものでなくても大きな問題はありませんし、高機能であることが使い方を難しくすることもあります。

よく知られているエディタには次のようなものがあります。

  • メモ帳(Windows標準添付)
    極めて基本的な機能のみ。
  • サクラエディタ(無料)
    WEBデザイン技能検定(国家資格)の実技試験で使われている。
    HTMLソースの中のキーワードごとにハイライト表示(色分け)などをしてくれる。
  • TeraPad(無料)
    WEBデザイン技能検定(国家資格)の実技試験で使われている。
    HTMLソースの中のキーワードごとにハイライト表示(色分け)などをしてくれる。
  • その他
    SublimeText、秀丸エディタ(シェアウェア)などなど多数あり。

ブラウザ

ブラウザにもいくつかの種類があります。

これも学習の際にはどれを使っても差し支えありません。
オススメGoogle Chromeですが、新たにインストールするのが面倒であれば、EdgeかInternet Explorerで十分です。

  • Microsoft Edge(Windows標準添付)
  • Google chrome
    世界シェアNo.1。オススメ。
  • Firefox
    開発ツール(レイアウトを確認するときなどに使う)が日本語対応している
    動作が少々遅い。
  • Internet Explorer(Windows標準添付)
    Microsoftが開発を止めたので、間もなく無くなる見込み。

2章 WEBページ作成の流れ

WEBページ(WEBサイト)は、次のような流れでを作ります。

  1. WEBページの構成を決める
  2. コンテンツ(文章、画像などの素材)を準備する
  3. HTMLでマークアップする
  4. スタイルシート(CSS)でレイアウトや飾り付けを行う

まずは自分で作ったHTMLがブラウザで表示されることを体感するために、トップページを作ってみましょう。

WEBページの構成を決める

WEBページを作るときは、頭の中に描いたものをそのままHTMLに記述するというのは難しいものです。

紙に手書きでもいいので、出来上がりのイメージを目に見える形にしましょう。


ここでは、架空の観光情報サイトを想定してWEBページ(サイト)を作ります。

カンプイメージ

コンテンツを準備する

構成が決まったら、WEBページに載せるコンテンツ(文章、画像などの素材)を準備しましょう。

文章だけのWEBページでもいいですが、見る人に伝わりやすくするため一般的には文章画像を掲載します。

文章はあとでHTMLファイルにしますので、テキストエディタワープロなどで作ります。

画像はデジタルカメラやスマートフォンで撮った写真をパソコンに取り込めば、WEBページに掲載できます。
インターネットで見つけた画像を利用することも可能ですが、著作権には十分注意しましょう。


先ほど想定した各ページに掲載するコンテンツ(文章や写真)を準備します。

ここでコンテンツに使用する文章例は次のとおりです。

HTMLでマークアップする

テキストエディタで文章を作成したら、いよいよHTMLマークアップします。

マークアップというのは、文章の中にある見出しや段落などについて、適切な意味を持つHTMLタグをつけていくことです。
習うより慣れろということで、まずは1つのコンテンツマークアップしてみましょう。

エディタを開いて「名前を付けて保存」でindex.htmlというファイルを作成します。
保存するときは必ず文字コードを「UTF-8」にしてください。

次に基本的なHTMLの記述を書きます。
HTMLには、必ず書いておく決まり文句のような記述があります。

3章 HTMLファイルを作ってブラウザで表示する

WEBページの構成と素材準備ができましたので、HTMLでマークアップしていきます。

具体的なマークアップ作業に先立ち、まずはHTMLファイルを作ります。

HTMLの決まり文句

エディタで次のHTMLを入力します。

これらのコードはHTMLのファイルを作るときの決まり文句と考えてください。
(※GoogleのHTML/CSSのコーディングガイドラインでは、省略できるタグは省略することが推奨されていますが、学習目的のためここではタグの省略をしません。)

それぞれのHTMLの意味は次のとおりです。

HTMLの決まり文句

DOCTYPE宣言

これから書くコードがHTML5であることを宣言します。

html

WEBページの内容記述に日本語を使うことを宣言します。
最後の</html>でこの要素の終了を表します。

head

<head>から</head>の間にページに関するメタデータ(文書情報)を記述します。
あとで出てくる<header>と混同しやすいので注意してください。

meta

書かれている文字コードutf-8であることを示します。
文字コードには utf-8 以外にも shift-jis などがありますが、WEBページ作成においては事実上の世界標準である utf-8 を使用します。
言語(日本語とか英語とか)とは違いますので混同しないでください。

title

<title></title>の間にページのタイトルを書きます。
タイトルは、ブラウザのタグに表示されます。

一般的なWEBサイトのタイトルは次のように設定されています。

link

使用する外部ファイルを指定します。
ここではスタイルシート(CSS)ファイルのファイル名が「style.css」であることを表しています。

body

<body>から</body>の間に、実際にブラウザに表示されるコンテンツ(文章や写真などの中身)を記述します。

ブラウザに表示してみる

決まり文句だけを入力し終わったらHTMLファイル(index.html)を上書き保存し、エクスプローラーでこのファイルをダブルクリックします。

ブラウザでの空のhtmlを表示

この時点では、HTMLファイルの<body></body>の間にコンテンツの中身について何も書かかれていませんので、ブラウザには何も表示されません。

タイトルを入れる

title要素、<title>と</title>の間に、ブラウザのタグに表示させるタイトルを記述します。
ここでは次のように「Sinformation – シンガポールの観光情報」と記述します。

コンテンツを入れる

index.htmlの<body>から</body>の間に、このページに入れる文章を入力します。

入力が終わったら保存して、ブラウザで表示してみましょう。

htmlとブラウザでの表示

head要素にある<title></title>の間に書かれたタイトルがブラウザ上部のタグに表示されました。
そしてブラウザの画面には、<body></body>の間に書かれた文章が表示されています。

ここまでのまとめ

いかがでしたか?
まだ記事のマークアップをしていませんが、HTMLファイルを作成してブラウザで表示するところまでを説明しました。

ここまでのまとめです。

  • HTML、CSSはW3Cによって規格が決められている。
  • HTML、CSSを使ってWEBページを作成するには、テキストエディタとWEBブラウザが必要。
  • WEBページ作成の流れは、構成を決める、コンテンツを準備する、HTMLでマークアップする、スタイルシートで飾り付けをする、である。
  • HTMLは、どのWEBページにも記述する決まり文句がある。

次回は具体的にHTMLマークアップをしてみましょう。

スポンサーリンク

シェアする

フォローする

スポンサーリンク