コーディング

目次

1 Webサイトは主に3つの要素で構成されている
2 コーディングの流れ：デザイナーからコーダーへ
- 2.1 コーダー（エンジニア）の出番
  - 2.1.1 パーツごとに切り出す
  - 2.1.2 コーディングで指示を与える
3 コーディング例：HTML/CSS/JSのサンプル
4 コーディングが果たす重要な役割
5 コーダーが担う「見えないデザイン」
6 まとめ

これからホームページを制作されたり、Webサイトをリニューアルしたりする際に、制作会社から「コーディング」という言葉がちょこちょこ出てくると思います。でも、実際この「コーディング」という概念が、はじめての方にはちょっとわかりにくいかもしれません。
そこで今回は、その「コーディング」という作業が何を意味するのか、どういうことをやっているのかを、できる限り噛み砕いて解説していきます。

それでは、いってみましょう。

Webサイトは主に3つの要素で構成されている

まず、Webサイトがどういった要素で作られているかというと、大きく3つの要素から成り立っています。

HTML
CSS
JavaScript

細かく言えば他にもたくさんあるのですが、大体この3つを覚えておけばOKです。それぞれ、どのような役割を担っているか、順番に解説します。

HTML：構造をつくる

まず、1つ目がHTMLです。
HTMLは「構造」を司ります。

Webサイトは書籍に似たところがありまして、1ページ1ページが本のようなものだと想像してください。
本には、

タイトル
大見出し
中見出し
小見出し
引用部分
段落

…など、さまざまな要素で構成されていますよね。
HTMLは、この「それぞれの要素がどういう役割を果たしているのか」を決めるための言語です。

「ここが見出しですよ」「ここはタイトルですよ」「これは画像ですよ」といった形で、ページ内にあるテキストや画像などのコンテンツに意味付けし、構造化していきます。

CSS：見た目を整える

続いてCSSです。
CSSの役割は、大きく3つに分けられます。

文字の見た目（例：フォントを明朝体にする、ゴシックにする、など）
色の指定（例：文字を赤色にする、背景を白色にする、など）
サイズの指定（例：文字の大きさ、画像やボックス領域の幅・高さを決める、など）

これらを通じて「デザイン」を実際のWebページ上に再現するための指示を与えるのがCSSです。

JavaScript：動きをつける

最後にJavaScript。
JavaScriptは主に「アニメーション」を担います。

アニメーションというと、

画像のスライドショー（画像が次々に切り替わる）
ボタンを押したら色が変わる
スクロールしたら要素がふわっと出現する
マウスオーバーでメニューが出てくる

など、ユーザーのアクションやページの読み込み状況に応じて動きを与える機能を実現します。

だいたい、この3つ（HTML + CSS + JavaScript）を組み合わせて、私たちが普段ブラウザで見ているWebサイトが形作られているんです。

コーディングの流れ：デザイナーからコーダーへ

では、実際に「コーディング」が進んでいく流れを解説しましょう。
最初に仕事をするのは、Webデザイナーです。

Webデザイナーは、完成形のWebサイトにそっくりな「見た目の画像」を1枚作ります。
たとえば、ロゴがあって、メインビジュアルがあって、その下に見出しやテキスト、ボタンが並んだデザインカンプ（仮想的な完成イメージ）を1枚の画像として制作します。

この時点では、画像はただの「絵」です。

ロゴをクリックしても反応しない
ボタンを押してもリンク先に飛ばない
テキストはコピペできない

いわば、写真として1枚絵があるだけの状態です。

コーダー（エンジニア）の出番

このデザインカンプができたら、コーダー（エンジニア）が登場します。
コーダーさんは、このデザイナーさんが作った1枚絵を、ブラウザ上で実際に動くWebページとして組み立てる「コーディング作業」を行います。

パーツごとに切り出す

具体的には、

ロゴ画像をパーツとして切り出す
メインビジュアル部分をパーツとして切り出す
ボタン画像もパーツとして切り出す

テキストは実際にHTML上に打ち込んでいきます。
こうして「画像一枚」だったものを、ロゴ画像・見出しテキスト・本文テキスト・ボタン画像…といった細かい部品に分解していきます。

コーディングで指示を与える

そして、HTMLを使って「ここにロゴを配置」「ここに見出しを配置」「このテキストはここ」といった形で「構造」を作り、
CSSで「ロゴは左寄せ」「この文字は明朝体・サイズは○○px」「この画像は何秒ごとにスライドさせる」など見た目や動きを指定します。
さらに、JavaScriptを使って「ボタンをクリックしたら色を変える」「一定時間ごとに画像を切り替える」などのアクションを与えます。

こうしてコーダーは、デザインカンプをもとに、裏側でカタカタとプログラミングしながらブラウザ上で見たりクリックしたりできるWebページへと仕上げていくわけです。

コーディング例：HTML/CSS/JSのサンプル

ここで簡単なコード例を示します。
以下は、HTMLでページの構造を記し、CSSで見た目を調整し、JavaScriptで簡単な動きをつける例です。
もちろん実際はもっと複雑ですが、イメージをつかむための短いサンプルコードです。

HTML例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>サンプルページ</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header>
    <img src="logo.png" alt="サイトのロゴ" class="site-logo" />
    <h1 class="main-heading">ようこそ私たちのWebサイトへ</h1>
  </header>
  <section class="main-visual">
    <img src="main.jpg" alt="メインビジュアル" />
  </section>
  <section class="content">
    <h2>見出しタイトル</h2>
    <p>こちらは本文テキストです。コーディングによって、このテキストは選択やコピーも可能になります。</p>
    <button class="action-btn">クリックしてね</button>
  </section>
  <script src="script.js"></script>
</body>
</html>

CSS例 (style.css)

body {
  font-family: "メイリオ", sans-serif;
  margin: 0;
  padding: 0;
}

.site-logo {
  width: 150px;
  height: auto;
  display: block;
  margin: 20px;
}

.main-heading {
  font-size: 24px;
  color: #333;
}

.main-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.content {
  padding: 20px;
}

.content h2 {
  font-size: 20px;
  color: #555;
}

.content p {
  font-size: 16px;
  line-height: 1.5;
}

.action-btn {
  background: red;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.action-btn:hover {
  background: blue;
}

JavaScript例 (script.js)

document.querySelector(".action-btn").addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

コーディングが果たす重要な役割

コーディングはただ見た目を再現するだけでなく、さまざまな工夫をすることで、使いやすく、アクセシビリティにも配慮したWebサイトを実現します。

アクセシビリティへの配慮

たとえば、目が不自由な方は、音声読み上げソフトを使ってWebサイトを利用します。
このとき、HTMLで「ここは見出し」「ここは本文」「ここは画像で、内容は○○」といった情報を適切にマークアップしておけば、読み上げソフトが正しく情報を伝えられます。

alt属性（オルトタグ）を使えば、画像が何を意味しているかをテキストで示せます。
これにより、画像を見られない方にも、ページの内容をより理解してもらうことができます。

SEOへの貢献

Googleなどの検索エンジンのロボットも、Webサイトの内容を理解する際にはHTML構造をもとにしています。

見出しタグ（<h1>や<h2>）で文章構造を明示
alt属性で画像の意味を伝える

こうしたコーディングの工夫が、検索エンジンの評価にも関わってきます。

また、ページの読み込み速度も評価対象です。
画像を軽量化したり、無駄なコードを減らしてサイトを軽くする作業も、コーダーの仕事の一環です。

レスポンシブデザインへの対応

さらに、PC版・スマホ版など、さまざまなデバイスで正しく表示されるようにする「レスポンシブWebデザイン」もコーディングの役割です。
ブラウザ幅を縮めれば自動で画像が小さくなり、テキストやボタンが適切な位置に再配置されるよう、CSSを工夫します。

コーダーが担う「見えないデザイン」

Webデザイナーが作るのは「目に見えるデザイン」です。
一方、コーダーは、

リンクが正しく動くこと
ページが軽く、快適に表示されること
スマホでもPCでも自然に表示されること
読み上げソフトや検索エンジンに優しい構造をつくること

といった「見えない部分のデザイン」を支えています。

コーディングは、Webサイトを「ただの絵」から「使えるサイト」に進化させる大切な工程なのです。

まとめ

以上が、コーディングについての解説です。

HTMLで構造をつくり
CSSで見た目を整え
JavaScriptで動きを与え
様々なデバイスや状況に対応するための工夫を凝らす

これらすべてが「コーディング」と呼ばれる作業の中で行われています。

お使いのブラウザはJavaScriptに対応していないか、または無効になっています。
ブラウザのJavaScriptの設定を有効にしてご利用ください。

このページのタイトルとURLをコピーしました。