• HOME
  • HTML/CSS
  • HTML/CSSコーディングの知識、手順、学習方法を解説
  • HTML/CSS
  • コーディング

HTML/CSSコーディングの知識、手順、学習方法を解説

HTML/CSSコーディングの知識、手順、学習方法を解説

Webページを作成していく上で欠かせないのがコーディングです。コーディングはデザインを元に実際のWebページを作るためのコードを書いていく作業です。つまりコーディングをしなければ、Webページが表示されることはありません。

コーディングをする上で準備を怠ったりやルールを知らなければ効率が悪くなる、ユーザーに見にくいサイトとなる可能性があります。結果、制作に時間がかかる、ユーザーの興味を引けないなどの理由から機会損失となります。

本記事ではHTML/CSSのコーディングの知識や手順、学習方法を解説します。

コーディングとは

一般的にコーディングはHTML/CSSのコードを書くことを言います。Webサイトを作るために作られた設計図や仕様書を元にHTMLやCSSのコードを書きます。コーディングすることでブラウザ上に表示させることができます。

コーディングとはプログラミングにてコードを書く工程のことを言います。アプリ開発やWeb制作では要件定義や設計など様々な工程があります。コーディングでは仕様書を元に、ユーザーの要求を満たすプログラムを作成するためのコードを書きます。

しかし、近年ではHTML/CSSのコードを書くことをコーディングと呼ばれるようになりました。

HTML/CSSコーディングに必要な知識

HTML/CSSの基礎知識

HTML/CSSのコーディングをするためにはHTMLとCSSを書くための基礎知識が必要です。コーディングには決まりがあるため、決まりに沿って書かなければWebページとして表示されなかったり、CSSが効かずレイアウトや外見が無機質なものになります。

例えば、HTMLのタグの使い分けは表示のされ方だけでなく、SEO対策にも関わります。そのため、ルールを知っておかなければ上位検索されなくなる可能性が高くなります。

Webページをただ表示させるためだけでなく、有効活用するためにもHTML/CSSの基礎知識は深く習得することをおすすめします。

テキストエディタの使い方

コーディングをするためにはエディタの使い方も知っておく必要があります。テキストエディタとはHTML/CSSのコードを書くためのアプリです。テキストエディタはWindowsに標準装備されているメモ帳でも可能です。

ただし、コーディングする上ではコーディングすることに特化したテキストエディタがあります。テキストエディタ毎に使い方が異なっているため、自分の使うテキストエディタの標準的な使い方や効率的にコードを書く方法も知っておくことをおすすめします。

コーディングのルール

コーディングにはHTML/CSSの記述方法の他にルールがあります。知らなくてもWebページを表示させることは可能ですが、転職やフリーランスとしてWeb制作をする人はコーディングのルールは大切です。

中には一般的にこうと決められているものもあるので、学習しながら覚えていく方がいいと思います。

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

テキストエディタを用意する

まずはコードを書くためのテキストエディタを準備します。メモ帳でも構いませんが、コーディングに特化してテキストエディタが無料であるため、そちらを利用することをおすすめします。おすすめのテキストエディタを下に挙げます。

  • Visual Studio Code
  • Atom
  • Notepad++

プログラミングの入門本ではVisual Studio CodeかAtomを進めていることがほとんどです。機能面やプラグインなどの機能性ではVisual Studio Codeがおすすめです。

フォルダを用意する

次に、HTMLファイル、CSSファイルを入れるためのフォルダを用意します。フォルダツリーはCSSや画像の読み込みの際のパスとして必要になるため、先に用意しておきます。必要な素材が見つかったら、それぞれのフォルダにいれていきます。

作成するフォルダは以下の通りです。

  • HP名のフォルダ
    ↓以下はHP名のフォルダの直下に入れる
  • CSS：CSSファイルを入れるフォルダ
  • JS：JavaScriptファイルを入れるフォルダ
  • images：画像を入れるフォルダ

ブロック分けする

いきなりHTMLのコードを書き出すのではなく、仕様書や設計書から全体をブロック分けします。HTML/CSSにおいてブロックごとの構造に分けて配置を確認することでコード全体のイメージを掴むことができます。

分け方としては以下の通りにすることをおすすめします。

  • ヘッダー
  • メイン
  • サイド
  • フッター

メインは項目ごとに分けても良いと思います。また、ブロックの中でも要素を分けておけば、コードを実際に書くときに構成に迷う必要が無くなります。

ブロックごとにHTMLとCSSのコードを書く

仕様書や設計書を元にブロック分けができたら、コードを書いていきます。コードを書く際には大きなブロックを先に作って、細かく書いていくことをおすすめします。上のブロックから書いていくと、細かいところの調整によって大枠を壊してしまう可能性があります。

木を見て森を見ずにならないように最初に大きなブロックを作って、配置を決めたら、ブロックの中身を埋めていくようにすることをおすすめします。

HTML/CSSコーディングの学習方法

Progate

Progateはオンラインでプログラミングを学習するコンテンツです。HTML/CSSは初級編、中級編、上級編があります。初級編は無料で利用可能で、中級編と上級編は月額1080円で利用できます。

初級編だけでも1つのWebページを作成する流れを学ぶことができます。また、わかりやすいスライドとブラウザ上でコードを書いてアウトプットができるので、一回の学習で効率的にコーディングの方法やルールを学ぶことができます。

初級編だけでページ作成の流れは学べますが、有料の中級編と上級編までやることをおすすめします。理由はレスポンシブデザインまで学習できるからです。スマホやタブレットが普及してきた昨今、レスポンシブデザインは不可欠です。そのため、有料プランでHTML/CSSを深く学ぶことをおすすめします。

ドットインストール

ドットインストールはProgateと同様オンラインでプログラミングを学習するコンテンツです。ドットインストールは1レッスン3分程度の動画で学習することができます。そのため、スキマ時間を用いた学習が可能です。

Progateよりも広い範囲の内容が学習できますが、パソコンに疎い人であれば少し難しい内容です。文字を読むよりも動画で学びたい人はドットインストールをおすすめします。

入門本

入門本を用いた学習はProgateやドットインストールを学習した後でやることをおすすめします。学習本はProgateやドットインストールに比べて深い知識を学ぶことができます。しかし、ある程度理解していない人にとっては途中で躓くポイントが多くなります。

しかし、Progateで全体像がわかっていれば、ある程度の基礎知識がついているので躓きにくいです。本では200ページから300ページあるため自分の現在地を見失いやすいです。しかし、Progateである程度全体像がわかっていれば、現在地を見失いにくくなります。

まとめ

HTML/CSSのコーディングはWebページを作成する上で欠かすことができません。コーディングされたファイルを用意することで初めてブラウザ上にWebページを表示することができるからです。

本記事内でコーディングの手順や学習方法を紹介しましたが、一般的に言われている手法の1つです。紹介した方法が絶対ではなく、コーディングの手順や学習方法に正解はありません。

紹介した手法を元にあなたのやりやすいようにアレンジしてコーディングを確実にできるようになることをおすすめします。