アフィリエイトサイト　テクニック

HTMLとCSSの違いについて

テクニック2019.12.17 更新

普段利用しているホームページやブログなどのウェブページは、HTMLやCSSといったマークアップ言語で生成されています。HTMLは、HyperText Markup Languageの略で、ウェブページのレイアウト構成を記述します。CSSは、Cascading Style Sheetsの略で、ウェブページの文字や画像の装飾を指定するために使用します。見栄えの良いウェブページを作成するには、HTMLとCSSは不可欠な存在と言えます。

HTMLは構造や骨組みを担当

<h1>大見出しが入ります</h1>
<p>文章が入ります。</p>
<a href="URLが入ります">リンクが入ります</a>

<h1>大見出しが入ります</h1>

<p>文章が入ります。</p>

<a href="URLが入ります">リンクが入ります</a>

ウェブページが表示された状態で、右クリックするとブラウザにより若干表記は異なりますが、ソースの表示というメニューがあります。それを開くと英語や文字などがたくさん表示されます。これがウェブページのレイアウトを構成しているHTMLになります。詳しく見てみると、ウェブページに表示されている文字がそのまま記述されたりしているのがわかるでしょう。HTMLは「h1」や「p」などのように大なり小なりの記号を使ったタグで囲んで記述します。

CSSはカラーやスタイリング担当

h1{
color: #ff0000;
}
p{
color: #333333;
}

h1{

color: #ff0000;

}

color: #333333;

}

HTMLのタグの中に、classと記述されている部分があります。ここで指定されているのが、CSSで記述されている名前に対応しています。CSSでは文字色やフォントサイズなどの修飾に関する指定を記述します。初期のHTMLではこのような修飾もHTMLの一部として記述していましたが、最近は修飾はCSSで記述するようになっています。HTMLが読みやすくなり、修飾を一括で変更する場合はCSSを修正するだけで一括変更できる利点もあります。