更新日: 2018年10月11日
公開日: 2015年09月24日

HTML初心者がおさえておきたい基本と学習方法

基礎知識を抑えれば他のプログラミング言語より簡単にできる…その敷居の低さがHTML/CSSの魅力だったりします。

今回はそんな基礎知識などHTML/CSSの入門知識を解説していきますね！ちなみにこの内容は実際のレッスンで使用している教科書に沿った内容なので、CodeCampのレッスンがどんな感じなのかのイメージも掴んで頂けると嬉しいです。

HTML入門
HTMLとは？
要素とタグ
属性とは？
HTMLの書き方とは？
HTML初心者におすすめの本とは？
作りながら学ぶ HTML/CSSデザインの教科書
スラスラわかるHTML&CSSのきほん
いちばんやさしいHTML5＆CSS3の教本人気講師が教える本格Webサイトの書き方
CSS入門
CSSとは？
CSSの記述方法
セレクタとプロパティ
はやく上達するコツ
まとめ

HTML入門

まずはHTML入門知識について解説していきましょう。HTMLはWebページを作るベースとなるもので、後述のマークアップをしっかり行うことで質の高いWebページを作ることができます。

HTMLとは？

HTMLとは「HyperText Markup Language」の略語です。

簡単に言うと「文書の各部分がどのような役割を持っているのかを示す」ことができます。例えば下記の文章を人間が見た時は「ここが見出しだ」など文章の構成がぱっとわかりますよね？

マークアップ(Markup) ハイパーテキスト(HyperText)

そしてランゲージ(Language)は言語のことなので、HTML(HyperText Markup Language)とは「文章の構造を定義する高機能なテキストファイル」ということになります。

要素とタグ

要素とは見出し・段落など文書の構造のことで、要素を定義するための記号としてHTMLタグが用いられます。要素とHTMLタグの基本構成は以下です。

よくある質問：要素は全部覚えないとダメですか？

コードキャンプ受講生の方からよく頂くご質問として「<p>や<img>などの要素は全部覚えないとダメですか？」というものがあります。

答えは「最低限だけでOK」。というのもHTMLの要素数は100種類以上あり、全部覚えるのは大変です。なのでWeb上で公開されているリファレンスなどを活用しながら、必要なシーンで適宜調べて書いていくのがおすすめです！

ちなみにどの要素を使えばいいのかわからない…という時には「HTMLやりたいこと」で検索するとふさわしい要素名がヒットしたり使い方を解説しているWebサイトを見つけられますよ！

関連記事HTMLの要素を解説

属性とは？

属性は要素の中に付加的な情報を埋め込む役割を持ち、タグの中に記載するものです。要素の中には属性を埋め込まないと意図する動作をしてくれないものもあります。例えばその代表的なものが<a>。

属性名「href」に対して属性値「リンクさせたいURL」を与えてやり、属性値は”(ダブルクオーテーション)で囲います。こうすることでa要素はリンクの動きを実現してくれるのです！ちなみに属性の利用には次のようなルールがあります。

開始タグに記載する
設定できる属性は要素ごとに異なる(全ての要素に設定できる属性もある)
属性は1つの要素に複数設定することができる

よくある質問：a要素はなんて読むんですか？

こちらもよくある質問で、要素の読み方についてです。a要素は正式には「アンカー要素」と読み、hrefは「エイチレフ」と読みます。

ちなみにhrefは「ハイパーレファランス」の略。読み方については書ければ何でもいいと言えばいいのですが、正式な読み方を知っている方がかっこいいのでぜひ覚えてくださいね！

お探しの記事は見つかりませんでした

HTMLの書き方とは？

それでは、ここからはHTMLの書き方について、基礎的な部分を説明します。

HTMLのコードを大きく2つにわけると、head要素とbody要素があります。headとは、HTML自体に関する情報（タイトル・関連ページなど）を書くための要素です。本の表紙や作品情報と捉えるとよいでしょう。bodyとは、HTMLの本文（見出し・段落など）を書くための要素です。本の本文と捉えるとよいでしょう。 HTMLのコードでは、headを上に書き、その下にbodyを書くのがセオリーです。そして、headとbodyはどちらも1回ずつしか使えません。

    <!DOCTYPE html>
    <html lang="en">
    <head>
　　★ここにHTMLの情報を記述します
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        ★ここにHTMLの本文を記述します
    </body>
    </html>

HTML初心者におすすめの本とは？

HTMLの基本はつかめましたか？ここからは、初心者がこれからHTMLを学んでいくうえで、頼りになるおすすめの本を紹介します。

作りながら学ぶ HTML/CSSデザインの教科書

posted with amazlet at 17.03.26

高橋朋代森智佳子
SBクリエイティブ
売り上げランキング: 16,743

Amazon.co.jpで詳細を見る

プログラミングを学ぶには、実際にものを作りながら学習するスタイルが一番効果的です。

この本では、実際にサイトを作りながら、初心者がHTMLを習得するためのエッセンスを学ぶことができます。

サイトが完成した達成感も味わえるので、一度は学習をあきらめたかたにもおすすめできる一冊。

PCド素人のワタクシですが、仕事の合間にコツコツ勉強していたら、マスターとまでは行きませんが、ソコソコまともなHPを開設することが出来ました。苦手意識も吹っ飛ぶぐらい分かり易く説明してくれています。 HP自体の作成は、本当に完全無料で作ることが出来ました。 UPする際も、URLや容量に拘らなければ無料サーバーで十分開設できると思います。他の書籍と比べたことが無いので、何とも言えませんが、個人的には大満足の一冊でした。

【Amazonレビューより引用】

スラスラわかるHTML&CSSのきほん

posted with amazlet at 17.03.26

狩野祐東
SBクリエイティブ
売り上げランキング: 3,490

Amazon.co.jpで詳細を見る

わかりやすく丁寧に基本を扱っているので、HTMLの経験がないかたでもこの本をやればしっかりと実力がつきますね。

疑問になりそうな点を1つずつ学習できるので、わかった気になることはなく、きちんとコードを書けるようになります。

またコードを書く部分だけではなく、ブラウザやエディタなどの説明や、Web制作の流れも学べるので、初心者でもあまり迷うことなく学習できるでしょう。

演習形式で小さなサイトをつくっていくのですが、説明もわかりやすく、できあがっていくデザインもいけてるので、ディアゴスティーニのような達成感がありました。

小手先のテクニックや逆引き本ではなく、HTMLとCSSの知識の足腰を鍛えるための基本がぎゅっとつまっているので、応用を生み出すベースとして、先々役にたつ内容だと思います。新入社員や初学者におすすめです。

【Amazonレビューより引用】

いちばんやさしいHTML5＆CSS3の教本人気講師が教える本格Webサイトの書き方

いちばんやさしいHTML5＆CSS3の教本人気講師が教える本格Webサイトの書き方「いちばんやさしい教本」シリーズ

posted with amazlet at 17.03.26

インプレス (2016-04-04)
売り上げランキング: 4,567

Amazon.co.jpで詳細を見る

HTMLが全くわからない人でもとっつきやすく、かつスピーディに知識を身につけるならこの本でしょう。

簡潔かつ丁寧な説明なので、つまずくことも少なく学習できますね。

演習形式で小さなサイトをつくっていくのですが、説明もわかりやすく、できあがっていくデザインもいけてるので、ディアゴスティーニのような達成感がありました。

小手先のテクニックや逆引き本ではなく、HTMLとCSSの知識の足腰を鍛えるための基本がぎゅっとつまっているので、応用を生み出すベースとして、先々役にたつ内容だと思います。新入社員や初学者におすすめです。

【Amazonレビューより引用】

【関連記事】：素人でもプロ並みの配色ができるデザインパターン参考サイト21選

素人でもプロ並みの配色ができるデザインパターン参考サイト21選

Webデザインで大変重要な要素の一つ、配色。ベテランデザイナーでさえ一度配色に悩んでしまうと悪循環からなかなか抜け出せないときもあるほど難しい世界です。その奥深さを象徴するかのように、Web上には配色に関するツール・サイトが数多く公開されています。覚えておくとイザというときに役に立つ、無料のオンラインツール・サイトをご紹介します。

CSS入門

次はHTMLに装飾をほどこすす為のCSSについて入門知識をご紹介していきますね。

HTML5からは、「文章の構造を定義するのはHTML」「装飾を行うのはCSS」という線引きをしっかりしていきましょう、という考え方になっているので、Webページの見栄えに関することは基本的にCSSで記述していきます。

CSSとは？

CSSは「CascadingStyleSheets」の略で、HTML文書の装飾やレイアウトをほどこすための言語です。

HTMLだけでWebページは作れますが、CSSを利用しないと白背景に黒字という愛想のないページになりますので、綺麗なWebページを作る為にもCSSの使い方はしっかりマスターしてくださいね！

CSSの記述方法

HTMLの「どこの部分の」「なにを」「どんな値にするか」を決まった書式に従い書いていくのがCSSの基本です。基本書式は下記の通りで、お手本では「HTMLの

タグの文字色を赤にする」と記述しています。

セレクタとプロパティ

基本書式の「どこの部分の」にあたり、CSSを適用する対象を指定するのがセレクタです。

セレクタは要素や一部の属性を指定でき、指定したセレクタがHTMLに複数あった場合は全てにCSSが適用されます。使い方は、セレクタで「どこの部分」を指定した後、「{}」で囲まれた中にプロパティと値を書き、適用するデザインを指定するという方法です。

ちなみにCSSで指定できるプロパティはたくさんありますが、これも全部覚えられる量ではないのでリファレンスなどを活用しながら書いていくのがおすすめです！

よくある質問：CSSを個別にかけたい時はどうすればいいですか？

熱心な受講生さんからよく頂く質問です。例でご紹介している方法だとHTML内に登場する指定要素全てに同じCSSがかかりますが、そうしたくない場合もありますよね。

そんな時は「id」や「class」という個別にCSSをかけるテクニックを活用して、任意の場所にだけ特定のCSSをかけていきます。（少し難しいのでレッスンでは後半戦で解説しています）

【比較表付】Webデザインをオンラインで学べる講座スクールコース・講座5選

Webデザイナーとして自宅で副業を目指したい、手に職をつけてスキルアップしたいあなた、Web系の仕事が気になっていませんか？とはいえ、仕事につけるほどの知識を独学で身につけるのはなかなか難しく、また、スクールに通える時間もないと、一歩が踏み出せないでいる方も多いと思います。日々忙しいあなたでも、オンラインスクール講座なら、会社への通勤途中や子どもが昼寝をしている間など、移動時間や隙間時間でも学習ができます。今回は人気のWebデザインを、独学でWebデザインを勉強できる通信(オンライン)講座をまとめてみました。ぜひ、チャレンジしてみてくださいね！