今さら聞けないWeb知識「HTMLとCSSってなんだ?」

ホームページの話題で、「HTMLとCSS」という言葉が出てくることがあると思います。
どちらも、ホームページの表現(表面)を作る際に重要なんだというところまではわかる方も多いかとは思います。

そこで、今回は「HTMLとCSS」って何だろう?という疑問にお答えしたいと思います。

HTML(エイチティーエムエル:ハイパー・テキスト・マークアップ・ランゲージ)はホームページを作成する際に用いられる言語の一つです。
ただホームページ上に文字を出力するだけでなく、画像を出力したり、別のページへのリンクを貼ったりすることが可能になります。

ホームページを作る際の工夫としてにはこのHTMLを要素(ものを入れる箱のようなもの)で仕切り、要素の中に複数の要素を入れたりしながら、見る人がわかりやすくなるようにしていきます。
例えば、ブログを書く際によくHTMLを使って見出しのサイズを調整したり、画像を貼り付ける作業を行うことがあります。

CSS(シーエスエス:カスケーディング・スタイル・シート)の略で、HTMLと併用することの多い言語の一つです。
HTMLで要素を分けた部分の色をそれぞれで変更したり、フォントの変更等に便利です。
主にデザインと呼ばれる範囲をこのCSSで設定します。

例えばHTMLで

< h1 >hello!< /h1 >

と入力した際に
CSSで色とサイズを指定する場合、次のように記載いします。

h1{color : #008000 ;    
  font-size :20px;
}

※1 #008000はカラーコードと呼ばれるネット上で色を表すためのコードのこと。
この#008000の場合色は緑になる。

※2 font-sizeの部分に表記されている20pxのpxとはデジタル画像のサイズを表す単位
でWeb開発の現場では最も用いられる大きさの単位

CSSでこのように指定した場合、
HTMLでh1と書かれている要素の中にある「hello!」の文字の色はCSSで指定した色とサイズでホームページやブログに出力されます。
これらの技術を使ってホームページは構築されます。

このように「HTMLとCSS」を活用し、ホームページの表現(表面)の制作をする人をフロントエンジニアと呼ばれています。「HTMLとCSS」はホームページ作成の基本となる為にプログラミング学習の最初のステップとしてよく学習されています。

他にもアニメーションを付けたい場合には、Javascriptなどを利用して画像をスライドさせたり、ボタンを物理的に押しているかのようなエフェクトで表現する技術などを利用しながら、みなさんが見ているホームページが構築されます。

Javascriptに関しては次回ご紹介します。ご期待ください。

カテゴリーWeb