日本最大級のホームページ制作会社検索サイト

【入門編】HTMLとCSSって何が違うの?両者の違い・おすすめの学習コンテンツなどを紹介していきます。

優良Web編集部

Written by

優良Web編集部

HTML・CSS

「HTML・CSSって何?」
「どうやってHTML・CSSの知識を付けていけばよいかわからない」

Web業界に入りたての方で、上記のような疑問を抱えている方はいらっしゃるのではないでしょうか?HTML・CSSどちらも、ホームページ制作に必要不可欠なプログラミング言語です。そんなHTML・CSSについて本記事では、

  • HTML/CSSとは
  • HTML/CSSでできること
  • HTML/CSSの勉強におすすめの学習コンテンツ

といったことを中心に解説していきます。HTML/CSSの基本を押さえることができるようになっていますので、ぜひ最後までご覧ください。

HTMLとは

HTMLとは、Webページの構造を作成するための言語。HyperText Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。

HyperText:特別な役割を持ったテキストデータ(リンクや表など)
Markup:目印をつける
Language :言語

HTMLが使われる場面

ホームページ制作

HTMLでテキスト部分を作成し、CSSでWebサイトのデザインやレイアウトを整えていきます。両者を組み合わせることによって、バリエーションに富んだWebサイトの構築が可能です。

HTMLメール

HTMLメールとは、文字の色やサイズを指定したり、画像や動画などを組み込んだりできるメールのことです。HTMLを使うことで、デザイン性豊かなメールの作成ができます。

Webアプリ作成

Webアプリで動きをつけているのは別のプログラミング言語ですが、骨組みにはHTMLが使われています。

HTMLを使うときの注意点

文字化けする場合がある

Webコードの解釈の違いが原因となり、表示されたテキストが文字化けする場合があります。文字コードを正しく指定しましょう。

半角で記述する

全角でタグの指定をすると表示が崩れてしまうので、必ず半角で記述するようにしましょう。

CSSとは

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の略で、Webページのスタイルを指定するための言語です。スタイルシートとも呼ばれています。

HTMLとCSSの関係

HTMLとCSSの関係を、イメージしやすいように人間の顔に例えたものが下の図です。

【初心者向け】HTML・CSSとは?プログラミングの基本をイチから分かりやすく解説

HTMLというベースにCSSを組み込むことで、装飾を施すことが可能になります。
Webページの構成は下記のように表すこともできます。

Webページ=HTML(文章構造)+CSS(見栄え)

CSSを使うメリット

デザイン性が上がる

CSSを使うことで、文字や背景の色を変えたり、カラフルなマーカーを引いたり、余白の調整などを行うことができます。

HTMLコードがシンプルになる

デザインに関するデータをHTMLで書く必要がなくなるため、シンプルにすることができます。HTMLはWebページの構造・CSSは装飾と役割分担をすることによって、

  • 検索エンジンで適切に評価される
  • あらゆるブラウザで表示しても安定したレイアウトが保てる

といったメリットも生まれます。

CSSを学ぶ上で、最初に覚えておきたい3つの要素

CSSでは、次の3つの要素を使ってWebページの見栄えを整えていきます。

  • セレクタ…どのHTMLタグに対して見栄えを調整するか
  • プロパティ…どういった内容のデザインを施すか
  • 値…どのように見た目を変えるのか

この3つの要素はCSSの基本となるので必ず覚えておきましょう。

プロパティの例

下記の表は、CSSを書く上でよく使われるプロパティをまとめたものです。

プロパティ 説明
color 文字色を指定する
background 背景の指定をする
background-color 背景の色を指定する
font-family フォントの種類を指定する
font-weight フォントの太さを指定する
line-height 行の高さを指定する
text-align 行の揃え位置を指定する
width 幅を指定する
height 高さを指定する
margin マージンの指定をする
padding パディングの指定をする
border ボーダーの色や太さを指定する
position 要素の配置方法を指定する
display 要素の表示形式を指定する
float 左か右に寄せて配置する
z-index 要素の重なりの順序を指定する

引用:TechAcademy スタイルシート(CSS)の基本的な書き方【初心者向け】

よく使われるプロパティを覚えておくことで、調べる回数が減り、作業効率もアップするでしょう。

初心者におすすめの学習コンテンツ

ここでは、HTML・CSSの勉強におすすめの学習コンテンツを「YouTube」と「学習サイト」に分けてご紹介します。

YouTube

Webクリエイターボックス

HTML入門講座 #01:HTMLとは?基本の書き方

この動画でわかること

  • HTMLとは?
  • HTMLの仕組み
  • HTMLの書き方

CSS入門講座 #01:CSSとは?CSSの基本の書き方

この動画でわかること

  • CSSとは?
  • 基本の書き方
  • 書く時のルール

Webの神様

【超入門】知らなきゃマズイ!HTML・CSS 基本の「き」【HTML・CSS コーディング】

この動画でわかること

  • 環境の整え方
  • HTMLの基本構造とタグ
  • CSSの基本構造とルール
  • CSSをHTMLに読み込む方法

【超入門】初心者必見!模写コーディングをやってみた 実践編【HTML・CSS コーディング】

※模写コーディングとは…既存のサイトの見た目をまねてコーディングすること

この動画でわかること

  • 模写コーディングの手順
  • テキスト・画像を抽出する方法
  • HTML、CSSの編集の仕方

学習サイト

progate

progate


出典:progate

progateは、イラスト中心のスライドでプログラミングを学べるサイト。HTML・CSSの学習には、実際にWebページを作りながら学べるこちらのコースがおすすめです。

ドットインストール

ドットインストール

出典:ドットインストール

ドットインストールは、3分の動画でプログラミングを学べる学習サイト。
これからHTML・CSSの勉強を始める方は、まずHTML/CSSの学習環境を整えよう [Windows版]
を視聴してから、はじめてのHTMLはじめてのCSSのレッスンに進むのがおすすめです。

SKILLHUB

SKILLHUB

出典:SKILLHUB

SKILLHUBは、プロになるために必要な知識やスキルを動画で学ぶことができるサイトです。独自のカリキュラムが用意されているため、初心者の方にもわかりやすい内容となっています。

HTMLを学びたい場合は、基礎から学びたい人のためのHTML入門【動画で学ぼう】
CSSを学びたい場合は、基礎から学びたい人のためのCSS入門【動画で学ぼう】
を受講すると良いでしょう。

動画や学習サイトを使って、HTML・CSSの理解を深めましょう!

今回は初心者の方向けにHTMLとCSSについて解説してきました。最後に、それぞれ役割をおさらいします。

HTML…Webページの構造を作成
CSS…HTMLの装飾

もっと詳しく知りたい!という方は、本記事でご紹介した、コード一覧・YouTube動画・学習サイトを使って、理解を深めてみてください。HTML・CSSを使って、自分好みのWebサイトにデザインしていきましょう!

この記事を書いたライター

優良Web編集部

優良Web編集部

運営元であるホームページ制作会社、JetBのメンバーで構成された編集チームです。1,000社以上のホームページ制作を行なってきた経験やノウハウを活かし、プロの目線からホームページ制作に関するさまざまな情報をお届けします。

このライターの記事一覧

この記事を監修した人

金井宏透

金井宏透

JetB株式会社顧客マーケティング支援部マネージャー。2008年から大手IT企業にて広告・SEOのセールマネージャーを経験した後、モバイルゲーム会社にてマーケティングに従事。2019年より優良Web運営元であるJetB株式会社にジョイン。

この監修者の記事一覧

関連記事

Share