ゼロカラ【ゼロ円から始める不労所得生活】

不労所得生活を目指してブログやYouTubeなどネットで稼ぐノウハウや実例をご紹介していく現在進行形のブログです。

【超初心者向け】HTMLとCSSの考え方を図解で解説

まずは言葉を理解しましょう

HTML

HTMLとは、Hyper Text Markup Language(ハイパーテキストマークアップ・ランゲージ)の頭文字です。

  • ハイパーテキストとは、複数のテキストをお互いに関連付ける仕組み
  • マークアップとは、文書に意味づけをしていく作業
  • ランゲージは、そのままの意味で言葉

をそれぞれ指し、繋げると「意味づけされた文章を書くための言語」といったところでしょうか?
この場合の「意味づけ」とは、「ここが題名」で「ここが本文」で「ここが引用」でといった文章内での意味を指します。
紙に書く文章でも読みやすくするために、文字の大きさや、太さや、かぎかっこ「」などで自然とその文章の役割を使い分けていると思います。

それをWebページ上でするための言語だと思ってください!
ちなみに今見ているこのページを含め、ネット上で閲覧できるWebページのほぼ全てがこのHTMLという言語で構成されています。

CSS

CSSとは、Cascading Style Sheets(カスケーディング・スタイル・シート)の頭文字です。

カスケーディングの、カスケードとは、階段上に連続する滝の意味で、転じて、同じものがいくつも連結された構造を指し、
スタイルは・シートは、その様式を書いた紙です。

繋げると、連結された構造の様式を書いた紙を意味します。
HTMLで書かれた文章に、装飾(デザイン)の様式を加えて、大きさや色などを変化させることができます。

HTMLとCSSの関係

前述したとおり、HTMLで書かれた文章を装飾するのがCSSです。

なぜ役割が分かれているかというと、何より編集が簡単である点が大きいでしょう。 例えば、以下のブログで見てみましょう。

この文章のタイトルのデザインを変更したいとき、もしCSSを使っていないと、ブログの中の全ての文章を一つ一つ変更しなくてはなりません。

しかし、CSSを使っていれば、同じ役割の文章(タイトル、サブタイトルなど)を一瞬にして変更することができます。

これがHTMLとCSSの役割です。

HTML、CSSの詳細については別の記事でまとめていきたいと思いますので、しばしお待ちください!笑
みなさんよい不労所得生活を!!