スキル

初心者がHTMLとCSSの基礎を身につける方法

自分でWebサイトを作成できるようになるには、Web制作の基本となるHTMLとCSSを基礎からしっかり学びたいもの。しかし、全くの初心者だと何から学べばよいのか分からないことも多いでしょう。プログラミングに関する本を買うべきなのか、それともプログラミングスクールに通うべきなのか、悩んでしまいますよね。

そこで、この記事では、Web制作を学びたい方に向けてHTMLとCSSの基礎と学習方法についてご紹介しようと思います。

Webページの枠組みとなるHTML

HTMLとは、あらゆるWebサイトの枠組みを形作る言語です。どんなWebサイトにもHTMLは使われているので、Web制作を学ぶ上で必ず身につけておく必要があります。

まずは、HTMLとはどのようなものか解説します。

HTMLはタグを使って意味づけを行う言語

Webサイトは複数のWebページが集まってできています。そして、HTMLは、「ここが見出し、ここが本文」というようにWebページの各部分の意味づけを行うマークアップ言語で、Webページの構造を形作っています。

コンピュータは私たち人間が使う言葉を理解できないので、コンピュータに指示を出す場合は、コンピュータが理解できる言語を使用しなければなりません。その言語の一つがHTMLです。

HTMLでは、意味づけを『タグ』を使って行っていきます。例えば、Webページのタイトルなら<h1></h1>というタグを使います。Webページのタイトルが「トマトの上手な育て方」であれば、HTMLでは「<h1>トマトの上手な育て方</h1>」と書くことになります。

Webページの基本構成

HTMLだけでもWebページは作れますが、それだと文字や画像が配置されているだけのシンプルなWebページになってしまいます。そこで、Webページの制作には、HTMLだけでなく、Webページ全体のスタイルを設定して見栄えを良くする『CSS』と、動きをもたらす『JavaScript』が使われます。

つまり、HTMLとCSS、JavaScriptを併用することによってはじめて魅力的なWebページになるというわけです。

HTMLタグの書き方

HTMLタグには、『<>』を使った開始タグと『</>』を使った終了タグとがあります。開始タグと終了タグの間に文章の内容を書く仕組みになっています。例えば、以下の要素を見てみましょう。

<p class=apple>こんにちは</p>

この要素の場合、『p』がタグ名、『class』が属性名、『apple』が属性値、『こんにちは』が内容になります。少し分かりにくいですが、HTMLの基礎を学習したばかりの頃は意味が分からなくても問題ありません。実際に手を動かしてHTMLコードを書き続けていると少しずつ意味が分かるようになるので、焦らずに学習を進めていきましょう。

WebページをデザインできるCSS

CSSは、HTMLで作られたシンプルなWebページを装飾するための言語です。Webページ上の文字や背景に色を付けたりすることができます。

早速、CSSの活用方法を見ていきましょう。

CSSでできること

CSSでできることは多くありますが、例えば以下のような装飾が行えます。

・文字の大きさを変える

CSSを使えば、Webページ本文の文字の大きさを通常サイズにしつつ、見出しの文字サイズのみ大きくするなどの設定が自由にできます。

・文字のカラーを変える

Webページの文字には色んなカラーが使われていますよね。CSSを使えば、文字のカラーを『pink』や『blue』といったカラー名や、『#4f4f4f』といったカラーコードで指定できます。

・背景色を変える

Webページの背景色を好きなカラーまたは画像に変えることもできます。また、Webページの一部分の背景のみ色を変えることもできます。

CSSには以下の通り、3パターンの書き方があります。

・CSSファイルを作って読み込ませる方法

・HTMLのファイル内に『style』タグを使って書く方法

・HTMLタグの中に直接書き込む方法

それぞれの書き方を見ていきましょう。

CSSファイルを読み込ませる方法

Web制作で一般的なのは、HTMLファイルとは別にCSSファイルを作成しておき、これを読み込ませる方法です。HTMLファイルは1つでも、読み込ませるCSSファイルによってデザインを変えられます。この方法だと1つのHTMLファイルからパソコン版とスマートフォン版のWebサイトが作れるので、Web制作がスムーズに進みますよ。

styleタグを使って書く方法

HTMLファイル内で『style』タグを使うと、CSSが適用されます。こうすれば、そのWebページしかスタイルが変化しないので、特定のWebページだけデザインを変えたい場合に便利です。

HTMLタグの中にCSSを書き込む方法

HTMLタグの中にCSSを書き込む場合は、別にCSSファイルを用意する必要がありません。しかし、一つ一つCSSを書いていく作業は手間がかかるので、一部分のデザインだけを変更したい場合に使用すると良いでしょう。

Webページを作成する方法

実際に、HTMLとCSSを使ってWebページを作成する手順を解説します。HTMLとCSSの基礎を学ぶ前に一通りの流れを確認しておきましょう。

HTMLファイルを作成する

最初にHTMLでWebサイトの骨組みを作っていきます。HTMLファイルはアドビ社の『Dreamweaver』で作成するのが初心者にはおすすめです。『Dreamweaver』を使用すれば、コードを書きながらプレビュー画面でHTMLページを確認できます。

参考:Dreamweaverチュートリアル

また、<body></body>や<head></head>のように、HTMLファイルを作成するのに必要な基本タグがすでに用意されているので、スピーディにHTMLファイルを作成できます。

CSSファイルを作成する

HTMLファイルを作成しながら、CSSも書いていきます。CSSファイルを別ファイルで作る場合も、『Dreamweaver』を使用して作成できます。CSSのコードを書いていき、HTMLで書いた文字のカラーを変化させたり、余白を作ったりと、装飾を施していきましょう。

一通り完成したら、Webページをプレビューしながら修正を加えて、スタイルを微調整していきます。

サーバーをレンタルし、ドメインを取得する

HTMLファイルとCSSファイルが作成できたら、実際にWebページを公開する準備をします。まずは、Webサイトの置き場所であるサーバーを用意しましょう。レンタルサーバーを利用すると月額料金1,000円以下で場所を確保できます。

次にドメインを取得します。ドメインは自分のWebサイトの住所となるものなので、自分らしい名前を取得しておきましょう。

HTMLとCSSファイルを転送する

作成したHTMLファイルとCSSファイルをサーバーに転送します。その際、ファイル転送ソフトを利用すると簡単にアップロードできます。ファイル転送ソフトはレンタルサーバーからダウンロードできる場合もあります。

アップロードできたら、自分で設定したドメインが含まれているURLを入力して、Webサイトが表示されるかどうかチェックしてみましょう。

HTMLとCSSの基礎を勉強する方法

HTMLとCSSを学ぶ方法は数多くあります。書籍やプログラミングスクールを利用して学ぶ以外にも、最近ではオンラインで学べる学習サイトも増えてきました。ただ、どの学習方法が効率的かは人によって異なります。

ここからは、HTMLとCSSの基礎を勉強する方法と、タイプ別におすすめの学習方法をご紹介します。

Progateで基礎をコツコツ勉強する

HTMLとCSSを学ぶのであれば、実際に手を動かして自分でコードを入力していくのが上達への近道です。プログラミング学習サイトの『Progate』なら、実際にHTMLやCSSを書きながら学習できます。

パソコン版では、画面の指示通りにコードを書いていくことになります。自然に書き方が覚えられるので、初心者の方がHTMLやCSSの基礎を学ぶのにおすすめです。

スマホ版では、穴埋め式の問題に対してコードを埋め込んでいく方式で学習していくことになるので、パソコン版よりは難易度が低いです。パソコン版で行き詰ってしまった方は、スマホ版で学べばHTMLとCSSの基礎が身につきますよ。

パソコン版は、一人で好きな時間にコツコツとHTML・CSSを学習したい人向けだと言えるでしょう。一方、スマホ版は、パソコン版の復習をしたい人や、ベッドに寝ころびながら気軽に学習を進めたい人にもおすすめです。

参考:Progate

Udemyの動画を視聴しながら学習する

『Udemy』はプログラミングに限らず、WebマーケティングやCG制作など、あらゆるレッスン動画が公開されている学習サイトです。いろんなインストラクターの先生がHTMLとCSSの基礎を学べるさまざまなレッスンを公開されているので、自分にとって分かりやすい先生の動画を選んでください。

Web制作のレッスンは、先生の解説動画を見ながら一緒にコードを書いていくのがおすすめです。『Udemy』のインストラクターは皆さんハッキリと話されるので、聞き取りやすいですよ。

また、『Udemy』はパソコンサイトはもちろん、スマホアプリからでも動画を視聴できます。一般的な動画のレッスンは電車の中では止まってしまいがちですが、『Udemy』には画質変更機能が備わっているので、この機能を使って低画質に設定しておけば電車内でもスムーズに視聴できます。

参考:Udemy

好きなサイトを模写する

HTMLとCSSの基礎が分かってきたら、他のサイトの模写を始めてみましょう。「作ってみたい」「このWebページならできるかも」と思うWebサイトを見つけて、同じように作っていくのが模写という作業です。

模写はソースコードを見ずに行うのが理想的ですが、初心者の場合は、ソースコードを確認しながら同じように作れるか挑戦してみると良いでしょう。

模写するサイトをどれにしようか迷った時は、普段から何とく「好きだなぁ」と思っていたWebサイトを選んでみてはいかがでしょうか。好きなサイトだと難しくてもモチベーションを維持して頑張れるでしょう。

また、『Webデザイントレンド』というWebサイトのWebデザインギャラリーでは、いろんなWebサイトを紹介しています。こちらのWebサイトを参考に、模写するWebページを選んでみるのも良いですね。

参考:『Webデザイントレンド』 Webデザインギャラリー

自分のWebサイトを制作する

実際に自分のWebサイトを作ってしまうのも良い方法です。Webデザイナーとして働く場合も、自分のWebサイトを持っていればポートフォリオとして提出できます。HTMLとCSSの知識だけでも、素敵なWebサイトは作れますよ。

「思い通りのWebサイトになってないなぁ」と思った時は、Webデザインの本を参考にしてみてください。本屋さんや図書館に行けば、Webデザインやカラーデザインの本がたくさん並んでいます。

書籍にはオーソドックスでありながらもWeb制作の基本が詰め込まれているので、行き詰った時にインスピレーションを得られますよ。

自分のWebサイトを作れるようになったら、『ココナラ』を利用して格安でWebサイト制作を受注し、スキルと実績を増やしていくのもおすすめです。

参考:ココナラ

オンラインプログラミング教室を受講する

HTMLとCSSはWeb制作の基礎とはいえ、エラーが出てしまうと前に進めなくなってしまいます。エラーの原因が分からずに、何時間も手が止まってしまう人も少なくありません。

そんな時、助けてくれる先生がいてくれたら嬉しいですよね。最近では、プログラミング教室もオンラインのところが増えてきており、受講料も手ごろになってきました。独学でWeb制作を勉強するのが辛い場合は、オンラインのプログラミング教室を利用するのも手です。これなら、分からない所を先生にどんどん質問できますからね。

HTMLとCSSの基礎をしっかり身につけよう

HTMLとCSSの基礎を身につけるには、実際に自分でコードを書くのが一番です。しかし、最初のうちは「コードって何?」という状態でしょうから、自分でコードを書くのは難易度が高いと感じる方もいらっしゃるでしょう。

そんな時こそ、この記事でご紹介したHTMLとCSSの学習方法を参考にしてください。手を動かしているうちに、いつの間にか自由自在にWebサイトをデザインできるようになっていることでしょう。

無料講座|アクシグ式 最新情報
資金ゼロでネット物販を成功させる全手法


物販ビジネスで稼ぎたいけど、どうやって始めたらいいかわからない、売上が思うように伸びないなど悩んでいませんか?

本講座では世界最新の成功事例を実績をあげた成功者の経験をもとに、

  • 無在庫ネットショップ たった3ヶ月、1商品で 7214万9493円稼いだ方法
  • Amazonとネットショップで毎日39万円稼ぐ方法
  • 毎週19万3588円をInstagramから無料で集客して販売する方法
  • 無料でInstagramのインフルエンサーに商品を宣伝してもらう方法
  • 無在庫ストアで月商1億を超えた方法
  • 店舗せどりで1日1万円稼ぐ方法
  • アマゾンの在庫1パレットを僅か1000円で入手する方法
  • 無在庫ネットショップで儲かる商品を見つける海外の最新リサーチ法
などアクシグ代表の吉田が、日本ではまだ知られていない秘密の情報をお届けします。

あなたのビジネスを成功させるために、今すぐ限定情報を入手してください。