スキル

【初心者向け】HTMLとCSSでコーディング!ゼロから徹底解説!

ウェブ制作において欠かせない工程の一つが「コーディング」です。プログラミングを意味する言葉の一つですが、最近ではプログラマーだけでなく、ウェブのデザイナーにも、「コーディング能力」が求められるようになりました。

しかし「コーディングを学ぶには何から手を付けたら良いのかわからない」という人も少なくないはずです。そこで今回は、初心者の方を対象にして、コーディングの意味やルール、コーディングの方法と手順をまとめました。

これを読めば、コーディングの基礎がわかるだけでなく、さらに詳しい内容まで知りたくなってくるはずです。

HTMLとCSSで行うコーディングとは?

HTMLとCSSで行うコーディングを解説するにあたり、まず「コーディングとは何か」という意味をしっかりおさえましょう。プログラミングとコーディングは「同じ意味では?」と思われがちですが、厳密には異なります。順番に説明しましょう。

コーディングはプログラミングと違う?

「プログラミング」の作業には、様々な工程があります。たとえば「プログラムの設計」「プログラム言語の記述」「テストの実行」「バグの修正」といった流れです。この流れを繰り返すことによって、プログラムが完成へと近づきます。

これらの工程のうち「プログラム言語の記述」にあたるのが「コーディング」です。つまりコーディングは、「プログラミング過程の中にある一部分」ということになります。

コーディングにおけるHTMLとCSSとは?

「コンピューターに理解できる言語」のことを、一般的に「マークアップ言語」や「プログラミング言語」と呼びます。このマークアップ言語やプログラミング言語を記述することを「コーディング」といいます。

つまり「コンピュータが理解可能なかたちで、命令や指示を書くこと」がコーディングです。今回紹介するHTMLやCSSも、その言語の一部です。

HTML(Hyper Text Markup Language)は、ウェブサイトの骨格となる言語で、初心者にもわかりやすいのが特徴です。一方で、CSS(Cascating Style Sheets)は、HTMLとセットで使われる言語です。サイトの外見やレイアウトを整えるために使われます。

「HTMLで骨組みをつくり、CSSで整える」とイメージすると良いでしょう。コーディングとは、こうした言語を記述することだと理解してください。

HTMLとCSSのコーディングに必要な最低限のツール

続いては、HTMLとCSSのコーディングに必要な最低限のツールを紹介します。HTMLとCSSのコーディング作業を行うためには、2つものがあれば十分です。それが「テキストエディタ」と「ブラウザ」の2点です。いずれも無料で入手可能です。

テキストエディタを用意する

1つ目はテキストエディタです。いわゆる「メモ帳ソフト」も、その一つです。コーディングを行う際は、テキストエディタを使って言語を記述していきます。

「メモ帳」でも良いですが、現在では高機能なテキストエディタもたくさんあります。豊富な機能がありながら無料で提供されているものから、コーディングのプロが使うような上級エディタもあります。

入門者なら、まずは「メモ帳」などの、初心者向けツールから試してみると良いでしょう。ここでは参考までに3つほど紹介しておきます。

参考:Atom

参考:秀丸エディタ

参考:CotEditor

ブラウザを用意する

2つ目はブラウザです。ウェブサイトを閲覧する際に使うもので、「Google Chrome」や「Internet Explorer」「Safari」などが有名です。

コーディングを行う人たちの場合、多くは「Google Chrome」を使っています。コーディングに便利な付加機能も豊富にあるので、まずは「Google Chrome」を使うと良いでしょう。

参考:Google Chrome

HTMLとCSSでコーディングを行う際のルールとは?

前述のとおり、コーディングとは「コンピューターに理解できるように指示や命令を記述すること」をいいます。

しかし、やみくもに書けば良いというものでもありません。普通の日本語の文章でも、きれいな文章を書ける人もいれば、わかりにくい文章を書く人もいます。コーディングの趣旨は「コンピューターに理解してもらうこと」なので、わかりやすい記述が求められます

そこでグーグルは、多くの人が共通してわかりやすい記述ができるよう、「推奨コーディングガイドライン」という基本ルールを用意しています。5つほど紹介します。

参考:Google推奨コーディングガイドライン(英語)

HTML5を使用しよう!

Google推奨コーディングガイドラインでは、コーディングの際はHTML5を使用するよう求めています。

ウェブサイトの骨組みとなる言語がHTMLですが、その最新版が「HTML5」です。つまり「最新版のプログラミング言語を使いましょう」というのが、このルールの趣旨になります。

HTML5はHTMLの最新バージョン

HTML5はHTML言語の最新版です。HTML4よりパワーアップしています。初心者の人の場合は、4と5の違いをしっかり理解する必要はありません。

たとえば<!DOCTYPE html> で記述をスタートする形式がHTML5です。ただし難しく考える必要はありません。大事なのは、HTMLを記述する際は、古いHTMLではなく、最新の「5」バージョンを用いるということです。それを覚えておきましょう。

画像にはalt属性を付与することを忘れずに!

「Google推奨コーディングガイドライン」には、画像を設置する際は「alt属性を追加しましょう」とのルールがあります。alt属性を追加することで、コンピューターは「その画像は、何の画像なのか」を認識することができます。

みかんの画像なら、「<img src=”orange.jpg” alt=”みかんの写真”>」と記述します。「<img src=orange.jpg alt=>」と記述しても正常に表示されますが、alt属性をしっかり記述すれば、コンピューターは、その画像が「みかん」であるということが認識しやすくなるのです。

CSSの基本ルールとは?

HTMLとセットで使われるのがCSSです。ウェブサイトのレイアウトをきれいに整えるために使われます。

「Google推奨コーディングガイドライン」がCSS記述の際に求めているのは「記述は簡潔に」ということです。複雑に記述するのではなく、「わかりやすく」「簡潔に」「省略できるものは省略して読みやすく」といったことが推奨されています。

id属性とclass属性を付ける時の注意点

HTMLのタグに名前を付ける機能が、id属性とclass属性です。わかりにくいかもしれませんが、たとえば以下のような内容です。


<div class="animal1">
・・・・・
</div>

「Google推奨コーディングガイドライン」では、命名の際は、できるだけ意味が具体的にわかる名前であることを求めています。できるだけコンピューターに理解しやすく意識すればOKです。

HTMLとCSSを使ったコーディングの方法と7つの手順

それでは具体的にコーディングの手順を見ていくことにしましょう。今回は、以下のような構成のウェブサイトをつくる前提で解説します。

・ヘッダー部分
・メイン部分
・サイド部分
・フッター部分

ファイルやフォルダーを用意する

まず最初のステップでは「ファイルやフォルダーを用意する」ことから始めます。基本的なウェブサイトなら、以下のように作成すると良いでしょう。

・トップページ:index.html
・CSSプログラム:CSSフォルダー(その中にstyle.cssも)
・画像ファイル置き場:imagesフォルダー

全体レイアウトを紙に書き出してみる

2つ目のステップでは「全体レイアウトを紙に書き出してみる」という作業を行います。そして、プログラムでどう命名するかを考えます。

たとえば今回のデザインでは、以下のようになります。

・ヘッダー部分 → header
・メイン部分 → main
・サイド部分 → side(right or left)
・フッター部分 → footer

メモでも良いので、事前にフレームデザインを書き出して、それぞれの名前をきちんと決めておくことです。そうすることによって、余計な混乱を避けることができます。

基本となるhead部分を記述する

3つ目のステップからは、コーディングのスタートです。まずは「基本となるhead部分の記述」を行います。

HTML文書の構造を分けると、html、head、bodyという3種類のエリアから構成されています。

・<html>:HTML文書であることを宣言する部分
・<head>:その文書全体の構造を表記する部分
・<body>:ブラウザに表示される部分


<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ウェブサイトのタイトル名</title>
    <meta name="description" content="ページの説明文を記載">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
 
  
  <body>
    <!-- ここにウェブサイトのコンテンツを記述します -->
  </body>
</html>

このhead部分は、ブラウザで表示されない部分です。文書全体の構造を規定する内容を記載します。たとえばウェブサイトのタイトルや、検索結果に表示されるページ説明文、その他、レスポンシブ対応を規定したりといった内容です。

ブラウザに表示されるbody部分を記述する

4つ目のステップでは「ブラウザに表示されるbody部分の記述」を行います。

先ほど2つ目のステップで「全体レイアウトを紙に書き、どう命名するか考える」という作業を行いましたが、それにそって記述していきます。


<div class="wrapper">
 
  <header>header</header>
 
  <div class="container">
    <div class="main">main</div>
    <div class="side">side</div>
  </div>
 
  <footer>footer</footer>
 
</div>

上記を見ればわかるとおり、先ほどの作業で命名した、

・ヘッダー部分 → header
・メイン部分 → main
・サイド部分 → side(right or left)
・フッター部分 → footer

という区分けでまとめています。こうすることにより、より構造がわかりやすく記載できます。

CSSでデザインを整える

5つ目のステップでは「CSSでデザインを整える」という作業を行います。

先ほどの4つ目のステップで、エリアごとの構造を分けました。よりわかりやすくするため、それぞれのエリアごとに背景色を決めておくことをおすすめします。


.wrapper {
  max-width: 1000px;
  margin: 0 auto;
}
header {
  background: red;
}
.container {
  display: flex;
}
.main {
  background: blue;
  width: 70%;
}
.side {
  background: yellow;
  width: 30%;
}
footer {
  background: orange;
}

ここでは仮に、赤、青、黄、オレンジの4色で配列してみました。

モバイルを意識したレスポンシブ対応をセットする

6つ目のステップでは「モバイルを意識したレスポンシブ対応」を行います。先ほどのステップまでは、モバイルではなくPCで見た場合のデザインです。モバイルも意識するには「レスポンシブ対応」が必要です。


@media (max-width: 600px){
  .container {
    flex-direction: column;
  }
  .main,
  .side {
    width: 100%;
  }
}

たとえばこの場合は600pxというサイズを規定し「それより小さなサイズの場合はmainとsideを縦方向に並べて表示する」という指示がセットされています。

HTMLとCSSの残りの記述作業を行う

最後のステップでは「HTMLとCSSの残りの記述作業」を行います。

6つ目のステップまでを通じてやってきたことは、「HTMLとCSSを使って、基礎的な大枠のデザインを作成する」という作業です。あとはその構造にしたがって、中身を作り込んでいくステップです。

記述の過程では書き間違えでエラーが起きることもあります。ブラウザに表示して確認をしながら、ひとつひとつ丁寧に作業をしていきましょう。

HTMLとCSSでコーディングができるようになろう!

今回は入門者向けに「HTMLとCSSを使ったコーディング」の基礎を解説してきました。いままでは「HTMLもCSSも難しそう」と思っていた人も、より身近に感じられたのではないでしょうか。

コーディングの意味やルール、コーディングの方法を説明してきましたが、ここにまとめたものはあくまでも基礎的な部分に過ぎません。実際に作業を進める中で、もっと知りたいことが増えてくるはずです。

コーディングのプロを見ていると「実際に操作をしながら覚えた」という人が多いです。ぜひ積極的にチャレンジしてみてください。