HTMLとCSSの初心者はこれを読めば基礎はOK【 JSもあるよ】

Webページって、どうやって作るのかな……？
基礎からお勉強したいの。

HTML、CSS、JavaScriptっていう言語で作るんだよね？

こんな疑問にWeb/UIデザイナーの筆者がお答えします。

Webデザインには欠かせない3つの言語ですが、まずは基礎をしっかり理解して実際にブラウザ上で表示させるところまでやってみましょう。

基礎が理解できれば、応用でさまざまな表現が可能になります。

それでは早速ご説明しますね。

本記事を読むとわかること

・HTML、CSS、JavaScriptの基礎知識を身につけることができる
・それぞれ基本の書き方がわかる

本記事の信頼性

この記事を書いている筆者は、Web/UIデザイナー歴8年を越えました。
企業でさまざまなWebサイトやゲームUIを制作しています。

CONTENTS［ hide ］

01｜ HTMLとCSSやJavaScriptの基礎がすぐ分かる！【初心者必見】
・HTML、CSS、JavaScriptの役割とは
・開発に必要なソフトや環境について
・基本のフォルダ構成
02｜さっそくHTML、CSS、JavaScriptを始めてみよう！
・HTMLでマークアップをする
・CSSで装飾をする
・JavaScriptで動きをつける
03｜【まとめ】HTMLとCSSやJavaScriptの基礎がすぐ分かる！【初心者必見】

HTMLとCSSやJavaScriptの基礎がすぐ分かる！【初心者必見】

最初にWebデザインをする際に扱うことになる3つの言語を簡単にご説明します。

HTML、CSS、JavaScriptの役割とは

Webデザインでは、「HTMLで構造」「CSSで装飾」「JavaScriptで動き」をそれぞれの言語が分担して表現しています。

HTML

Webページのベースとなる部分を作る言語。
HTMLが記述されていないと、CSSやJavaScriptで装飾・動きをつけることができません。

文章、画像、リストなど、さまざまな要素に対して、文書構造を正しくコンピューターに認識してもらえるようタグを用いて意味付けをしていきます。

CSS

HTMLを記述しただけでは要素の中身をそのまま表示するだけなので、Webページの見た目がさみしいことになってしまいます。

そこで、CSSを使って下記のように見た目を整えます。

・ページのレイアウトを整える
・背景画像を設定する
・写真の大きさを変更する
・文字サイズ、文字色を変える

CSSでできることはまだまだ沢山ありますが、基礎としては上記のことができればWebページの見た目はデザインできます。

JavaScript

HTMLとCSSで作成したWebページをよく「静的ページ」と呼びますが、JavaScriptを使うことで「動的ページ」と呼ばれる動きのあるWebページを作ることができます。

いくつか例を出すと下記のようなことをしたい時はJavaScriptの出番ですね。

・Webページにアクセスするとき、ローディング画面を表示
・ボタンをクリックした時にポップアップウィンドウを表示
・スクロールにあわせて、要素をふわっと表示
・ハンバーガーメニューを作る

こちらは本格的なプログラミング言語になりますので、できることは沢山あります。HTMLとCSSを習得した後は、ぜひJavaScriptの習得も目指していただきたいですね。

ちなみに、よく間違えられるのですが、JavaScriptとJavaはまったく別の言語です。略してJavaと呼んでしまうと別の言語の事になってしまいますので、JavaScriptを略すときは個人的に「JS（ジェイエス）」がいいかなと思っています。

開発に必要なソフトや環境について

Web開発をするには以下のものが必要になります。

・パソコン（Windows、Mac等）
・テキストエディタ
・Webブラウザ

上記のものさえ揃っていれば、HTMLを作成してブラウザ上で表示を確認することができます。
インターネットに接続されていなくても、ローカル環境で確認可能です。

テキストエディタは、Windows環境であれば最初から入っている「メモ帳」や、フリーで使える高機能なエディタソフトもありますので、調べてみてください。

Webブラウザは、こだわりがなければ「Google Chrome」が使いやすいと思います。
特にデベロッパーツールと呼ばれるツールを使うと、なんとブラウザ上で見た目を確認しながら開発を行うことができます。
これは個人的にWeb開発には必須ツールと思っており、慣れてくるとその便利さが分かると思います。

基本のフォルダ構成

Web開発を行うまえに、任意のフォルダにプロジェクトフォルダを作成してください。
今回はサンプルで下記のような構成のプロジェクトフォルダを作成します。

CSSとJavaScriptは、それぞれフォルダを分けて保存します。

HTMLファイルにCSSとJavaScriptをインラインで記述することもできるのですが、メンテナンス性と一般的なWebページの作り方を考慮して、それぞれ別ファイルとして保存してください。

HTMLファイルから、CSSとJavaScriptファイルを読み込む記述を入れることで、それぞれWebページに適用することができます。

さっそくHTML、CSS、JavaScriptを始めてみよう！

フォルダなどの準備はできましたか？それでは実際に簡単なコードを書いてみましょう！

HTMLでマークアップをする

最初にHTMLでマークアップしていきます。
まずはブラウザでHello World!と表示してみましょう。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

上記のコードを、index.htmlファイルに記述してください。
HTMLでは基本的に<body></body>の中に記述した内容がブラウザ上に表示されます。
記述が終わったら、index.htmlを保存して、ブラウザで開いてみてください。

下のようにHello World!の文字が表示されると思います。

Hello World!

CSSで装飾をする

次にCSSで文字と背景のデザインを変えてみましょう。
最初に、index.htmlにCSSフォルダにあるstyle.cssを読み込みます。
下記のように記述してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css"> ←ここに記述します
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

次にstyle.cssファイルを編集します。今回はHello World!の文字のデザインと、背景色の変更をしていきます。

下のコードにはbackgroundやcolorなどが書かれていますが、これはプロパティと言って、このプロパティに対してコロン（：）で区切って値を設定します。

ではstyle.cssに下記のCSSを記述してください。

body {
  background: #666666;
}
h1 {
  color: #ffd765;
  text-shadow: 0 1px 5px #000000;
}

記述したら保存をして、index.htmlを更新してみてください。
下のようにデザインが変更されていたら成功です！

Hello World!

このようにCSSでデザインすれば、色の変更はもちろん、文字にドロップシャドウをつけるといったことも可能なのです。
CSSでできることはまだまだたくさんあるので、ぜひ気になったら色々と調べて試してみてください。

JavaScriptで動きをつける

最後はWebページに動きを付けることができる、JavaScriptです。
主な使い方としては、イベント（ユーザーの操作）に対して、いろいろな要素を動かしたり変化させることができます。

まずはCSSと同様に、index.htmlにjsフォルダ内のscript.jsを読み込ませます。
下記のように記述してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <script src="js/script.js"></script> ←ここに記述します
  </body>
</html>

JavaScriptファイルは、<head>タグの中、または<body>タグの閉じる直前で読み込む2パターンの方法がありますが、一般的には<body>タグの閉じる直前で読み込ませることが多いので、今回はここに記述しました。

では、script.jsファイルを開いて下記のコードを入力してください。（コピペでOKです！）

const body = document.querySelector('body');
body.addEventListener('mousemove', function () {
  body.style.backgroundColor = '#f75766';
}, false);
body.addEventListener('mouseout', function () {
  body.style.backgroundColor = '#666666';
}, false);

入力できたらscript.jsファイルを保存して、index.htmlを更新してください。
Hello World!の文字にマウスカーソルを合わせると、背景色が変更されると思います。逆にマウスカーソルを文字から離すと、背景色が元に戻ります。
（スマホの場合は、タッチして押してる間だけ背景色が変わるように仕込んでありますので、お試しください）

ここでやっていることはシンプルで、マウスイベントに合わせてCSSを書き換えているため、カーソルを合わせたときだけ背景色が変わるのです。

このように、JavaScriptではユーザーイベントに合わせて関数処理を行うという使い方がメインになります。（もちろん他にも色んなことができます）

Hello World!

【まとめ】HTMLとCSSやJavaScriptの基礎がすぐ分かる！【初心者必見】

ここまでお疲れ様でした。はじめてのHTML、CSS、JavaScriptはいかがだったでしょうか？

はじめは難しいかもしれませんが、基礎が身につくと「次はこんなことをしてみたい」という欲がでてきます。ネット上にはたくさんの情報がありますし、もちろん当ブログでも色々なHow to記事を書いていきますので、どんどんスキルアップしてWebページ制作を楽しんでくださいね！

もし、今後Webデザイナーを目指してみたいという方は下記の記事も参考になるかもしれません。