スキル

HTML/CSSコーディングとは? コーディングに関する基礎知識をご紹介!

HTML/CSSコーディングは、ウェブサイトの制作において欠かせない行程のひとつです。しかし、初心者の方にとってはなかなか複雑であり、理解が難しいと言われています。

そこで今回は、初心者の方にもわかりやすいように、HTML/CSSコーディングの基礎知識からその手順までをくわしくご紹介します。ぜひ参考にしてくださいね。

HTML/CSSコーディングの基礎知識

まずは、HTML/CSSコーディングの基礎知識を解説しましょう。

HTML/CSSコーディングとは?

HTML/CSSコーディングとは、HTMLおよびCSSなどの「マークアップ言語」を使ってコードを書くことです。

ウェブサイトは、デザインだけではブラウザに表示することはできません。なぜなら、デザインだけでは、コンピューターが内容を理解できないからです。

まずはコンピューターが理解できる言語を使って、「ここがタイトル」「ここがリンク」といった指示を伝える必要があります。

その時に使用される言語がHTMLやCSSなどの「マークアップ言語」であり、この言語を使用してコードを書くことでウェブサイトの内容がブラウザに表示されるのです。

HTML・CSSとは?

それでは、マークアップ言語であるHTMLとCSSについてくわしく説明しましょう。

【HTML】
HTMLとは、「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略であり、「タグ」というマークを使って、主に文書に対する指定を行います。

たとえば、「○○○」という文書を大見出しとして表示したい場合は、大見出しを表すタグ<h1></h1>の間にはさみます。

<h1>○○○</h1>

これでコンピューター側に「○○○は大見出しである」という情報が伝わり、表示されるのです。その他にも、HTMLはリンクや表、画像なども指定します。

【CSS】
CSSとは、「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略であり、ウェブサイトのスタイルに対する指定を行います。

たとえば、表示される文字の色やサイズ、背景のデザインやレイアウトなど、ウェブサイトの「装飾」を指定する際に使います(さらに、JavaScriptなどの他のプログラミング言語を利用すれば、動きのあるサイトを作ることもできます)。

以上のように、マークアップ言語であるHTMLとCSSをコーディングすることで、ウェブサイトの内容をより魅力的なものにすることができるのです。

HTML/CSSコーディングの手順

それでは、HTML/CSSコーディングの手順をくわしく説明します。

1. フォルダ・ファイルを作る

最初に、コーディングデータや画像を保存するフォルダとファイルを作ります。

1.コーディング用のフォルダ「coding」を作成
2.画像用のフォルダ「images」を作成
3.「coding」の中に、HTML用ファイル「index.html」を作成
4.「coding」の中に、CSS用ファイル「style.css」を作成
5.「coding」の中に、JavaScript用ファイル「script.js」を作成

それぞれのフォルダとファイルが完成したら、HTMLは「index.html」ファイル、CSSは「style.css」ファイル、JavaScriptは「script.js」ファイルに書き込んでいきます。

画像はすべて「images」フォルダに保存しましょう。

2. レイアウトを確認する

HTMLコーディングを始める前に、ウェブサイトのレイアウトを確認しておきましょう。

ウェブサイトは基本的に、「header(ヘッダー)」「main(メイン)」「side(サイド)」「footer(フッター)」というパーツで構成されています。

このパーツのレイアウトを、事前にメモ用紙などに簡単に書いておきます。

このように線で囲んだり、IDを振っておくとCSSで装飾する時に楽ですし、全体像が把握しやくなります。

3. HTMLで「head」部分を記述する

レイアウトを確認したら、いよいよHTMLを使ってコーディングを開始します。

まずはウェブサイトの情報を記述する 「head(ヘッド)」部分から始めます。headは主に検索エンジンやブラウザに向けて指示を書くもので、ウェブサイト上には表示されません。

head部分には主に、以下のような文字コード、タイトル、サイトの紹介文などを記述します。

【meta charset】
文字コードの設定。世界の標準的コード規格「UTF-8」を使用するのが慣例です。

【title】
ウェブサイトのタイトル

【meta name=description】
ウェブサイトの紹介文。Google等の検索結果ページに表示されます。ユーザーのクリック率を高める効果があるので、必ず書くようにしましょう。

【meta name=viewport】
「レスポンシブデザイン」の設定。スマホやタブレットなどマルチデバイス表示に対応できます。

【reset.css】
ブラウザ固有のCSSを打ち消す機能。リセットCSSを使用すれば、本来意図したデザインの配置が可能になります。

4. HTMLで「body」部分を記述する

head部分が完成したら、次に「body(ボディ)」部分の記述に入ります。

bodyは、ウェブサイトのメイン部分であり、実際にブラウザによって表示される部分です。基本的にbody部分は「header(ヘッダー)」「main(メイン)」「side(サイド)」「footer(フッター)」のパーツで構成されており、それぞれ以下のような内容になります。

【ヘッダー(header)】
サイトのタイトルやロゴ、文章の導入部分、目次(ナビゲーション)などを記述する。

【メイン(main)】
ページのメインとなるコンテンツを記述する。

【サイド(side)】
メインコンテンツと関係ない広告や、サイトに関連する記事の一覧などの補足情報を記述する。

【フッター(footer)】
コピーライト(著作権)に関する情報や、ヘッダーに入らなかったナビゲーションなどを記述する。

5. CSSで装飾する

次に、CSSをコーディングしてHTMLを装飾します。

CSSコーディングで行える主な装飾は以下の通りです。

・文字のフォントサイズを変更する
・文字の色を変更する
・文字の太さを変更する
・レイアウトを整える
・縦横の幅を調整する
・動きをつける(CSSアニメーション)

いくつか例をご紹介しましょう。

【文字のフォントサイズを変更する場合のCSSコーディング】

例) { font-size: 15px or 2.0em }

px(ピクセル:モニタの最小単位)…ウェブサイトの文章は15px〜18pxがおすすめ。
em(エム:フォントサイズに対する倍率)…現在のフォントサイズが15pxのときに「2.0em」であれば30pxになります。

【文字の色を変更する場合のCSSコーディング】

例) { color: white }

{ color: 色名}…英語の色名を記述(白…white、赤…red、青…blue)

例) { color: #ffffff}

{ color: カラーコード }…「#+6ケタ」の英数字で書く。色ごとにコードが決まっている
(白…#ffffff、赤…#ff0000、青…#0000ff)

6. レイアウト部分のレスポンシブ対応

ブラウザで内容を確認して表示に問題がなかったときは、次にスマホなどのモバイルサイズでも閲覧できる「レスポンシブ対応」を設定しましょう。

レスポンシブデザインとは、画面サイズに応じた表示にできるデザインのことです。レスポンシブ対応を設定しておけば、さまざまなデバイスからユーザーを獲得できるだけでなく、Google推奨デザインでもあることから、検索順位に好影響を与える可能性もあります。

レスポンシブ対応にするには、head内にviewport設定をした後、「@media」 に続いて表示領域を指定し、その中に画面幅など装飾したい要素をCSSコーディングします。

例)@media screen and (max-width: 480px)

この場合は、480px以下の画面幅、つまりスマホ表示された場合の指示になります。

7. 表示・動作確認

HTML/CSSコーディングによる記述や装飾を繰り返し、全体のコーディングが終了したら、複数のブラウザで表示や動作の確認をします。

問題なく表示されていれば完成です。

HTML/CSSの独学に役立つ「オンライン学習サイト」のご紹介

HTML/CSSの独学に役立つ「オンライン学習サイト」をご紹介します。より知識を深めたい方はぜひチェックして下さいね。

Progate(プロゲート)

Progate(プロゲート)は、プログラミングを初めて学ぶ方の多くが利用するオンライン学習サイトです。

全15コース・79レッスンが用意されており、HTML/CSSの基礎から、自分で簡単なウェブサイトを作成するまでの内容をしっかり学習できます。

特に「HTML & CSS 初級編」は、HTML/CSSの基礎知識を学びながら、ブラウザ上で実際にコーディングを進めていけるので、初心者の方でもとてもわかりやすく学べます。

さらに、HTML/CSSだけでなく、RubyやPythonなどのプログラミング言語も学習できますし、かわいらしいイラストを使ったスライド学習もとても魅力的です。初心者の方はProgateからはじめると良いでしょう。

ドットインストール

ドットインストールは、すべてのレッスンが3分以内の動画で提供されるオンライン学習サイトです。

短いレッスン動画なので、すきま時間を利用して無理なく気軽に学べます。さらにプレミアム会員になれば、現役エンジニアにレッスンの内容を直接質問することも可能なので、より理解を深めることができますよ。

CODEPREP(コードプレップ)

CODEPREP(コードプレップ)は、1日10分間プログラムを書きながらプログラミング学習をするオンラインサイトです。

毎日10分間こつこつ書くことで学習者に達成感を与えながら、学習の「継続」をサポートしています。

カリキュラムは「入門編」「基礎編」「実践編」から選択可能で、自分のレベルに合わせた学習ができます。また、最初は穴埋め形式なのでテンポよく学習できることから、初心者の方でも安心して取り組めます。

さらに、他のユーザー達と交流できるディスカッションボードが用意されているので、仲間同士で教え合ったり、励まし合いながらプログラム学習ができますよ。

ウェブサイト制作の手順を学ぼう

最後に、ウェブサイト制作の手順をご紹介します。全体の流れにおけるHTML/CSSコーディングの役割を確認することで、よりコーディングに対する理解が深まるでしょう。

今回はウェブサイト制作会社の手順を例にとって説明します。

1.企画(ディレクション)

制作依頼が入ったら、まずはウェブサイトの内容の企画を行います。

クライアントの業種やウェブサイト制作の目的、希望するデザイン、機能、イメージ、予算などを確認し、企画書を作成します。

次に、企画書を中心にクライアントと具体的な打ち合わせに入り、相互の認識をすり合わせます。そして、クライアントからOKをもらったら正式に契約を交わし、ウェブサイト制作がいよいよスタートします。

2.ガイドライン作成

次に、ウェブサイト構築のための基本的な「ガイドライン」を作成します。

ガイドラインは、ウェブサイト制作を進める上での「設計図」のようなものです。ウェブサイト制作会社の多くは、ディレクターやプログラマー、デザイナーなど複数人で作業を分担しています。

そのため、全体の設計図として「ガイドライン」を設定すれば、認識の違いによる無駄な作業の発生を抑え、スムーズで効率的なワークフローを実現できます。

ガイドラインの主な内容は以下の通りです。

・遷移図…ウェブサイト画面の流れを示す図表
・UI(ユーザーインターフェイス)…フォントやデザインなどの見やすさ
・UX(ユーザーエクスペリエンス)…サイトの使いやすさ
・必要な文書や画像のリスト
・ワイヤーフレーム(コンテンツのレイアウト)

3.デザイン

ガイドラインのワイヤーフレームを元に、サイトのデザインを作成します。一般的にウェブデザイナーが担当します。

サイトのデザインは、全体の統一感を持たせることが重要です。そのため、使用するフォントの大きさや配色、写真の配置、余白や行間などを細かく設定しながら作成していきます。

また最近では、多くのウェブサイト制作会社がマルチデバイスに対応した「レスポンシブデザイン」を導入して、どの端末からでも見やすいデザインを作成しています。

4.HTML/CSSコーディング

クライアントからデザインに対してOKが出れば、次にHTML/CSSコーディングを行います。

最近では、色々な動きに対応したサイトが増加しているため、HTML/CSSコーディングの中にJavaScriptの実装が含まれることもあります。

さらに、ワードプレスなどのCMS(コンテンツ管理システム)の設定およびテンプレート作成なども、HTML/CSSコーディング作業の一環です。

5.動作確認・公開・納品

HTMLコーディング作業が終了したら、次は動作確認です。

複数のブラウザで問題なく表示されるかをチェックし、問題なければサーバーのテスト環境へのアップロードが行われます。

テスト環境での最終確認が終わると本番環境へアップロードされ、納品が完了します。

クライアントから要望があれば、サーバーの準備やドメイン設定、ECサイトの決済システムの導入なども行われます。

6.ウェブサイトの運用・保守

ウェブサイトは作ったら終わりではありません。クライアントによっては、制作会社にサイトの運用・保守まで依頼する場合があります。

運用とは、「システムを滞りなく動かす作業」のことです。サーバーの起動および停止、定時のデータ入力など、システムを常に監視し、定型化された作業を日々確実にこなしていきます。

一方、保守とは「システムの改修や修理をする作業」のことです。ニュースリリースやコンテンツ追加があった際の更新作業や、バグの改修、サーバー機器の修理や交換など、システムの変更や問題を解決し、安定した状態に戻します。

オンライン学習サイトなどを利用して楽しくHTML/CSSコーディングを学ぼう!

今回はHTML/CSSコーディングの基礎知識についてご紹介しましたが、いかがでしたか?

HTML/CSSコーディングは、ウェブサイト制作において重要な行程のひとつです。内容が少々複雑なので、初心者の方にとってはハードルが高く感じることもあるでしょう。

しかし、HTML/CSS専用のオンライン学習サイトなどを利用すれば、自分のレベルに合ったスキルが習得できるので、きっと理解が深まりますよ!

ぜひ、今回ご紹介した情報を参考にして、楽しくHTML/CSSコーディングを学んで下さいね。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
など専門家が独自に入手した、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。