各種プログラム言語と開発環境まとめ(HTML、CSS) | IT SKILL MAP

各種プログラム言語と開発環境まとめ(HTML、CSS)

 HTMLとCSSは静的WEBページ作成に必須のプログラム言語です。
 HTMLはマークアップ言語とも呼ばれこの形式で書かれたファイルをIE、Edge、Chromeなど各ブラウザが解釈してPCやスマホなど各デバイスの画面に表示することができます。
 CSSはスタイルシートとも呼ばれるように、HTML形式で書かれたファイルのデザインを指定するものです。
 ここではこのHTMLとCSSとその開発環境、フレームワークについてまとめたいと思います。尚、JavaScriptについては、別ページにまとめています。

1.HTML(:HyperText Markup Language)

 マークアップ言語と呼ばれるWEBページを表示するための言語でW3Cという標準化団体の勧告(仕様制定)によりそのプログラム仕様が決められています。最新のメジャーバージョンはHTML5です。
 マークアップ言語とは、タグと呼ぶ<>内に書かれた要素で範囲の始めと終わりをマークアップして、その表示方法を規定するものです。例えば、

<!-- マークアップの例 >
強調表示

 ~ 結果 ~ 

 強調表示 


 このように、<strong>というタグで範囲をマークアップするとその範囲が「強調表示する範囲」とプログラムを実行するブラウザに認識させることができます。
 XMLも同じくマークアップ言語で、同様の仕組みです。


 プログラム言語としては、インタープリタ方式であり、そのプログラムの1行目から順番にブラウザによって解釈されます。他のプログラムと違い、コンパイルしてプログラムを実行しているのではなく、ブラウザに読み込ませることにより画面に表示、つまりブラウザが実行を肩代わりしています。このようにコンパイルせず、あくまで実行はブラウザに依存しているので、厳密にはW3Cの勧告に従ったファイルを作成していだけで、プログラム言語とは言えないのですが、開発側からすると同じようにコーディングを実施しなければならず、いわゆる、みなしプログラム言語と言えます。また、通常のプログラム言語と違い、IF文やGO TOなどを使い、読み込む行を分岐したり飛ばしたりすることはできず、あくまで行の先頭から最後まで順次ブラウザに読み込ませることしかできません。



 ~ インタープリタ方式の速度問題を緩和するために ~ 


 インタープリタ方式は、いちいち全体コンパイルしなくても良いため、開発側にかかる負担が少なく、対象とする修正箇所以外を同時にコンパイルしてしまい、思わぬバグを発生させるということもない反面、大きなデメリットとして1行ずつ読み込むことによる速度問題があります。どうしても全体コンパイルを行うコンパイル方式と比べて実行速度が遅くなるのです。以下この速度問題を緩和するアプローチです。


 ~ キャッシュ ~ 

 この速度問題を改善する一つの方法が各ブラウザの機能。キャッシュです。各ブラウザは、一度読み込んだWEBページを一定期間、記憶(キャッシュ)しておくことで同じページを再読み込みする場合に、そのキャッシュを参照して表示の高速化を図ります。しかしながら、当然新規のページを読み込む際は1行ずつ読み込むしかなく、あくまで再表示の際に限られます。


 ~ CDN(Content Delivery Network) ~ 

 これもキャッシュの一種ですが、各ブラウザではなく、インターネット網上、世界各地に配置されたキャッシュサーバーによるキャッシュ網と言えます。例えば、日本からアメリカのWEBサイトを閲覧する場合、日本とアメリカ間の通信を行う為、高速回線であっても若干の時間が必要となりますが、アメリカのWEBサイトのデータを日本のキャッシュサーバーにキャッシュすることで距離を近くして速度を向上させます。この例では、アメリカのWEBサイトは日本だけでなく世界各地にキャッシュを配置し、訪問者が一番近くのキャッシュを利用することで、高速化を図ります。
 このCDNは元々、ファイルサイズの大きい動画の配信を高速化する目的で運用されてきました。しかし、CDNサービスは非常に高額で、大企業以外の利用は難しい状況でした。ところが近年、AWSが考えられないほど低価格で、このCDNサービスの提供を開始したことがきっかけとなり、一般のWEBサイトでもCDNが導入できる状況になりました。CDNはブラウザでいうキャッシュとは違い、近い距離にファイルを配置するミラーリングに近いものです。この為、再読み込みだけでなく新規読み込みの際も距離的な利点を得られ、1行ずつ読み込むことには変わりはないものの、違うアプローチからですが高速化が図られます。さらにCDNはロードバランサとしての役割も果たし、負荷分散に寄与しますが、HTMLの読込速度に関係するものではなくあくまでWEBサーバー側の利点です。
 文中で紹介したAWS以外に、CloudflareAkamai等がCDNサービスを提供しています。



 ~ リッチクライアント ~ 


 HTML4の当時、HTMLの描写能力は十分ではなく、動きのないページを作成することしかできませんでした。もちろんJavaScriptを利用してメニューを作成したりサブメニューを表示/非表示することはその当時もできましたが、なめらかに画面が切り替わるのではなく、いきなり画面が切り替わるような表示切替しかできませんでした。
 この為、GIFファイルの動的規格であるアニメーションGIFを利用したり、GoogleMapで採用された地図を徐々に表示させる技術であるAJAXを利用したり様々な技術を駆使して動的コンテンツを作成しました。
 そして最終的に動的コンテンツ作成のデファクトスタンダードとなったのはFlash、SilverLightというプラグインによる動的コンテンツの作成方法でした。これらの技術で作成されたコンテンツをリッチクライアントと呼びました。

 2008年、HTML5のドラフトが発表されると、描写機能が大幅に強化され、Flash、SilverLightにより実現してきた機能をHTMLだけで表現できることが分かりました。そして2014年、HTML5は正式に勧告され、技術的にHTML5利用に置き換わり、Flash、SilverLightはそれぞれサポート終了がアナウンスされるに至りました。


2.CSS(:Cascading Style Sheets)

 CSSはHTMLに対し、レイアウトを指定するいわゆる設定ファイルのような役割をします。書き方は、

/* CSSの例 */
p {
	color:red;
}

 のように、対象となるパラメータに対して{}内に設定を記載します。この例の場合、HTMLのpタグの文字色は赤色と設定しています。


 HTML5では原則、HTMLで大枠を指定した上でCSSでレイアウトを補完するというように、HTMLとCSSの両方を利用してWEBページを作成します。
 CSSの最新はCSS3です。

 CSSもHTMLと同じくインタプリタ方式で1行目から順番にブラウザによって解釈されます。このため、もし同じ設定を2回書いたとすると、行が後方の設定で、前方の設定が上書きされてしまいます。


 以下のようにCSSにはレイアウトを設定する以外に、重要な使用方法があります。



 ~ CSSファイルの外部ファイル化 ~ 

 CSSの設定をHTMLファイル内に書くことなく外部ファイル化することが出来ます。

 ~ コード例 ~ 

 <link rel='stylesheet' href='test.css' type='text/css'> 

 これにより、複数のHTMLファイルの設定を1CSSファイルにまとめることが出来ます。



 ~ レスポンシブウェブデザイン ~ 

 HTML4の当時、<table>タグで幅や高さを指定して、表示する大きさを固定したWEBサイトを作成することが一般的でした。ところがその後、スマホ、タブレットなど画面サイズの異なる多様なデバイスからWEBサイトにアクセスされるよになり、閲覧するデバイスに合せて表示する画面サイズを変える、いわゆるレスポンシブデザインがWEBページ作成にあたり必須の要件となりました。このレスポンスデザインを実現するための技術の一つがCSSのメディアクエリです。

 ~ コード例 ~ 

/* メディアクエリの例 */
p {
	color:red;
}
@media screen and (max-width: 580px) {
	p {
		color:yellow;
	}
}

 この例ではデバイスの幅580px以上の場合はpタグの文字色は赤、580px未満の場合は黄に振り分けています。


3.HTML、CSSのフレームワーク

Bootstrap

 BootstrapはTwitter社が開発したHTML、CSSのフレームワークです。無償。商用可。MIT Licenseで運用されます。レスポンシブウェブデザインを比較的容易に、そして最小のコード量で実現できます。


Bootstrap(https://getbootstrap.com/)


4.HTML、CSSのIDE

 HTML、CSSの開発環境として、テキストエディタを使用する場合もありますが、以下のようなIDEがあります。最近はBracketsを利用するケースを良く見かけます。

Brackets

 Adobe Systemsが開発した軽量なWeb開発向けIDEです。無償。商用可。MIT Licenseで運用されます。


Brackets(http://brackets.io/)


Dreamweaver CC

 Adobe Systemsが販売するWeb開発向け有償IDEです。Adobe Creative Suiteにおいてクラウドサービスとしても提供されています。PhotoshopやIllustrator等のデザインアプリケーションとの親和性が高く、デザインと統合したWEB開発が可能となります。


 ~ 価格 ~ 

法人/個人 製品 価格
法人 DreamweaverCCのみ \2,980(税別)/月
全製品(Photoshop CC、Illustrator CC等含む) \6,980(税別)/月
個人 DreamweaverCCのみ \2,180(税別)/月
全製品(Photoshop CC、Illustrator CC等含む) \4,980(税別)/月

Dreamweaver(https://www.adobe.com/jp/products/dreamweaver.html)


Visual Studio Code

 マイクロソフトが提供する、ほぼ全てのプログラム言語に対応する軽量IDEです。こちらでまとめています。


その他

 併用するプログラム言語と併せてHTML、CSSの開発を行う場合は、NetBeans、Eclipse、VisualStudio等が利用されます。



おすすめの関連記事

各種プログラム言語と開発環境まとめ(概要)
プログラム言語の概要についてまとめました。