初心者の為のHTMLとCSSのコーディングの違いと覚えるコツ

初心者の為のHTMLとCSSのコーディングの違いと覚えるコツ

今回はHTMLとCSSを初めて触れる初心者の方向けに解説していきます。

HTMLやCSSをプログラムで記述することを『コーディング』と言われています。

近年PCやスマホ、タブレットなどサイトを見る環境も多様化してきました。

そしてこのデバイスの多様化により、サイト観覧は様々な人々の身近な存在となりました。

サイト制作のコーディングスキルは、そんな世の中で必須のものとなっています。

それではこのHTMLとCSSの『コーディング』についての違いや、どこから勉強していけば良いのかを初心者向けに解説していきます。

HTMLって何?

まずはHTMLとは何かということ。

HTMLとはサイトを作る際にPCに文字を認識させるためにマークアップしていく言語のことを言います。

ではマークアップとは、どの様なことなのか具体的に解説してみましょう。

例えば白紙に『ぱくぱくブログ』という文字を打ったとします。

しかしこれだけではデバイスはただの『ぱくぱくブログ』という文字列であることしか認識しません。

詳しくいうとデバイスではなく、ブラウザが認識しないのです。

そしてこの『ぱくぱくブログ』をブログ記事の表題(見出し)であるということをデバイスに認識させようとした場合には、H1要素と言われるマークをつけます。

<h1>ぱくぱくブログ</h1>

ぱくぱくブログを挟んでいる<h1>~</h1>というのがマークアップ言語です。

これだけでデバイスは表題(見出し)だということを認識してくれます。

その他、マークアップには様々なものがあります。

  • 段落(文章)
  • リスト
  • 表の作成
  • 画像の挿入
  • 動画や音声の挿入 など

その他マークアップ言語には沢山の種類があります。

へぇ・・・。覚えるのが大変そう(涙)

大丈夫だよ!
使う言語の種類は自分なりに決まってくるから、ある程度繰り返してコーディングしていくうちに覚えられるよ。

そしてサイトの目には見えない部分についても、実はHTMLでデバイスへ認識させている部分があります。

それは制作するサイトのあらゆる情報を、目に見えない部分に書いているのです。

  • 何の言語で作られているのか
  • 使っている文字コードの指定
  • どの様なサイトであるかという情報

これらも沢山の種類があるよ。
でも心配しないで大丈夫。
これらもある程度決まりがあるから、すぐに覚えられるよ!

CSSって何?

そしてここでCSSの登場です。

CSSとはスタイルシートのことです。

では具体的にどの様な言語かというと、HTMLでマークアップした文字に装飾を与えるというものになります。

視覚的な表現を行う』と覚えるいいかも知れません。

CSSでは文字や文章を書くことはないんだよ。
あくまでも、装飾(スタイル)目的なんだ。

では先程マークアップした『ぱくぱくブログ』に対して装飾を行ってみましょう。

ウェブデザインを行う上で、装飾というとどの様なことを思い浮かべますか?

  • フォントを変える
  • フォントの大きさを変える
  • フォントの色を変える
  • 文字の周りに囲いを付ける
  • 文字の後ろに背景や画像を重ねる

など色々ありますね。

おそらく想像する装飾については、例外を除いて動きのあるもの以外全てCSSで行えると思っていいです。

そして更にはサイトを構成するレイアウトまでCSSで受け持つことになります。

  • 画像や記事を横に並べる
  • マウスカーソルが上に来たときにメニーを表示する
  • 画像の上に文字を重ねる など

どうかな?
HTMLとCSSの違いは理解できたかな?

はい!
理解できました!
HTMLはマークアップ!
CSSはスタイルですね!

HTMLとCSS何から勉強する?

勉強する前にポイントがあります。

それは『プログラム言語を全て暗記する必要はない』ことです。

今や職場や自宅でインターネット環境がない場所など少ないはずです。

ある程度できるマークアップが分かれば、あとはカンニング(コピペ)していきましょう。

そして良く使うプログラムについては、いつの間にか覚えるはずです。

そして最終的に基本に忠実で、自分なりのコーディングを身に付けましょう。

まずはHTMLから覚えよう!

では何から勉強するべきなのか。

それはHTMLです。

まずはHTMLで何がマークアップできるのかを一通り覚えましょう。

HTMLでマークアップした文字や文章をCSSで装飾するから、まずはHTMLを覚えましょう。

そうですね。
基本がHTMLだということですね。

どうやってHTMLを書くのか覚えよう!

それではどうやってHTMLを書けば良いのかを覚えましょう。

ここからコーディングの全てが始まります。

実はみんなが持っているPCで、コーディングはすぐに始められるんだよ。

えっ?
そうなんですか?

そうだよ!
では早速コーディングをする準備をしてみよう!

HTMLのタグ(要素)を覚えよう!

ポイントとなるのがタグ(要素)です。

まずはこのタグ(要素)がどの様なものなのか勉強しましょう。

このタグについてですが、HTMLでは基本ルールは同じです。

最初に述べましたが、これがマークアップの基本です。

<○○>***</○○>

この記述ルールを頭に入れましょう。

HTMLの構造を覚えよう!

HTMLでコーディングを行う為には、サイトの構造とHTMLの構造を知っておく必要があります。

これにはサイト制作を行う上での共通点もあるので、しっかりと覚えておきましょう。

おさえるべき構造タグはこれ!
<html>~<html>
<head>~</head>
<body>~</body>

サイトの内容を書く前に前準備をしよう!

『早速コーディングだ!』と本題に入りたいところですが、HTMLでコーディングを行っていく前に、少しサイト情報をHTMLで指定する必要があります。

初心者にとっては結構難しいところだけど、ここは基本なので必ず頭に入れておきましょう。

日本語のサイトであることを指定しておきましょう。

HTMLのバージョンを指定しておきましょう。

文字化けを回避する指定をしておきましょう。

ここまできたら、body内のタグ(要素)を使って、ある程度コーディングを使いこなしましょう。

ブロックについて覚えよう!

ある程度、タグ(要素)にも慣れてきたら、div要素を使ってブロックを覚えましょう。

CSSに繋がる重要な部分です。

必ずおさえておきましょう。

WEB制作カテゴリの最新記事