【3分で丸わかり!】HTML・CSSとは?意味から違いまでわかりやすく解説します。

「ブログをやっててよく聞く、HTMLやCSSがわからない。
そもそもそれはどういうプログラミング?違いも知りたい!」



今日はこういう質問に答えていきます。

  • 【3分で丸わかり!】HTML・CSSとは?意味から違いまでわかりやすく解説します。
  • 豆知識:HTML誕生秘話
  • WordPressの追加CSS機能について

【3分で丸わかり!】HTML・CSSとは?意味から違いまでわかりやすく解説します。

HTMLとは?

HTML(エイチティーエムエル)とは、Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略称で、WEBページを作成するためのプログラミング言語です。

(ちなみに、他にはアプリやメールなどにも使われています。)


TextにHyper(テキスト以上)の意味を含ませ、Markup(目印)をする言語=略してHTMLです。

細かく分解して見てみましょう。

★Hypertext:文章に文章以上の意味(リンク等)を含ませる

文字に含まれるリンクをクリックすると別の記事に移動します。このリンクは「Hyperlink」と言われており、このような普通の文章以上の機能を持っている文章が「Hypertext」と言います。

★Markup:文章をタグで囲い、意味付けをする

コンピューターに「これが文章だよ!」「これが見出しだよ!」と情報を伝えて認識させ、WEBページ上に表示させます。

ざっくり言うとHTMLはWEBページの土台です!


例)
<p>●●●●</p>  ➡●●●●を文章として表示
<h1>●●●●</h1> ➡●●●●を見出しとして表示
<a href=”https://××××.com”>●●●● </a> ➡●●●●にhttps://××××.comというリンクを埋め込む

他にも<table><tr><th>などを使用し表を作ったりできます。

CSSとは?

CSSとは、Cascading Style Sheets(カスケーディングスタイルシート)の略称で、文章のデザインで使われるプログラミング言語です。

砕いて言うと、HTMLで作られた文章の色やサイズ、背景色を変えたり、リンクを埋め込んでクリックできるように装飾するのがCSSです。

カラフルな枠や角が丸い枠、キャラクターから出る吹き出しなどもCSSで装飾したものです。

HTML・CSSの違い

上記でそれぞれの個性はだいたい分かったかと思いますので、違いについて追及していきます。

【HTMLとCSSの違い】
HTML➡文章の「土台」を作る。
CSS➡文章に「装飾」を施す。

HTMLはブラウザに表示するよう指示する言語。
CSSはブラウザにどのように表示するかを指示する言語です。


構造的な話をします。

HTMLでMarkupした部分、つまりタグで囲った部分はBOXと呼ばれています。

HTMLでも多少の装飾をすることはできますが、BOXごとの装飾しかできません。そのBOX内部を細かく装飾できるのがCSSです。

そのような理由から、CSSは単体では使用せず、HTMLとセットで使用します。

豆知識:HTML誕生秘話

HTMLは、1989年にスイスのジュネーブのCERN(欧州原子核研究機構)で誕生しました。

当時、数千に及ぶ科学者がお互いの研究論文などの資料をアナログな方法で探しており、大変な手間と時間がかかっていました。

効率よく資料を探す方法を模索する中で、当時コンピューター技術者として在籍していたイギリス人のティム・バーナーズ=リーWWW(World Wide Web)を発明しました。


その2年後の1991年、ティムは世界で最初のWebサイトHyper Text(ハイパーテキスト)と呼ばれる文書同士を繋げる仕組みを公開しました。

これがHTMLのHyperTextの部分ですね。


その後、上記で説明したWEBサイト基盤となるコードを「HyperText Markup Language=HTML」と名付けました。

ちなみに、現在のHTMLは「HTML5」というもので、*W3Cが2014年にリリースさせたものです。

*W3CとはWorld Wide Web Consortium の略で、HTMLの標準化やWEBの可能性拡大を目的にティムが創立しました。

HTML5はアプリ使用を目的の1つとして作られたHTMLです。
現在どんなブランドの媒体でもアプリを使えるのはこのHTML5のおかげです。

WordPressの追加CSS機能について

WordPressには「追加CSS」というものがあります。
サイトをカスタマイズするために、複数のCSSを一か所に保存・反映できる機能です。

追加CSSにはメリットが複数あります。

  • 記事を書くとき、短縮してCSSを打ち込むことができる。
  • 様々なカスタマイズを一括して保存しておくことができる。
  • ドロップダウンリスト表示やエラー表示機能で初心者にもやさしい。


例えば、こういう枠組みがあるとします。

こういう枠組み

これは追加CSSに打ち込んであるCSSコードで、名前を付けておけば、文章に打ち込むとき簡単にコードを呼び出すことができます。

また、様々なCSSコードも一括して保存できるので、出し入れが簡単です。


やり方は簡単!

【Wordpress設定画面➡外観➡カスタマイズ➡一番下の「追加CSS」をクリック】し、そこにCSSコードを追加します。

また、初心者でもコード入力ミスをしない「ドロップダウンリスト」「エラー表示機能」があります。

これです。

ドロップダウンリストは打った文字からコードの予測変換を出してくれる機能です。

全部打ち込まなくていいから楽ちんです。

エラー表示機能は、打ち込んだコードが間違っている場合、赤字表示され「ここ間違ってますよ~」と示してくれる機能です。

ミスに一目で気づけます。

関連記事

【3分で丸わかり!】サブディレクトリとサブドメインの違い。 【3分で丸わかり!】(禁止)リスティング広告 / リダイレクト・リンクとは?

今日もありがとうございました!

また次の記事でお会いしましょう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です