インストラクターブログ

Web

HTMLとCSSの違いってなんだろう?

57f11fcfad14636377af1d17b13d8d31_s

Webデザインを行う時に必ず必要になってくるCSSとHTMLの違いを簡単に解説していきたいと思います!
 

HTMLってなんだろう?

HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略です。
Webページを作成するための言語で、年々バージョンアップを積み重ね、2016年11月1日に HTML 5.1が新しく発表されています。バージョンアップの度にわかりやすく、より書きやすい言語になるように改良されており、今後もどんどん機能が充実したり、分かりやすく使いやすい言語になっていくことが予想されます。

 

HTMLでできることってなに?

HTMLタグを用いてWebページの中に画像や動画などのマルチメディアを挿入したり他のWebページへのリンクを挿入したりすることが出来ます。
他にも、Webページの中で、「この部分が見出しです。」「この部分が本文です。」という情報をパソコンに教える大事な言語です。パソコンはHTMLタグを認識してWebページを表示しています。

 

記述は下図のように行います。

html部分

CSSってなんだろう?

Cascading Style Sheets(カスケーティング スタイル シート)の略です。
Cascade(カスケード)とは階段状に連続する滝。という意味があり、段階的に要素を記述していくことを表しています。

 

(文字のサイズは20pt)

(文字のサイズは20ptで文字の色は黒)

(文字のサイズは20ptで文字の色は黒で文字の背景は青)
 

というようにどんどん要素を増やして記述する事が出来ます。

HTMLの見出しや本分の装飾をどうするか、どのように表示するのかを指示するために記述するものです。
文章の構造(HTML)と見た目(CSS)を分離して作成することで、複数のWebページに同じ見た目を適応することが可能になります。

CSSでできることってなに?

CSSは先述の通り、HTMLの見た目を決めることが出来ます。「見出しの文字色は青色にする。」や「背景に表示する画像はこの画像にする。」、「本文は右に寄せる。」、「表の中のこの部分は左に寄せる。」など、Webページ全体の装飾を決めるために作られたものです。

記述は下図のように行います。

HTMLとCSSの違い

HTMLを使ってWebページの構造を決め、CSSを使ってWebページの見た目を決めています。どちらも規格が決まっており、一定の法則に従って書いていくことで、Webページが出来上がっていきます。どちらもWebページの制作に欠かせない大切なものです。
HTMLやCSSはWebデザインの仕事と切っても切れない縁のあるものです。
エディスパソコン学院ではHTMLやCSSの記述が簡単にできるAdobeのソフト、Dreamweaver(ドリームウィーバー)など様々な講座をお選びいただけます!Webのお仕事に興味のある方はお気軽にお近くの教室までお問い合わせください(*^_^*)

ドリームウィーバー

2017年11月4日

このページの先頭へ戻る