見出し画像

dictionary（字引）-デザインとコーディング-

arounds_takagai

WEB運営に関わる、モノ・コト・コトバの解説

参照元：サイト構築

参照元のサイト構築に記載していますが、サイトの構築とは、その名の通り、専用の言語を用いて、デザインやコーディングをして、EC・WEBサイトを制作することを指しています。
こちらの記事では、専用の用語やデザインとコーディングについて、深堀していきたいと思います。


専用の用語

・HTML（エイチ ティ エム エル）
・CSS（シー エス エス）
・JavaScript（ジャバスクリプト）

HTML（エイチ ティ エム エル）

Hyper Text Markup Language（ハイパー テキスト マークアップ ランゲージ）の略で、マークアップ言語の一種です。

＜補足：マークアップ言語とは＞
サイトのページを構成する、テキストに目印をつけたり、レイアウトの構造をコンピューターに認識させるための言語です。
コンピューターは、テキストをそのまま渡しても、タイトルは何で、どこが見出しで、どこまでが本文の段落なのかを理解することができない為、タイトル<title>・見出し<h1>・段落<br>などの目印<タグ>を付けることで、コンピューターにテキストの意味を伝えることができます。
ちなみに、マークアップ言語は、HTMLのほかにも、XML・XHTML・SGMLなどがあります。

memo

WEB・ECサイトはHTML（エイチ ティ エム エル）を中心に構成されてしますが、HTML（エイチ ティ エム エル）そのものは、目印のついた、テキストデータにすぎません。これをWEBページとして表示させるために必要なのが、WEBブラウザです。

＜補足：WEBブラウザとは＞
「browse（ブラウズ）：拾い読み」という言葉が語源。
インターネットを介してWeb・ECサイトなどを、パソコンやスマートフォンで閲覧するためのソフトウェアのことです。

＜主なWEBブラウザ＞
・外部リンク：Chrome（Google社）
・外部リンク：Edge（Microsoft社）
・外部リンク：Safari（Apple社）
・外部リンク：Firefox（Mozilla社）

memo

HTMLの歴史
HTMLは、1989年にスイスのCERN（欧州原子核研究機構）で、研究者のデータや文書を効率的に閲覧できる仕組みとして誕生しました。
World Wide Web（ワールド・ワイド・ウェブ）と呼ばれる、インターネット上にある無数のコンテンツを結びつけて張り巡らされた巨大なシステムを構築する、ひとつの構成要素です。

＜補足：World Wide Web（ワールドワイドウェブ）とは＞
「WWW」や「WEB」という略称で呼ばれるのが一般的で、名前の由来は「世界中に広がるクモの巣」で、無数のコンテンツ同士がクモの巣のように複雑に張り巡らされた様子を表現しています。

▼World Wide Web（ワールドワイドウェブ）の主な構成要素
・HTML：Hypertext Markup Language（エイチ ティ エム エル）
ウェブページに必要なハイパーテキストを実現するためのマークアップ言語
・HTTP：Hypertext Transfer Protocol（エイチ ティ ティ ピー）
パソコンやスマートフォンなどの異なるデバイス同士が通信を行うためハイパーテキストを送受信するのに使われる通信プロトコル
・URL：Uniform Resource Locator（ユー アール エル）
インターネット上の特定のファイルの場所を示す書式
形式→ [プロトコル名] :// [ドメイン名] / [ディレクトリ名] / [ファイル名]

memo

CSS（シーエスエス）

Cascading Style Sheets（カスケーディング スタイル シート）の略。WEBページの色や文字のフォント・大きさなど、HTML（エイチ ティ エム エル）とセットで使われる、テキストを装飾するためのスタイルシート言語です。

CSS（シーエスエス）の使用例
▼記述例
p {　　　　　<!-- HTML（エイチ ティ エム エル）タグの指定 -->
color: blue;　 <!-- color = プロパティ : blue = 値 -->
}

▼プロパティ例
・color  ・・・・・・・・・文字色
・font size・・・・・・・・文字の大きさ
・font-family・・・・・・・文字の種類
・background-image ・・・背景画像

memo

JavaScript（ジャバスクリプト）

HTML（エイチ ティ エム エル）とCSS（シーエスエス）で構築されたWEBサイトに動きを加える、WEBブラウザ上で動作する、スクリプト言語。

JavaScript（ジャバスクリプト）の使用例
・画像のポップアップ表示
・Googleマップの表示
・画僧のスライド表示
その他にも、様々な専用の言語を用いることで、よりオリジナリティのあるWEB・ECサイトを構築することができます。

それぞれの言語には、互換性やバージョンなどの要件も重なってくるため、サイト構築の要件定義や設計の際に、確認をしておく必要があります。
また、それぞれの言語は、日々修正や進化をしています。古いバージョンの言語は提供側のサポートが終了していて、セキュリティの欠陥を解決できない場合もあるので、サイトの公開後も、使用している言語が最新のバージョンのものか、サポートが終了されていないか、セキュリティ上の欠陥がないかなど、定期的にチェックをする必要があります。

この記事が気に入ったらサポートをしてみませんか？