初心者のためのHTML/CSS入門!ゼロからの基礎知識と上達のコツ

      2016/03/01

Code部

基礎知識を抑えれば他のプログラミング言語より簡単にできる…その敷居の低さがHTML/CSSの魅力だったりします。今回はそんな基礎知識などHTML/CSSの入門知識を解説していきますね!

ちなみにこの内容は実際のレッスンで使用している教科書に沿った内容なので、CodeCampのレッスンがどんな感じなのかのイメージも掴んで頂けると嬉しいです。

HTML入門

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

HTMLとは?

HTMLは「HyperText Markup Language」の略で、Webページを作成するためのマークアップ言語の1つです。

マークアップ(Markup)とは簡単に言うと「文書の各部分がどのような役割を持っているのかを示す」事。例えば下記の文章を人間が見た時は「ここが見出しだ」など文章の構成がぱっとわかりますよね?
20150914_1
しかしコンピュータはわからないので、HTMLを使って「ここは見出しですよ」とか「ここは段落ですよ」などの文章構成を指示します。
20150914_2
ハイパーテキスト(HyperText)は、ハイパーリンクを埋め込むことができる高機能なテキストの事。クリックすると他のページに飛ぶ、この仕組みを実現するのがハイパーテキストなんですね。
20150914_3
ハイパーリンクは他の文章などの位置情報(場所)を示しており、複数の文書を結びつける役割を持ちます。HTMLではハイパーリンクに位置情報としてURLを指定しており、Webページ上でユーザがハイパーリンクをクリックすることで、指定されているURLへ移動します。

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

要素とタグ

要素とは見出し・段落など文書の構造の事で、要素を定義するための記号としてHTMLタグが用いられます。要素とHTMLタグの基本構成は以下です。
20150914_4a
基本的には開始タグと終了タグの2種類がありますが、中には<img>タグのように終了タグが無いものもあるので、使いながら覚えていってくださいね!

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

20150914_10

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

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

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

20150914_5

属性とは?

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

20150914_6

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

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

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

20150914_9a

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

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

CSS入門

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

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

20150914_7

CSSとは?

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

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

CSSの記述方法

HTMLの「どこの部分の」「なにを」「どんな値にするか」を決まった書式に従い書いていくのがCSSの基本です。基本書式は下記の通りで、お手本では「HTMLの<h1>タグの文字色を赤にする」と記述しています。

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のレッスンを無料でご受講頂けますので、ぜひ一度ご受講くださいね!お待ちしております!

 - HTML, デザイン , ,