水瓶座列車

どこまで行けるか、とりあえず発車します。

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

本ページは、プロモーションが含まれています。

 

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

また、CSSは、HTMLで記述されたタグやレイアウトを装飾するためのもので、自分のサイトをイメージしたデザインにするためにはCSSの書き方も必須になります。

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

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

スクールに通う検討をしているなら、まずは独学で勉強してみてからでも遅くはありません。

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

 

 

 

 

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

 

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

・パソコン(WindowsMac)

・GoogleCromeやMicrosoft Edgeなどのブラウザ

・HTML/CSSを記述するためのエディタ

です。

 

パソコン(WindowsMac)

 

パソコンは、独学で勉強するためには必須です。OSはWindowsでもMacでもHTML/CSSの勉強はできます。

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

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

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

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

 

GoogleCromeやMicrosoft Edgeなどのブラウザ

 

ブラウザは、WindowsパソコンではMicrosoft Edgeが既にあり、GoogleChromeは自分でインストールする必要がありますが無料です。

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

 

HTML/CSSを記述するためのエディタ

 

エディタは、Windowsで言うと、メモ帳やワードパットなどを使用しますが、既に使用しているエディタがあれば、それで大丈夫です。

そして、テキストファイルの拡張子を「.html」や「.css」にすることで、HTMLファイル、CSSファイルとしてブラウザが認識するようになります。

なので、HTML/CSSを記述する際は、必ず「sample.html」、「sample.css」のような形にする必要があります。

 

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

 

HTMLのタグの種類やCSSについては、次項で説明するとして、

HTML/CSSの勉強の始め方として、段階を踏んで説明していきたいと思います。

 

<HTML/CSSの始め方ーその1>

 

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

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

 

上記の手順では、まだCSSを使用していませんが、

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

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

 

<HTML/CSSの始め方ーその2>

 

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

HTMLファイルをブラウザに表示する通常のやり方は、ブラウザから指定されたURLアドレスをWebサーバー経由で表示する流れになります。

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

Windowsパソコンの場合は、XAMPPという無料アプリで簡単にWebサーバーを動作させることができます。

XAMPPアプリのフォルダ内に自分が作成したHTMLファイルを置いて、ブラウザからアクセスすると自分で作ったHTMLを表示することができます。

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

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

ダウンロードしたexeファイルをダブルクリックするとインストーラが起動しますので、後は「次へ」を押していくとインストールが完了します。

その1の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の始め方ーその3>

 

実際にインターネット上に自分が書いたHTMLファイルを公開するためには、その2のやり方では、公開することはできなくもないのですが、セキュリティや24時間365日パソコンを自宅で動かし続けることはかなり負担になります。

そのため、インターネット上に公開する場合には、ブログサービスやレンタルサーバーを利用する必要があります。

Webサーバーは、ブログサービスやレンタルサーバー上で動作していますので、自分でWebサーバーを動作させる必要が無く、HTML/CSSを記述するだけでインターネット上に公開することができます。

また、無料のブログサービスを利用したとしても、インターネット上に公開しないまま、HTML/CSSの勉強する目的としてブログサービスを活用するのも有りだと思います。

ただ、ブログサービスの使い方を始めに理解する必要がありますが、難しくはありません。

本格的なホームページ作成の勉強をしたい場合には、まずは、「その2」のやり方でサイト作成の勉強をして、更にインターネット上に公開したい場合にはレンタルサーバーを使用することを検討すると良いです。

 

3.HTML/CSSの基本構造

 

それでは、HTML/CSSの記述のやり方について、説明していきたいと思います。

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

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

 

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

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

<head>タグは、記事本文以外でGoogleアナリティクスのコードやトップメニュー、CSS記述やCSSファイルの読み込みなどを行う部分で、

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

 

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

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

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

 (3) <body>タグ内で、局所的にCSSを設定する方法

があります。

<html>
 <head>
  <style type="text/css"> <- (1) <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'> <‐(2) <head>タグ内からCSSファイルを読み込む
 </head>
 <body>
  <span style="color: orange; font-size: 1.2em">
   (3)この部分だけstyleで設定したCSSになります。
  </span>
 </body>
</html>

 

上記の(1)では、<head>タグ内で、<style type="text/css"></style>でCSSを囲むことでCSSファイルを読み込まずに直接記述することができます。

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

上記の(2)では、<link>タグを使用して、HTMLファイルと同じフォルダ内にあるstyle-mobile.cssというCSSファイルを指定して読み込んでいます。

上記の(3)では、サイト全体ではなく、その部分だけにCSSを設定したい場合に、<span>タグにstyleでCSSを記述することで設定しています。<span>タグだけでなく他のHTMLタグにも同じようにstyleでCSSを設定することができます。

これらの3通りのCSSの設定は、同時に記述することができますが、同じ名前でのCSSの設定は、後から設定された方に上書きされますので注意が必要です。

 

例えば、上記の場合で、style-mobile.cssの中に、<h1>タグのfont-size=1.0emとされていた場合、<style>タグで書かれている設定は上書きされて1.0emが有効になります。

また、サイト全体設定には必要なく、一部分だけに強調したい場合や試しにやってみたい場合などには、(3)のやり方をすると便利です。

ただ、このやり方は、CSSが最後の設定に上書きされることを利用した形なので、同様の設定を多用する場合は、(1)や(2)に記述してサイト全体で有効になる設定にする方が良いです。

 

4.HTMLタグの種類

 

見出しや下線、表、画像などの表示などは、決められたHTMLタグを使用して、簡単に表示することができます。

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

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

タグ名 簡単な説明

<h1></h1>

<h2></h2>

<h3></h3>

文字の大きさとボールドを設定するタグで、h1が一番大きく数字が増えるごとに文字が小さくなっていく。主に、項目に使用する。

<span></span>

spanタグは、style=""と共に使用して、挟まれた文字を修飾する。

<div></div>

divタグで囲まれた部分を1つのブロックとして扱うことができる。

<table></table>

tableタグは、tbodyタグとtrタグ、thタグやtdタグを使用して、表を形成することができます。

<p></p>

単に文章を書くときは、必ずこのpタグで囲みます。

<li></li>

liタグは、文章の前に・が表示されます。

<ol></ol>

olタグの中にliタグを使用することで、項番ありのリストを形成します。

<img></img>

imgタグは、画像を表示する際に使用します。

 

そして、上記のようなHTMLタグに、CSSを使用することで色を付けたり、文字の大きさを変えたりすることができます。タグの使用方法の詳細については、ここでは省略します。

 

5.HTMLタグとCSSの関係

 

HTMLタグとCSSの関係のイメージは、CSSで記載した内容とHTMLタグを紐づけることで、色や文字の大きさなど自由に変えることができます。

紐づけのやり方は、HTMLタグに名前を付けて、その付けた名前と同じ名前を使用して、CSSに記述していきます。

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

<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タグに名前を付けるメリットは、CSSで設定した内容がサイト全体で使用できることにあります。

HTMLタグとCSSとの紐づけが理解できれば、後はHTML/CSSの参考書を辞書のような感じで使用するだけで勉強することができます。

私もCSSで設定できる内容を全て覚えているわけではなく、設定したいCSSがあるかどうかを参考書を辞書のように見て確認しています。

 

6.HTML/CSSの勉強を独学で続けていくための方法

 

HTML/CSSを継続して独学で勉強していくためには、何かしらの目的が無いとなかなか続けることができません。

副業でHTML/CSSの仕事をしたい、ブログで収入を得たいなど、具体的な目的を自分の中で設定すると良いです。

そして、勉強に対して何かしらの結果や成果がでると、継続していくモチベーションを保つことができると思います。

そのための一番のおすすめは、ブログを書くことです。

ブログを書くことは、章立てや項目や表などを入れたり色付けなどHTML/CSSを駆使しますので、HTML/CSSの勉強ができ、かつブログで収入を得る可能性も出てきます。

ただ、ブログを書くことの難しいところは、何を書くかということを自分で考えなければならず、また自分が書いたブログが他人に見られるまでにかなりの時間がかかります。

多くの人に見られるまでには時間がかかりますが、自分のブログをインターネット上に公開して他の人に閲覧された時には大変喜びを感じることができます。

ブログを始めるには、まずは無料のブログサービスから始めるのがおすすめですが、本気でブログから収入を得ていきたいと思っている方には、お金はかかりますがレンタルサーバーと契約してWordPressで始める方が良いです。

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

 

無料ブログサービスの始め方

 

無料のブログサービスは、はてなブログBloggerなど多数ありますが、はてなブログで始めるのがおすすめです。

私は、Bloggerというブログサービスで人生で初めてブログを書き始めましたが、使い勝手としては、はてなブログの方が使いやすいです。

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

ブログに書く内容を考える時間はかかりますが、HTML/CSSを活用しながら記事を作成をするという目的ができますので、勉強の意欲を維持できると思います。

はてなブログは、ここから登録することができます。

 

WordPressの始め方

 

ブログ記事をインターネット上に公開するためのWordPressを始めるには、レンタルサーバーと契約する必要があります。

ランニングコストがかかりますが、アフィリエイトGoogleアドセンスでの収入を目的にすると、HTML/CSSの勉強の意欲が出てきて継続できると思います。

参考までに、レンタルサーバーのおすすめは、エックスサーバー で、WordPressテーマで人気のあるCocoonが簡単に使用することができます。

また、レンタルサーバーを契約する前にWordPressを触ってみたい場合には、このブログで書いている「WordPressをレンタルサーバー無しで使用する手順 - 水瓶座列車」を行うことで触ることができます。

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

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

 

7.パソコンを持っていない方は中古パソコンがおすすめ

 

HTML/CSSの勉強を始めようと思っていて、これからパソコンを購入しようと考えている方は、新品より中古パソコンを購入する方が良いと思います。

何故かというと、勉強を辞めてしまってパソコンを使用しなくなってしまうかもしれませんので、中古パソコンだと出費を抑えることができます。

Amazon楽天などでも中古パソコンはありますが、ジャンクワールドという下記のパソコンショップは、液晶付きデスクトップパソコンがセール時は1万円以下になっていたり、ノートパソコンも1万円以下や1万円台前半で多数あります。

送料は無料ではありませんが、送料を含めても合計金額はかなり安く、また配送はヤマト運輸指定なので安心できます。

 

HTML/CSSに慣れてきて勉強や作業が継続できそうと思ったときに、自分だけの新品パソコンを購入する方が無駄にならないと思います。

 

8.最後に

 

HTML/CSSは、プログラミング言語よりも慣れるまでの時間はそれほどかかりませんので勉強を継続できれば、独学でも身につけることができます。

高いお金を払ってスクールに行くよりかは、まずは、この記事の「HTML/CSSの始め方ーその1」から始めてみると良いと思います。

 

<関連・おすすめ記事>

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

ブログ初心者が知っておきたいHTMLタグとCSSの書き方を解説 - 水瓶座列車

WordPressに必要なレンタルサーバーのおすすめランキング - 水瓶座列車

プログラミングを独学で勉強するためのLinuxパソコン準備手順 - 水瓶座列車