Column
コラム
コーディングって何？
コーディングとは？
コーディングとは、作成したデザインをもとに、ブラウザで実際に見ることができるホームページを作る作業です。
デザインの段階では、
-
- ここに写真を入れる
- この文字を大きくする
- このボタンは青色にする
- この部分は横並びにする
といった、ホームページの完成イメージを作ります。
ただし、デザインデータを作っただけでは、そのままホームページとして見ることはできません。
そのデザインをもとに、HTMLやCSSなどを使って実際のページとして組み立てていくのがコーディングです。
デザインとコーディングは何が違う？
ホームページ制作では、デザインとコーディングは別の工程です。
家づくりで例えると、
デザインは「設計士」
コーディングは「大工」
のような関係です。
設計士は、
「どんな間取りにするか」
「どこに窓を付けるか」
「どんな雰囲気の家にするか」
といった完成イメージを考え、設計図を作ります。
ホームページのデザインも同じで、
「この場所に写真を大きく見せよう」
「このボタンは目立つ色にしよう」
「スマートフォンではこの順番にしよう」
といった見た目や配置を考えます。
一方、大工は、設計図をもとに実際の家を形にしていきます。
コーディングも同じように、デザインをもとに、実際にブラウザで見たり操作したりできるホームページへ組み立てていく作業です。
つまり、
デザイン ＝ イメージを考え、設計図を作る
コーディング ＝ 設計図をもとに実際に作る
と考えると分かりやすいでしょう。
HTML・CSS・JavaScriptって何？
コーディングでは、主にHTMLやCSS、JavaScriptなどを使います。
HTML
HTML（HyperText Markup Language）とは、
ホームページの骨組みを作るものです。
たとえば、
-
- 見出し
- 文章
- 画像
- リンク
- ボタン
- 表
などを、どのような情報として配置するのかを決めます。
CSS
CSS（Cascading Style Sheets）とは、
ホームページの見た目を整えるものです。
たとえば、
-
- 文字の大きさ
- 色
- 余白
- 背景
- 横並び・縦並び
- ボタンの形
などを調整します。
JavaScript
JavaScriptとは、
ホームページに動きや処理を付けるために使われるものです。
たとえば、
-
- メニューを開く
- 画像を切り替える
- ボタンを押したときに表示を変える
- スクロールに合わせて動きを付ける
といった部分で使われます。
イメージとしては、
HTML ＝ 骨組み
CSS ＝ 内装や外装
JavaScript ＝ 動く設備
と考えると分かりやすいかもしれません。
コーディングでは何をするの？
デザインが完成すると、「もうすぐホームページができる！」とワクワクされると思います。
でも実は、ホームページ制作はここ（コーディング）からが本番なんです。
完成したデザイン（画像）を、そのままホームページにペタッと貼れば完成！というわけではありません。
技術的には、デザインを1枚の画像として表示することもできますし、LPなどではデザインの一部を画像として配置することもあります。
ただ、人が見れば、
「ここは見出し」
「ここは文章」
「ここはボタンに見える」
と分かっても、ブラウザから見ると、ページ全体の構造は分からず、大きな1枚の画像が置いてある状態です。
そのままでは、画像の中の文字を通常の文章として選択することはできませんし、ボタンのように見える部分を押して別のページへ移動することもできません。
そこでコーディングでは、完成したデザインを見ながら、一つひとつの要素をHTMLやCSSなどのコードに置き換えていきます。
たとえば、
-
- 見出しは見出しとして
- 文章は文章として
- 画像は画像として
- ボタンは実際に押せるボタンやリンクとして
それぞれを作っていきます。
さらに、
-
- どこに配置するのか
- どのくらいの大きさにするのか
- 何色にするのか
- 文字サイズをどうするのか
- 余白をどのくらい取るのか
- スマートフォンではどう並べるのか
- マウスを乗せたときにどう変化するのか
といった細かな部分まで、コードで指定していきます。
つまりコーディングとは、
人が見て分かるデザインを、ブラウザや検索エンジンにも意味が伝わり、実際に操作できるホームページとして組み立てる作業です。
スマートフォンではどうやって表示を変えているの？
ホームページは、パソコンだけでなくスマートフォンやタブレットなど、さまざまな画面サイズで見られます。
たとえば、パソコンでは横に3つ並んでいる情報を、スマートフォンでは縦に並べることがあります。
また、
-
- 大きなメニューをハンバーガーメニューにする
- 文字サイズを調整する
- 画像の大きさを変える
- ボタンを押しやすい大きさにする
- 表示する順番を変える
といった調整も行います。
こうした、画面サイズに合わせて表示を変える作り方を「レスポンシブデザイン」と呼びます。
パソコンのデザインをそのまま小さくするのではなく、スマートフォンでも見やすく、使いやすいようにコーディングすることが大切です。
ブラウザや端末によって表示が違うこともある
ホームページは、
-
- Google Chrome
- Safari
- Microsoft Edge
など、さまざまなブラウザで見られます。
また、Windows、Mac、iPhone、Androidなど、見る環境も人によって違います。
同じコードでも、ブラウザや端末によって文字の見え方や配置などが少し変わることがあります。
そのため、コーディングが終わった後は、実際に複数の環境で表示を確認します。
デザイン通りに作るだけでなく、実際に見る環境でも問題なく表示されるか確認することが大切です。
コーディングとプログラミングは同じ？
「コーディング」と「プログラミング」は、似た意味で使われることもあります。
ただし、ホームページ制作の現場では、少し分けて使うことがあります。
たとえば、
コーディング
→ HTMLやCSSなどを使って、ホームページの画面を作る
プログラミング
→ 検索機能、会員機能、データベース処理など、システムの仕組みを作る
というような違いです。
たとえば、
「ボタンを押したら別のページへ移動する」
といった一般的なホームページの動きはコーディングで対応できます。
一方で、
「会員ごとに違う情報を表示する」
「条件を指定して商品を検索する」
「入力した内容をデータベースへ保存する」
といった処理は、プログラミングやシステム開発が必要になることがあります。
まとめ
コーディングとは、作成したデザインをもとに、実際にブラウザで見ることができるホームページへ組み立てる作業です。
HTMLやCSSなどを使って、文章や画像を配置したり、色や余白を整えたり、スマートフォンでも見やすいように調整したりします。
普段ホームページを見ていると、こうしたコードを目にすることはほとんどありません。
しかし、私たちが見ているホームページの裏側では、さまざまなコードによってページが作られています。
人が見て分かるデザインを、実際に見たり、読んだり、操作したりできるホームページへ変える。
それが「コーディング」です。
ちなみに、コード自体はパソコンであれば、右クリックを押して「ページのソースを表示」などのボタンをクリックすると見えます。
そして、サーフボードサイトのソースを見ると…下記のようになっています！知っていましたか？
関連コラム
株式会社サーフボードは、福井で最も歴史のあるホームページ制作会社です。
1996年創業以来、ホームページ制作を一筋に800社以上のホームページやWEBシステムの構築をしてまいりました。
ホームページ制作でお困りのことやご相談がございましたら、お気軽にお問合せくださいませ。