【超初心者向け】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の詳細については別の記事でまとめていきたいと思いますので、しばしお待ちください!笑
みなさんよい不労所得生活を!!