コラム

WEB制作のコーディングをわかりやすく解説!初心者のための入門編

2022.7.27
  • # Web制作・ホームページ作成
WEB制作のコーディングをわかりやすく解説!初心者のための入門編

WEB制作におけるコーディングの役割

WEB制作には欠かせない作業であるコーディングと、その役割について説明します。

作成したデザインをブラウザ上で見えるようにする

アクセス数の多いWEBサイトは、魅力的なデザインのものが多いです。しかしデザインを作成しただけでは、WEBサイトはできません。

コーディングとは、作成したデザインをブラウザ上で見えるようにする作業のことです。

コードを書く

コーディングの具体的な作業は、コードを書くことです。

コードを書くためにはマークアップ言語という記述方法を使います。

これにより文字を太くしたり、見出しをつけたり、リンクを設定したりして、デザインをブラウザ上で見えるようにします。

マークアップ言語の種類

マークアップ言語はコンピューター言語の一種で、HTML、その改良版であるXML、XHTMLなどが代表的な言語です。

一般的にコーディングのことを、わかりやすくHTMLコーディングと呼ぶこともあります。

おもにHTML言語を使ってデザインや文章を作成していくのが、コーディング作業です。

プログラミングとコーディングの違い

WEB制作に必ず出てくるのがプログラミングという用語です。

プログラミングとはWEBサイトの設計から完成までをプログラムすることで、プログラミング言語を使って作業します。

プログラミングがWEBサイト完成までのプログラム全体を意味するのに対して、

コーディングは、プログラミング言語を記述する(コードを書く)作業のみを指します。

コーディングで使う言語はすでに述べたHTMLと、CSSです。

コーディングで使うHTMLとCSS

コーディングではコードを書きますが、使用する言語はHTMLとCSSです。ここでは2つの言語の違いについて説明します。

HTMLについて

HTMLとはHyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)のことで、WEB制作の基本となる言語です。

ハイパーテキストという言葉からわかるように、文章の構造を作成するために使います。

CSSについて

CSSとはCascading Style Sheets(カスケーディング・スタイルシート)のことで、HTMLで作成した文章を黒から赤に変えたりするときに使います。

HTMLは文章の記述を担当しますが、CSSは文章の表示やデザインなどを担当して、文書の見栄えをよくする言語です。

HTMLとCSSを組み合わせるメリット

HTMLだけでコーディングしてもWEBサイトのデザインを作れますが、WEBサイトの情報が乱れて検索エンジンに引っかからなくなったり、ブラウザによっては表示が変わったりします。

デザイン担当のCSSと組み合わせるメリットは、WEBサイトをしっかり表示させて検索効果をアップさせることです。

動きのあるWEB制作は3つの言語が必要

コーディングにはHTMLとCSSが必要ですが、写真がスライドするなど複雑に動くデザインのWEBサイトを作りたいときは、さらにJavaScriptという言語が必要になります。

ここでは入門編としてシンプルなWEB制作を目指しますので、JavaScriptについて知りたい方はプログラミング言語のサイトを参考にしてください。

コーディングにはルールがある

人それぞれにコードの書き方が違っても、コンピューターに指示すれば同じ処理ができます。

しかし、コードを書く場合にはコーディングルール(コーディング規約)という記述作法に従うのが一般的です。

なぜルールが必要なのか、そのメリットについて説明します。

チーム作業がスムーズになる

数人でWEB制作をしたり、チームでプロジェクトを進行させたりする場合、コードの書き方がバラバラだとチーム内のコミュニケーションが取りにくくなります。

コーディングルールに従った方が作業はスムーズになります。

修正やメンテナンスがしやすくなる

あとでコードの修正が必要になったとき、コーディングルールに従って記述されていれば修正しやすくなり、メンテナンスも簡単です。

新たなスタッフが参加しやすい

チームにあとからスタッフが参加した場合、記述がバラバラだと理解するのが困難になります。コーディングルールに沿って書かれていれば、作業を引き継ぐときも苦労しません。

パターンを再利用できる

個人でWEB制作を行う場合でも、コーディングルールを決めておけばパターンを再利用できます。

いくつもWEB制作をするときなど、すでに書いたコードのパターン(の一部)を使い回せば作業がスピーディーになり、効率的です。

WEB制作のたびに違うコードの書き方をしていると、その都度いろいろ調べたりするので効率が悪くなります。

チーム作業でも個人作業でも、あらかじめコーディングルールを決めておくことはとても大切です。

Google推奨のコーディングルールについて

WEB制作をする上で重要なのはSEO対策です。せっかくWEBサイトを立ち上げても検索順位が低いとガッカリします。

SEO対策でポイントになるのがコーディングで、コーディングルールには一般公開されているものや会社独自のものなどいろいろです。

ここではGoogleが推奨しているコーディングルールについて説明します。

Googleのコーディングルールを使うメリット

Googleは世界中で多くの人が使っている検索エンジンなので、コーディングでのSEO対策をするには適しています。

また依頼されてWEB制作をした場合、コードの書き方に意見や注文が出たときにもGoogleが推奨しているという理由で説得しやすいです。

Googleコーディングルールの内容

コーディングに使用する言語はHTMLとCSSですが、Googleコーディングルールにはそれらのフォーマットとスタイルの規則について定義してあります。

例えば、HTMLのコーディングルールではHTML5を使用するなどです。

HTML5とはHTMLの第5版のことで、この言語を使えば今まで表現できなかった動画、音声などをかんたんに実現できます。

CSSのコーディングルールでは、有効なCSSを使用することやW3C CSS検証ツールなどを使用してテストすることなどについて説明されています。

さらに詳しく知りたい場合は、サイト上にGoogleが用意したGoogle HTML/CSS Style Guideが掲載されていますので参考にしてください。

英文ですが翻訳されたサイトもあります。

コーディングにおすすめのツール

WEB制作にあたって実際にコーディングする場合、知っておくと役立つツールがありますので紹介します。

WordPress

WEBデザインを作成するときに便利なツールです。個人ブログをはじめ、企業などのホームページを作るときに使われています。

世界中のWEB制作に使用されるほど有名なツールで、オープンソースなので誰でも自由に改良して使えます。

デザインの無料テンプレートがたくさん用意されており、それらを活用すればWEBサイトのデザインもかんたんに制作が可能です。

便利な機能が充実しておりセキュリティの面でも安心できるので、WEB制作のコーディングツールとして覚えておいてください。

Adobe Dreamweaver

WEB制作に必要な編集機能や管理機能、表示機能などが充実している総合的なツールです。

HTMLやCSSのコードをイチから書き込む必要がなく、デザインビューという画面上でそのまま文字が記述できます。

CSSの場合などは、文字を装飾するフォーマットが用意されているのでデザインを制作するのがとてもかんたんです。

基本的なHTMLやCSSの知識は必要ですが、コーディング作業が苦手だったり、直感的に作りたかったりするときには役立ちます。

比較的かんたんにWEB制作ができる本格的なツールです。

テキストエディタ

文章を編集するためのツールをテキストエディタといいます。いろいろなテキストエディタがありますが、代表的なのがWindowsに付属しているメモ帳です。

メモ帳でもコードを書けないことはありませんが、WEB制作のツールとして使うのなら本格的なテキストエディタを選んでください。

テキストエディタにはコーディングするのに便利な機能が備わっており、文字数によって改行や折り返しができたり、文字に色をつけたり、コード入力の補助機能があったりするので重宝します。

WEB制作の手順がわかる5つのステップ

コーディングについて説明してきましたが、WEB制作の大まかな流れがわかるとさらに理解が深まります。

初心者にもわかりやすい5つのステップです。

企画する

WEB制作で一番最初にすることは企画を立てることです。重要なのはWEBサイトの目的で、何のためにWEBサイトを制作するのかを考えます。

とくに必要な要素は、WEBサイトを見てもらいたい人を明確化することです。

設計する

企画ができたら、設計の段階に進みます。設計でメインとなる作業はサイトマップの作成です。

サイトマップとはWEBサイトの全体の構造図で、ページとページのつながりがひと目でわかるように設計します。

企業のホームページを例にすると、構造図の一番上にトップページ、その下にくるのが会社概要、事業内容、お問合わせなどのページです。

このように階層に分けて設計していきます。

デザインを制作する

デザインの制作は初心者にとって難関です。デザインが苦手な人は、お気に入りのサイトを見てマネをしてください。

いろいろなサイトを見て気に入ったデザインを組み合わせ、お好みのものに仕上げるという方法がおすすめです。

はじめからオリジナリティを求めるのではなく、とりあえず自分のWE制作を目標にします。

コーディングする

デザインが用意できた次の段階がコーディング作業です。コーディングすることによってデザインがWEB上に表示されるようになります。

すでに説明したように、HTMLで文章を構造化し、CSSでデザインを整えます。

サイトを制作する

コーディングが終了した段階で、ブラウザにサイトが表示されるようになります。あとはサーバーにデータをアップしてドメイン設定などをするだけです。これで自分のWEBサイトをネットに公開できます。

しかし、このままではブログの更新や新着記事の表示、問い合せフォームの設置などがうまくいきません。

そこで、すでに紹介したWordPressなどのツールを使ってWEB制作を完成させます。

WEB制作でコーディングするときに役立つポイント

コーディングについて知っておくと役立つ便利な情報がありますので、いくつかをご紹介します。

SEOの評価を下げないようにする

せっかくWEBサイトを立ち上げるのですから、見てくれるお客さんを増やしたいものです。

検索エンジンの評価を低くさせるのは複雑なHTMLやCSSです。複雑すぎるとサ

イト表示のパフォーマンスも悪くなります。

複雑化を避けるようなコーディングをしてください。

クロスブラウザチェックをする

クロスブラウザチェックというのは、コーディングが終わったサイトをいろいろなブラウザでチェックすることです。

Google Chrome、Internet Explorer、Edge、FireFoxなど一般的に使用されているブラウザで表示させます。

これによってサイトをチェックし、レイアウトの乱れなどがあれば修正が必要です。

オンラインの学習サイトを活用する

コーディングを学ぶにはいろいろな方法がありますが、独学するのならオンライン学習サイトが役立ちます。

有料のサイトもありますが、基礎的なことだけを学ぶのなら無料でも学習が可能です。

すでに説明したようにWEb制作の全体の流れを知るだけでも、オンラインの学習サイトは適しています。

たくさんの学習サイトがあるので、自分に合ったサイトを選んでください。

WEB制作を独学する注意点

独学は挫折しやすいので、成功させるためのポイントを3つご紹介します。

1つ目は、目的をしっかりと決めることです。なぜWEB制作をするのか、目的が明確であればモチベーションがあがります。

2つ目は、制作の期間を決めることです。これを決めないと、ダラダラといつまでも続いてしまいます。学習効率のアップには期間設定が必要です。

3つ目は、ある程度のコストをかけることです。費用を惜しんで独学を選ぶケースもありますが、正しい教材を手元に置いていつでも見られる環境にしてください。

気に入ったオンライン学習サイトがあれば有料でも活用すべきです。

無料相談受付中!