ブログ

【サイト制作】初心者がHTMLを勉強するために必要なもの

初心者がHTML+CSSでコーディングを覚えるために必要な学習方法や、PC環境の構築など、管理人の経験をもとにまとめました。HTMLのコーディングはプログラミングとは言えませんが、プログラミング的な要素というのは「好き嫌い」がはっきり分かれます。

「これから始めてみようかな?」と考えてる人は、まずは「学習方法(初心者編)」を試して下さい。ここで「ん~~~」と思った方は多分この仕事には向いてません。

単にWEBサイトを作れるようになりたいだけならHTMLやCSSだけを覚えればいいですが、これで食っていきたいと思っている場合は、HTMLとは関係ない知識も必要になってきます。

学習方法(初心者編)

「HTMLやCSSに触れるのは初めて」という方向け。まずはここから「HTMLでホームページを作る仕組み」の理解から始めてみるといいと思います。

オンライン学習サイト

色々なサービスがありますが、代表的なサイトを2つご紹介します。一応注意点ですが、学習サイトのレッスンを修了したからといって、お金が取れるホームページが作れるようにはなりません!

HTMLを「かじる」程度のものだと思ってください。

Progate(プロゲート)

HTMLやCSS以外にも様々な言語のプログラミング学習が可能です。どのコースもほとんどの場合は、さわりの初級コースは無料で学習可能な様ですが、中級コース以上は有料となります。

HTML&CSSの学習コースは全7レッスンで、初級~上級に分かれており各コース1時間~4時間程度の学習時間(実際はそんなにかかりません)となります。

プロゲートの特徴としては、オンラインのエディタ機能がありますので、実際にHTMLやCSSでコーディングしながらレッスンを進められるので、自身のPCやスマホに学習のための環境を作る必要が無いところです。

サービス概要
サイトURL https://prog-8.com/
料金 初級コースまでは無料 ※中級コースから月額980円(税別)
その他 オンラインエディタによる学習が可能なので環境構築がいらない

ドットインストール

こちらもメジャーな学習サイトです。主な特徴は動画視聴による学習となります。

1レッスン1分~3分程度の動画を「流し見」する感じで、プロゲートとの違いは「オンラインエディタ」による学習機能が無い事です。単に動画を視聴するだけなので、個人的な意見ですが頭に入りずらいと思います。(管理人は書いたり打ち込んだりして覚えるタイプなので)

ドットインストールも「無料会員」と「有料会員」がありまして、プレミアムレッスン動画は有料会員のみ視聴可能。他、動画内で説明してる音声の文字起こしが表示されるとか、素材ファイルをダウンロードできるとか無料会員より機能的に優遇されてますが、そのほとんどは無くても困らない機能ばかりです。

動画を見るだけなら必要ありませんが、エディタ機能がないので実際にコーディングしてみたい場合は、自身のPCに何らかのエディタソフトの導入が必要です。

→おすすめエディタソフトはこちら

サービス概要
サイトURL https://dotinstall.com/
料金 無料 ※プレミアム動画の視聴と機能制限解除は月額1080円(税込)
その他 オンラインエディタ機能が無いので自身のPCに環境構築が必要

サルワカ

上記2サイトとは方向性が違いますが、HTMLやCSSはもちろん、WEBサイトの仕組みまで解りやすく解説してくれています。様々な解説がSTEP33までありますので、全て見終わるころにはWEBサイトの仕組みやHTMLなどについて、何となく理解できてると思います。

サルワカは解説サイトなので、誰でも無料で閲覧できます。プロゲートやドットインストールと並行して利用してみてください。

サービス概要
サイトURL https://saruwakakun.com/html-css/basic
料金 無料

学習方法(中級者以上)

HTML+CSSをある程度理解し、簡単なレアイウトであればコーディングできる程度になってきたら中級者です。本格的にプロを目指すなら一歩踏み込んだ学習が必要です。では具体的に何をするのか?キーワードは「真似る」です。

デザインの摸写

WEBサイトの摸写です。色んなサイトのデザインだけを見て、自分なりのコーディングでサイトを構築してみてください。HTMLとCSSを手っ取り早く覚えるには経験上、これしかないです。頭で理解しようとしても、中々技術までは身につきません。スポーツがいい例です。何度も何度も同じ練習を繰り返して体に覚えこませる。失敗しながらも何度も練習してるうちに、個人差はあれど自然と身についていくものです。

HTMLを覚えるのに一番いいのは、指導してくれる経験豊富な先輩がいて、日常的にコーディングに携われる制作会社に就職するのが一番ですが、今のご時世、新卒でもない限り業界で働こうと思ったら即戦力を求められますので、自分でそういった環境を作って学習するしかありません。

そのために摸写を繰り返して技術を身に付けるのが非常に有効です。

自分で作ったデザインではなく、他人がデザインした様々なデザインのコーディングに挑戦してください。レイアウトが簡単なものから複雑なものまでありますが、まずは簡単そうなものから着手してください。といっても、現段階では簡単なのか難しいのかの判断すらつかないかもしれませんので、オーソドックスな2カラムのレイアウト(メインコンテンツ+サイドメニュー)から始めてください。

カラム数だけで言えば、基本1カラムなランディングページ(LP)の様なレイアウトの方が簡単なのですが、LPは不規則なデザインが多いので中級者レベルでは逆に敷居が高いと思いますので、左右に分けてあるだけの単純な2カラムがオススメです。

また、2カラムのレイアウトでは要素の横並びが必要になりますので、float・flex・gridなどを駆使して、様々な要素の横並びを覚える事ができると思います。

実用書などの書籍で学習

巷に溢れるHTMLやCSS関連の書籍ですが、書籍での学習は初心者の段階ではあまりおすすめできません。管理人の知る限りでの初心者向けを謳った書籍でも、ある程度の予備知識がある前提で書かれてるものが多い。文中には普通に専門用語なども飛び交っており、「これから始めよう!」という初心者には意味が解らずに途中で投げ出してしまう可能性が高いので、書籍での学習は中級者以上をオススメします。

オススメの書籍のジャンル

HTMLの用語やCSSのプロパティなどを説明したような書籍は全く買う必要無いと思います。これから覚えようって人にはあまり役に立ちません。

オススメはズバリ「サイトを作りながら覚える系の書籍」

何がオススメかというと、本を執筆してる著者の方はその道のプロです。恐らくあなたが思いもつかない方法でコーディングしてるのを目の当たりにすると思います。「こんな方法もあるのか!」といった事が書籍からは沢山吸収できると思います。

サイトを作りながら覚える系の書籍には、自身のPCで書籍の学習をするための環境の構築方法も書かれているので、そういった部分の知識も自然と身につきます。

他の人がコーディングしたサイトを見る

当然ですが表面上のデザインを見るわけではありません。サイトのソースコードを見てください。現在WEB上で閲覧できる稼働サイトのほとんどは、プロがコーディングしたものです。それらのソースコードを見て、どのようなコーディングをしているのかを知るのは非常に勉強になります。書籍での学習と同様、自分では考えつかないようやり方を見つける事でしょう。

それらを参考にして自分のコーディングパターンとして追加し、ものにしてください。

ソースコードの確認方法

Google ChromeやFirefoxのデベロッパーツールを使えば、HTMLとCSSを同時に確認することができます。ソースを確認したページを開いて、キーボードの「F12」ボタンを押すか、ページ上の確認したい部分にカーソルを合わせ、右クリック→検証(要素の調査)でソ-スコードが表示されます。

学習に必要な環境の構築

WEBサイトを構築するにあたり、必須なソフトや理想的なPC環境などがいくつかあります。

HTMLを編集するためのエディタや、デザインの作成・画像の加工をするためのソフトなど、無いと困るソフトからあると便利なソフトや、WEBサイト作成に必要なPC性能までをご紹介します。

PCの性能はどの程度あればいいのか?

画像の加工作業なども行う場合(Photoshop・Illustratorなど使用)の前提で、最低限この程度あればというスペックとしては、

CPU Core i7-3770以上
メモリ 8G以上
ディスクドライプ SSD(理想)
容量:Cドライブだけでも512GB以上は欲しい
グラフィック オンボードで可(HD Graphics 4000など)
モニター フルHD(1920x1080)
※理想は2台以上でのマルチモニタ

上記程度あれば、PhotoshopとIllustratorの同時起動でも、さほどストレスを感じることなく作業できると思います。PC自体はノートでもデスクトップでも構いません。(管理人は自作PCなのでデスクトップです)

ちなみに、上記程度のスペックであればAmazonなどで中古PCとして3万円程度(モニタ別)で購入できます。

各種ソフト

HTMLを編集したり画像を加工したり、デザインを作ったりと、WEBサイト作成に必要なソフトをご紹介します。

HTMLエディタ

HTMLもCSSもPCに標準搭載されている「テキストメモ」などで作成することが可能ですが、世の中には便利な「HTMLエディタ」が多数存在します。

HTMLエディタの特徴としては、HTMLのタグやCSSのプロパティなどの「補完機能」があり、文字を打ち込んでいくと該当する候補が表示されます。また、コードの色分けがされることにより可読性もUP!書いたコードが実際にブラウザでどのように表示されるのかを確認できる、プレビュー機能などがあります。

オススメはadobeの「Brackets」で、無料で利用できます。

HTMLエディター
Brackets 無料
プラグインと呼ばれる拡張機能で、様々な便利機能を追加できます。
※2021/9/1にadobeによるサポートが終了しました。

製品ページ:http://brackets.io/
Adobe Dreamweaver 有料 月額:2,480円(単体プラン)
機能が豊富です。ソースコードとして入力するエディタ機能はもちろんですが、HTMLのタグやCSSなどがわからなくてもデザインモードで編集すれば、直感的に要素を挿入していくだけで自動的にソースコードが生成されます。
全ての機能が試せる体験版があります。

製品ページ:https://www.adobe.com/jp/products/dreamweaver.html
Visual Studio Code 無料
Microsoftから提供されている無料のコードエディターです。こちらもBrackets同様、色々な便利機能を追加できます。

製品ページ:https://azure.microsoft.com/ja-jp/products/visual-studio-code/

画像作成・編集・加工

WEBサイトのデザインを作成したり、写真から被写体以外の余計な部分を削除するなど、画像の作成や加工には専門のソフトが必要です。

この手のソフトは、機能としてどの程度の事ができるのか?で好みが変わってきますので、一概にこれがオススメとはいえません。ちなみに管理人はPhotoShop一択です。

画像加工・編集ソフト
Photo Scape 無料

複雑な加工はせず人物などに「モザイク処理」や「ぼかし」を入れる程度の加工であれば十分役に立つソフトです。ただし、初心者向きの基本的な機能しか網羅されていないので、複雑で高度な加工はできません。

製品ページ:http://www.photoscape.org/ps/main/index.php
GIMP 無料

PhotoShopなみに高機能な画像編集ソフトです。製品ページは英語サイトですが、ソフトは日本語対応されてるので安心。「PhotoShop買うまでもないが高機能なソフトが欲しい」場合は、これで十分かもです。

製品ページ:https://www.gimp.org/
PhotoShop 有料 月額980円~(フォトプランの場合)

画像編集ソフトの金字塔。業界人なら誰もが知ってる有名ソフトです。画像の編集に関してはこのソフト以上のものはないのではないでしょうか。何でもできます。

製品ページ:https://www.adobe.com/jp/products/photoshop.html

ロゴ・イラストなどの素材作成

PhotoShopは画像(写真)の編集・加工ソフトで、ある写真とある写真を合成したり、撮影時に露出が合わず暗くなりすぎた(明るすぎた)画像を適切な明るさに変えたりといった写真の加工に使う事が多いです。もちろん写真の加工だけではなく、様々な用途に使う事ができるソフトなので、管理人はWEBデザインのほぼ全てをPhotoShopで行っています。

しかし、PhotoShopでは作業しずらい事もあります。しずらいというよりは、別のソフトを使った方が同じ作業でも早くて楽にできる分野があります。

PhotoShopは基本何でもできるのですが、イラストやロゴを作成したり、印刷物の出力データ等を作成する際はPhotoShopよりも作業しやすいソフトがあります。画像の編集・加工をするのではなく、一から素材を作る時はベクターデータとして画像を扱えるソフトで作成すると作業効率が上がります。

代表的なソフトにIllustratorがあります。

イラスト・素材作成ソフト
Inkscape 無料
お金取ってもいいんじゃないの?というくらい高機能なベクターデータソフトです。

製品ページ:https://inkscape.org/ja/
PrimarDraw 無料
オンラインで利用できるベクトルーデータツールです。

高度な機能はありませんが、インターフェースも非常にシンプルで初心者にも扱いやすいと思います。

ツールページ:https://www.primaldraw.com/
Illustrator 有料 月額2,480円(単体プラン)
PhotoShop同様、超有名ソフトです。WEB用の素材から印刷用データまで、幅広い用途に使えます。管理人もこのソフト使ってます。

製品ページ:https://www.adobe.com/jp/products/illustrator.html

その他ソフト

PHPやPerlなど、サーバーサイドでしか動作しないファイルの確認や、作成したHTMLファイルをサーバーにアップロードするためのソフトなど、WEBサイト制作にかかわるソフトは他にも沢山あります。

代表的なソフトと用途などをご紹介します。

FTPソフト

作成したHTMLファイルや画像をサーバーにアップロードするソフトです。HTMLの学習段階では必要のないファイルですが、そのうち使う事になります。

WinSCP 無料

製品サイト:https://winscp.net/eng/docs/lang:jp
FFFTP 無料

製品ページ:https://ja.osdn.net/projects/ffftp/
サーバー環境構築

HTMLファイルはPC上で開いて動作を確認することができますが、PHPやCGIといった言語で書かれているものはPC上では直接動かすことができません。基本的にはWEBサーバー上でしか動かないのですが、PC上にWEBサーバーと同じ環境を作ってあげれば、動作させることが可能になります。

サーバーとして機能させるにはサーバーソフトをインストールする必要があり、有名なソフトはApacheと呼ばれるものですが、ApacheだけインストールしてもWEBサーバーとしては機能せず、他の様々な機能を実装してあげなければなりませんが、その道の専門家でなければサーバー構築はできません。

そこで登場するのが、WEBサイトを含めたWEBアプリケーションの実行に必要なソフトウェアをパッケージとして、PCにインストールできるソフトがあります。

XAMPP 無料
WindowsPCでよく使われるソフトです。インストール後の各種設定は実際のサーバーと同じなので、専門的な知識が必要ですが、有名なソフトなので使い方や設定方法はいくらでも出てきます。とはいっても初心者には敷居が高いものとなっています。

製品サイト:https://www.apachefriends.org/jp/index.html
MAMP 無料
XAMPPと同じようなソフトですが、こちらはMacユーザーが多いです。もちろんWindows版も用意されてますが、使い方を説明しているサイトはMacでの説明が多いです。管理人の環境だけかもしれませんが、MAMP使ってると再インストールしないと解決しないエラーが何度も発生することが多いので、使うの止めました。

製品ページ:https://www.mamp.info

まとめ

管理人の経験上の話ししかできませんが、HTML+CSS覚えるのに一番手っ取り早いのは「摸写」と「真似」です。管理人も、書籍や他人様のサイトからやり方真似て、只管に摸写を繰り返すことで今に至ってます。

ただし、この過程をある程度は「楽しい」と思えないと続けるのは難しいでしょう。管理人は目からウロコなやり方を見つけるたびに、まるで自分自身で難問のパズルでも解いたかのような喜びを感じました。

こんな感覚になる人の方が少ないと思いますが、やってて苦痛に感じるのであればすぐに止めて、他のやりたいこと探した方がいいでしょう。

苦痛だしやりたくもない。だけどやるしかないといった状況の方も少なからずいると思います。そんな状態で学習のモチベーションなんて上がるはずもありません。そんな時は自分のためになるサイト誰も興味が無いと思うけど自分はあったらいいなと思うサイトを作るところから始めてみてください。ものすごいコアでマニアックな内容でも構いません。自分の興味がある題材で学習できるのであれば、気持ちも大分違ってきます。

という訳で結論。人のコーディング真似て摸写を繰り返す。 本気で習得したい人、これが一番の近道だと思います。

この記事を書いた人管理人

SAKURAGRAPHICA代表
会社員の傍ら、フリーランスでWEBサイトの制作やWordPressによるCMSの構築・障がい者の就労支援としてホームページ制作の職業指導員も行っております。

SAKURAGRAPHICAができること

最近の記事 おすすめ記事
PAGE TOP