HTML/CSSを独学で勉強するための始め方

本ページは、プロモーションが含まれています。 HTML/CSSを独学で勉強するための始め方

HTML は、ブラウザに文字や表などを表示させるために使用されるマークアップ言語です。

また、CSS は、HTML で記述されたタグやレイアウトを装飾するためのもので、

自分のサイトをイメージしたデザインにするためには CSS の書き方も必須になります。

Java や C言語などのプログラミング言語と違って、HTML タグや CSSの書き方を覚えて、

サイトのデザインを考えることがメインなので、独学で勉強することは難しくありません。

ここでは、HTML/CSS 未経験者や初心者が独学で勉強するための始め方を解説していきたいと思います。

HTML/CSS を独学で勉強するための作業環境
- １.１. パソコン ( Windows や Mac など)
- １.２. ブラウザ ( GoogleCrome や Microsoft Edge など )
- １.３. エディタ ( ワードパッドやメモ帳、さくらエディタなど )
HTML/CSS を独学で勉強するための始め方
HTML の基本構造
- ３.１. HTML の基本構造について
- ３.２. HTML タグの種類について
CSS の基本構造
- ４.１. CSS の基本構造について
- ４.２. HTMLタグと CSS の関係
HTML/CSS の勉強を独学で続けていくためには？
- ５.１. HTML/CSS の目標や目的を考える
- ５.２. HTML/CSS の勉強のためのブログの始め方
  - ５.２.１. 無料ブログサービスの始め方
  - ５.２.２. レンタルサーバーを使用したブログの始め方
最後に

１．HTML/CSS を独学で勉強するための作業環境

HTML/CSS を独学で勉強を始めるにあたって、必要な作業環境は、

・パソコン ( Windows や Mac など )

・ブラウザ ( GoogleCrome や Microsoft Edge など )

・エディタ ( ワードパッドやメモ帳、さくらエディタなど )

です。

１.１. パソコン ( Windows や Mac など )

パソコンは、独学で勉強するためには必須で、デスクトップでもノートパソコンどちらでもよく、

スペックも特に高くなくても大丈夫です。

OSも、Windowsでも Mac など、どの OS でも HTML/CSS の勉強ができます。

ここでは、Windows を使用する前提で説明していきます。

また、快適に勉強するためには、パソコン画面が大きい方がやりやすいです。

もしパソコンを持っていない場合、デスクトップパソコンでもノートパソコンでもどちらでも良いですが、

新品で購入すると高いので、中古パソコンがおすすめです。

１.２. ブラウザ ( GoogleCrome や Microsoft Edge など )

ブラウザは、Windows パソコンでは Microsoft Edge が既にあり、

GoogleChrome は自分でインストールする必要がありますが無料です。

どのようなブラウザでも HTML/CSS を確認することができます。

１.３. エディタ ( ワードパッドやメモ帳、さくらエディタなど )

HTML/CSS を書くためにはエディタが必要で、初心者には、

・Windows アクセサリにあるメモ帳やワードパット

・サクラエディタ

・Visual Studio Code　

がおすすめです。

エディタで HTMLを記述した後、ファイル保存する際に、拡張子を「.html」にすることで、

HTML ファイルとなり、ブラウザで表示できるようになります。

CSSを記述して保存する場合も同様に、拡張子に「 .css 」を付けます。

２．HTML/CSS を独学で勉強するための始め方

HTML/CSS を独学で勉強するための始め方として、下表のように３段階あります。

段階	説明
１	Webサーバーなしで、HTML/CSS の勉強を始める。
２	ローカル環境の Webサーバーで、HTML/CSS の勉強始める。
３	レンタルサーバーを使用して、HTML/CSS の勉強を始める。

それでは、その１から順に、説明していきます。

２.１. 段階１: Webサーバーなしで、HTML/CSS の勉強を始める。

通常は、Webサーバー経由で、HTML/CSS を表示しますが、

勉強するだけなら、Webサーバーなしでもできます。

まずは、HTML がどのようなものかを知りたい場合には、この手順から始めることが一番簡単です。

この手順は、HTML の勉強の始め方で一番簡単な手順になります。

手順	手順内容
１	Windows パソコンのデスクトップ画面で右クリックを押して「新規作成」から、「テキストドキュメント」を選択して、ファイル名を例えば「 sample.html 」として保存します。
２	sample.html ファイルをワードパットやメモ帳などのエディタで開いてHTMLを記述します。
３	HTML を記述した sample.html をブラウザ上にドラッグ＆トロップもしくはダブルクリックします。
４	sample.html に記述されている HTML がブラウザ上に表示されます。

上記の手順で行うと、Webサーバーは必要なく、ブラウザと HTMLファイルを作成するのみで、

HTML/CSS の勉強を行うことができます。

CSS については、3項で説明します。

２.２. 段階２: ローカル環境の Webサーバーで、HTML/CSS の勉強始める。

段階１のやり方は、手動で HTMLファイルをブラウザにドラッグ＆ドロップするやり方ですが、

Webサーバー経由でブラウザから指定された URLアドレスのサイトを表示する流れが、

通常のやり方になります。

この流れを実際に行うためには、自分のパソコン上に Webサーバーを動作させる必要がありますが、

段階２では、自宅内のみでアクセスできるWebサーバーの構築のやり方を解説します。

そのやり方は、XAMPP という無料アプリがあり、インストールするだけで、

簡単に Webサーバーを動作させることができます。

XAMPP アプリのフォルダ内に自分が作成した HTMLファイルを置いて、

ブラウザからアクセスすると自分で作った HTML を表示することができます。

HTMLファイルを修正しても、ブラウザの「ページ再読み込み」をすることで修正した内容で更新することができます。

XAMPPは、「Download XAMPP」からダウンロードすることができます。

インストールは簡単で、ダウンロードした exeファイルをダブルクリックすると、

インストーラが起動しますので、後は「次へ」を押していくとインストールが完了します。

段階１の sample.html ファイルをXAMPP経由でブラウザに表示するには、

まず「 C:\XAMPP\htdocs 」のフォルダ内で新規フォルダを作成します。

ここでは、フォルダ名を sample とします。作成した sampleフォルダに sample.htmlを入れます。

次に、XAMPP のコントロールパネルを開いて Apache を起動させると、

自分のパソコンでWebサーバーが動作している状態になります。

その状態で、ブラウザから「 http://localhost/sample/sample.html 」に、

アクセスすると sample.html の内容が表示されます。

アクセスするURLは、XAMPP の htdocsフォルダにある HTMLファイルを指定します。

上図の場合は、htdocsフォルダ内の sampleフォルダにある sample.html を指定してブラウザ表示しています。

また URL が IPアドレスになっていますが、localhostでも大丈夫です。

２.３. 段階３: レンタルサーバーを使用して、HTML/CSS の勉強を始める。

実際にインターネット上に自分が書いた HTMLファイルを公開したい場合は、

ブログサービスやレンタルサーバーを利用する必要があります。

段階２のやり方で、公開することはできなくもないのですが、

セキュリティの問題や24時間365日パソコンを自宅で動かし続けることはかなり負担になります。

ブログサービスやレンタルサーバーを利用することで、Webサーバーが常に動作していますので、

自分で Webサーバーを動作させる必要が無く、

HTML/CSS を記述するだけでインターネット上に公開することができます。

本格的なホームページ作成の勉強をしたい場合には、

まずは、「段階２」のやり方でサイト作成の勉強をして、

更にインターネット上に公開したい場合にはレンタルサーバーを使用することを検討すると良いです。

３．HTML の基本構造

それでは、HTML/CSS の基本構造について、説明していきたいと思います。

３.１. HTML ファイルの基本構造

HTMLファイルの基本構造は、以下のような感じです。

<html>　　＜- htmlタグで囲うことでHTML形式のファイルになる。
　<head>　＜- headタグでは、タイトル名や CSS ファイルの読み込みなどを記述する。　
　　　( 設定など本文以外のことを書く )
　</head>
　<body>　＜- bodyタグに記述されている HTMLタグや文章が、ブラウザに表示される。
　　　( 本文を書く ）
　</body>
</html>

HTML は、上記のように必ず <html>、<head>、<body> のタグで構成されています。

<html>タグは、HTML で記述されたファイルであることを示すタグで、

<head>タグは、Google アナリティクスのコードの埋め込みやトップメニュー、

CSS 記述や CSS ファイルの読み込みなど記事本文以外を行う部分になります。

そして、<body> タグは、記事本文を記述する部分になります。

３.２. HTML タグの種類

見出しや下線、表、画像などの表示などは、決められた HTML タグを使用して、

簡単に表示することができます。

HTMLを記述するには、タグの種類とその内容を把握しておく必要があります。

使用頻度が高いタグは、下表のとおりです。

タグ名	簡単な説明
<h1></h1> <h2></h2> <h3></h3>	文字の大きさとボールドを設定するタグで、h1 が一番大きく数字が増えるごとに文字が小さくなっていく。主に、項目に使用します。
<span></span>	span タグは、style=""と共に使用して、挟まれた文字を修飾します。
<div></div>	div タグで囲まれた部分を１つのブロックとして扱うことができます。
<table></table>	table タグは、tbody タグと tr タグ、th タグや td タグを使用して、表を形成することができます。
<p></p>	単に文章を書くときは、必ずこの p タグで囲みます。
<li></li>	リスト形式で表示します。
<ul></ul>	ul タグの中に li タグを使用することで、項番なしのリストを形成します。
<ol></ol>	ol タグの中に li タグを使用することで、項番ありのリストを形成します。
<img></img>	画像を表示する際に使用します。

そして、上記のような HTMLタグに、CSS を使用することで色を付けたり、

文字の大きさを変えたりすることができます。

タグの使用方法の詳細については、ここでは省略します。

４．CSS の基本構造

４.１. CSS ファイルの基本構造

CSS は、Cascading Style Shetts の略で、HTML の見た目を設定するスタイルシート言語です。

CSS の基本構造は、下記のような感じです。

table tr td {
　background-color: green;
　text-align: center;
}

h3 {
　font-size: 1.1em;
　color: red;
}

HTMLタグ名に対して、｛｝内で、背景色や文字色、テキストのアラインなどを設定することができます。

また、CSS の設定のやり方は３通りあり、

　(１) <head>タグ内で、CSSを直接記述する方法

　(２) <head>タグ内で、CSS ファイルの読み込む方法

　(３) HTMLタグ内で、style 属性を使用して、局所的に CSS を設定する方法

があります。

<html>
　<head>
　　<style type="text/css">　＜- (１) <style>タグで CSS を直接記述する
　　　h1{
　　　　font-size: 1.25em;
　　　　color: #66aa66;
　　　}        
　　　p { font-size: 0.75em; }
　　</style>
　　<link rel='stylesheet' href="style-mobile.css" type='text/css' media='all'>　＜‐(２) <head>タグ内から CSS ファイルを読み込む
　</head>
　<body>
　　<span style="color: orange; font-size: 1.2em">
　　　(３)この部分だけ style 属性で設定した CSS になります。
　　</span>
　</body>
</html>

上記の(１)では、<head>タグ内で、<style type="text/css"></style>で、

CSS を囲むことで CSS ファイルを読み込まずに直接記述することができます。

ここで記述した CSS 設定は、サイト全体で有効になります。

上記の(２)では、<link>タグを使用して、

HTMLファイルと同じフォルダ内にある style-mobile.css という、

CSSファイルを指定して読み込んでいます。

上記の(３)では、サイト全体ではなく、その部分だけに CSS を設定したい場合に、

<span> タグに style で CSS を記述することで設定しています。

<span> タグだけでなく他の HTML タグにも同じように style で CSS を設定することができます。

これらの３通りの CSS の設定は、同時に記述することができますが、

同じ名前での CSS の設定は、後から設定された方に上書きされますので、注意が必要です。

４.２. HTML タグと CSS の関係

HTML タグと CSS の関係のイメージは、HTMLタグを CSS 設定で装飾する感じで、

色や文字の大きさなど自由に変えることができます。

例えば、h1タグに対して CSS設定する場合に、h1タグに名前を付けることで、

いくつも CSSを設定することができます。

HTMLタグの名前の付け方は、id と class の２種類があり、以下のように記述します。

<html>
　<head>・・・</head>
　<body>
　　　<h1 id="sample">idでh1タグに名前を付ける</h1>
　　　<h1 class="sample2"> classでh1タグに名前を付ける</h1>
　</body>
</html>

そして、CSSファイルには、以下のように記述します。

#sample {　<- id で名前付けした場合は、#を名前の前に付ける。
　text-size: 1.2em;
}

h1.sample2 {　<- class で名前付けをした場合は、「タグ名.クラス名」とする。
　text-size: 1.0em;
}

以上が、HTML タグに名前を付けて、CSS ファイルで HTML タグに付けた名前に対して、

CSS の設定を記述するやり方です。

HTML タグに名前を付けるメリットは、ページの内容などに応じて装飾を変えることができることです。

HTML タグと CSS との紐づけが理解できれば、

後は HTML/CSS の参考書を辞書のような感じで使用するだけで勉強することができます。

CSS で設定できる内容を全て覚える必要は無く、

設定したい項目があるかどうかを参考書を辞書のように見て確認すると良いです。

５．HTML/CSS の勉強を独学で続けていくためには？

５.１. HTML/CSS の目標や目的を考える

HTML/CSS を継続して独学で勉強していくためには、

目標や目的が無いとなかなか続けることが難しいです。

勉強を続けていくためには、勉強したことに対して成果がでると、

継続していくモチベーションを保つことができます。

一番のおすすめは、自分で作成したサイトやブログを公開して、第三者に見てもらうことです。

ブログを書くことは、章立てや項目や表などを入れたり色付けなど HTML/CSS を駆使しますので、

実践的な HTML/CSS の勉強ができます。

また、ブログで Googleアドセンスやアフィリエイトなどで、収入を得る可能性も出てきます。

ただ、ブログを書くことの難しいところは、何を書くかということを考えるのが難しく、

自分が書いたブログが、多くの人に見られるまでにかなりの時間がかかります。

ブログで収入を得るというよりは、HTML/CSS の勉強のために、ブログを書くで良いと思います。

５.２. HTML/CSS の勉強のためのブログの始め方

ブログを始めるということは、インターネット上に自分の書いた文章を公開することになります。

もし、ブログを始めてみようと思っている方は、無料のブログサービスから始めるのがおすすめです。

このブログも無料のはてなブログで書いています。

また、HTML/CSS の勉強をしながら、本気でブログから収入を得ていきたいと思っている方には、

ランニングコストがレンタルサーバーと契約して WordPress で始める方が良いです。

無料のブログサービスの始め方と WordPress の始め方について簡単に説明していきたいと思います。

５.２.１.　無料ブログサービスの始め方

無料のブログサービスは、はてなブログや Blogger など多数ありますが、

はてなブログで始めるのがおすすめです。

私は、Blogger というブログサービスでブログを書き始めましたが、

使い勝手としては、はてなブログの方が使いやすいです。

また、閲覧数もはてなブログを書き始めた当初から、1日に数人程度見てくれているので、

やる気がまあまあ維持できました。

ブログに書く内容を考えることに時間はかかりますが、

HTML/CSS を活用しながら記事作成をするということが目的ですので、

勉強の意欲も維持できると思います。

５.２.２.　レンタルサーバーを使用したブログの始め方

レンタルサーバーを使用して、ブログを始めるには、ほとんどの場合 WordPress を使用します。

WordPress とは、PHP で作成された無料のアプリケーションで、

ブログを書くためには、最適なアプリケーションです。

WordPress にある様々なテーマを選択することで、すぐにブログを書き始めることができます。

ただ、WordPress は無料ですが、インターネット上に公開するためには、

レンタルサーバーと契約する必要があります。

ランニングコストがかかりますが、アフィリエイトや Googleアドセンスでの収入を目的にすると、

HTML/CSS を独学で勉強する意欲が出てきて継続できると思います。

また、レンタルサーバーを契約する前に WordPress を触ってみたい場合には、

「WordPressをレンタルサーバー無しで使用する手順 - 水瓶座列車」

を行うことで触ることができます。

手順は少し多いですが、難しくありませんので簡単にできると思います。

まずは、WordPress に触れてからレンタルサーバーと契約するかどうか考えると良いです。

参考までに、レンタルサーバーは、数多くありますので、

代表的なレンタルサーバーのおすすめプランや料金、簡単な特徴を一覧表にしてみました。

サーバー名	プラン名	１２ヶ月契約時の料金	特徴
エックスサーバー	スタンダード	キャンペーン中 1100円ー＞880円	ドメイン永久無料２個容量：500GB
ConoHa WING	ベーシック	キャンペーン中 1452円ー＞971円	ドメイン永久無料２個容量：300GB
ロリポップ！	ハイスピード	キャンペーン中 990円ー＞660円	ドメイン永久無料２個容量：700GB