カテゴリー 現場用語集

HTML、CSSの関係性

by KD-OZ

HTML

HTMLとは・・・（HyperTextMarkupLanguage）はWebページを作成するための基本的なマークアップ言語です。

私達がブラウザ上で見ているページほとんどがHTMLで作られています。Webページの土台を作る為の言語であり、Webページに表示したい文章やウェブページの情報を独自タグをはさむ事でHTMLを書いていきます。HTMLを理解するためには「タグ」という概念の理解が必要になります。

ウェブページに表示する文字はHTMLファイルの上に書きます。また、写真を表示させたいときにも、HTMLファイルに画像を読み込むためのコードを書き込みます。

HTMLのタグ

＜タグ名＞タグ＜/タグ名＞

＜タグ名＞と＜/タグ名＞で色々なものをはさみ、開始タグ、終了タグと呼ばれ基本的にはセットで使われます。開始タグから終了タグまでのカタマリは「要素」と呼ばれ、タグのはさみかたによってタグの中身の役割が変わってきます。

タグの種類は色々あります。

<p>段落内の文章</p>・・・段落を示すもの

<h1>大見出しの文</h1>・・・大見出しを示すもの

等など

しかーーーーーし！！

HTMLをだけで作られたページでは文字、画像だけが並んだ単調なページになってしまいます。

CSSとは・・・（Cascading Style Sheets)ウェブページのスタイルを指定ｓるうための言語であり、文書のスタイルを指定する技術全般をスタイルシートといい、HTMLと組み合わせて使用する言語です。

HTMLで作られたウェブページの土台に対して「デザイン」や「レイアウト」を決定するのがCSSです。CSSにより文字や背景の色を変えたり、見栄えを整えていくマークアップ言語です。まず土台になるHTMLファイルを作り、HTMLファイル内にstyleタグを書いていきます。

CSSの基本文法

body{

    color:gray

}

セレクタ・・・デザイン変更の適用先を指定するここにはタグ名やclass名、id名を書きます。

プロパティ・・・セレクタで指定された部分の何を変えるのか

値・・・値で変更内容を指定

CSSでは「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）する」という命令文が成立します。

 

簡単にまとめると、

HTMLがWEBページの内容や構造を指定するものであるのに対して、WEBページのデザイン（スタイル）を指定するのがCSSです。

HTMLとCSSを組み合わせする事によって、見栄えが良いWEBページを作成する事ができます。

 

 

The following two tabs change content below.
KD-OZ

KD-OZ

マーケティングセクション アカウントプランナーチーム所属。プランナーとしては駆け出しながら、熱意と行動力でチャレンジをする体育会系。日々、ウェブサイト制作やデザイン、マーケティングについて勉強中。