HTMLとCSS、Javascriptの使い方、サイトで使う画像

今回は、Webページを作るにあたって欠かせないHTML、CSS、Javascriptの紹介とサイトで使う画像についてお伝えします。どんな仕組みになっていて、普段何気なく見ている画像はどのように作られているかについて解説します。

HTML、CSS、Javascriptとは？

HTMLは一言でお伝えすると、「文字（テキスト）に意味を与える印のようなもの」です。

例：<h1>HTMLを学習しよう！</h1>
※「HTMLを学習しよう！」という文字にh1（見出し）という意味が加わりました。
h1のhは「heading(見出し)」のhです。
これらは、ブログのタイトルにあたるものです。

HTMLのタグは、H1～H6まであります。
・H1は大きなタイトル
・H2は目次
・H3は目次の下にある見出し
・H4～H６はさらに細かい小見出しになります。

しかし、HTMLだけでページを表示させると、ただ文章が並んでいるだけになります。

そこで、CSSという言語を加えることで、レイアウトを調整して綺麗な見た目へと変化していきます。
例えば、文字のフォントや色、背景色、文字と文字の間隔などです。

また、Javascriptは、動きの調整や再現をします。
例えば、メニューボタンを押すとプルダウンが出てくることやホームページのトップページ画面で画像がスライドしていることですね。

Webサイトで使う画像

次に、Webで使う画像です。
普段、何気なく見ているのであまり気づかないのですが、実は2種類あり画像によって使い分けているのです。

ビットマップデータとベクターベータとは？
ビットマップデータとは、主にPhotoshopの画像データやデジカメで撮影した写真のことで、色のついた点（ドット）が集合したデータのことです。
ビットマップデータで表現された写真を拡大すると、細かな格子状のマス目ひとつひとつに色がついたものが集まって写真を作り上げています。
拡張子にGIF、JPEG、PSDなどが付くものですね。

ベクターベータとは、拡大や縮小しても画質が変わらず、通常ビットマップデータよりも容量が小さくなり、イラストや図面などの線や輪郭がはっきりした画像を作成する場合に使います。イラストレーターや、adobeXDの編集データはベクターデータですね。
拡張子にPDF、AI、EPSなどが付くものですね。

いかがでしょうか。
今回は、Webページを作るにあたって欠かせないHTML、CSS、Javascriptの紹介とサイトで使う画像についてお伝えしました。
毎日使うホームページや検索画面、良く見るサイトなどを今回お伝えした見出しタグがどのように作られているかなどの視点で見ると面白いかもしれません。
今回も読んで頂きありがとうございました！

ちょっと気になった、更に知りたくなったという方は、
ぜひ、気軽に相談できるMentaをしております。

Mentaでメンターサポート
https://menta.work/user/22914

ストリートアカデミーで毎月講座も開催しています
https://www.street-academy.com/steachers/198346

また、Twitterではブログに書いていないこともつぶやいているので、ぜひフォローしてください。
https://twitter.com/HAMA3san

webデザイナーもくもく制作サロンへの招待について
https://note.mu/hamasan918/n/ne4d98f9db9ec

もくもく制作サロンの入会

サロンではチャットで制作の質問を受け付けたり、相談会を開いて直接現役のデザイナーになんでも聞けるコミュニティです。

月額500円となります。

入会条件
業界未経験、経験者、Webデザインエンジニアに興味がある方まで！
誰でも匿名参加OKです。

参加方法
こちらのWebデザイナーフリーランスマガジンの購読購入をいただき、下記にてSlackコミュニティにご招待させていただきます。