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

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

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

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

目次
  1. HTML入門
  2. HTMLとは?
  3. 要素とタグ
  4. 属性とは?
  5. HTMLの書き方とは?
  6. HTML初心者におすすめの本とは?
  7. 作りながら学ぶ HTML/CSSデザインの教科書
  8. スラスラわかるHTML&CSSのきほん
  9. いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方
  10. CSS入門
  11. CSSとは?
  12. CSSの記述方法
  13. セレクタとプロパティ
  14. はやく上達するコツ
  15. まとめ

image

HTML入門

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

HTMLとは?

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

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

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

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

要素とタグ

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

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

20150914_10

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

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

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

関連記事HTMLの要素を解説

20150914_5

属性とは?

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

20150914_6

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

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

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

20150914_9a

こちらもよくある質問で、要素の読み方についてです。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デザインの教科書

作りながら学ぶ HTML/CSSデザインの教科書
高橋 朋代 森 智佳子
SBクリエイティブ
売り上げランキング: 16,743

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

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

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

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

【Amazonレビューより引用】

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

スラスラわかるHTML&CSSのきほん
狩野 祐東
SBクリエイティブ
売り上げランキング: 3,490

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

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

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

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

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

【Amazonレビューより引用】

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

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

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

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

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

【Amazonレビューより引用】

CSS入門

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

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

20150914_7

CSSとは?

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

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

CSSの記述方法

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

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

20150914_8

セレクタとプロパティ

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

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

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

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

20150914_11

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

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

はやく上達するコツ

HTML/CSSの入門知識ですが、たったこれだけです!後は入門知識を踏まえて具体的なテクニックや実装パターンを覚えていきますが、レッスンではこの後実用的なHTML/CSSでのコーディング方法を順番にご紹介しております。

コードキャンプの受講生さんからよく頂くご質問で「はやく上達するにはどうすればいいですか?」というものがありますが、それには「手を動かすことですよ!」とお答えしています。

知識を吸収するとついマスターした気になってしまいがちですが、そのままではすぐに忘れてしまうもの。実際にコーディングを行って手を動かすことが、知識の定着にもつながります。

まとめ

今回はHTML/CSSの入門編をご紹介しましたが、いかがでしたでしょうか?この内容はCodeCamp教科書の第1章の内容となっており、CodeCampではこういった基礎からしっかり進めていくうえ、わからない所は気軽に講師に聞けるので初心者の方も安心です。

無料体験レッスンではCodeCampのレッスンを無料でご受講頂けますので、ぜひ一度ご受講くださいね!お待ちしております!

image

黒田剛司
ライター
黒田剛司

関連記事