HTMLとCSSは静的WEBページ作成に必須のプログラム言語です。
HTMLはマークアップ言語とも呼ばれこの形式で書かれたファイルをIE、Edge、Chromeなど各ブラウザが解釈してPCやスマホなど各デバイスの画面に表示します。
CSSはスタイルシートとも呼ばれるように、HTML形式で書かれたファイルのフォント、色などレイアウトを指定するものです。
ここではこのHTMLとCSSとその開発環境、フレームワークについてまとめたいと思います。尚、動的WEBページ作成に利用する、JavaScriptについては、別ページにまとめています。
１．HTML(:HyperText Markup Language)
HTMLとは、マークアップ言語と呼ばれるWEBページを表示するための言語です。W3Cという標準化団体の勧告（仕様制定）により、プログラムの仕様が決められています。最新のメジャーバージョンはHTML5です。
マークアップ言語とは、タグと呼ばれる<>内に書かれた要素で始めと終わりをマークアップして、その表示方法を規定するものです。例えば、
～ 結果 ～
強調表示
このように、<strong>というタグでマークアップすると「強調表示」とブラウザに認識させることができます。
XMLも同じくマークアップ言語で、同様の仕組みです。
プログラム言語としては、インタープリタ方式であり、そのプログラムのブラウザに1行目から順番に読み込ませることにより画面に表示します。また、IF文やGO TOなどを使い、読み込む行を分岐したり飛ばしたりすることはできず、あくまで行の先頭から最後まで順次ブラウザに読み込ませることしかできません。
～ インタープリタ方式の速度問題を緩和するために ～
インタープリタ方式は、いちいちコンパイルしなくても良いため、開発側の負担が少ない反面、大きなデメリットとして１行ずつ読み込むことによる速度遅延の問題があります。どうしてもコンパイル方式と比べて実行速度が遅くなるのです。以下この速度問題を緩和するアプローチです。
～ キャッシュ ～
この速度問題を改善する一つの方法が各ブラウザの機能。キャッシュです。各ブラウザは、一度読み込んだWEBページを一定期間、記憶（キャッシュ）しておくことで同じページを再読み込みする場合に、そのキャッシュを参照して表示の高速化を図ります。しかしながら、当然新規のページを読み込む際は１行ずつ読み込むしかなく、あくまで再表示の際に限られます。
～ CDN(Content Delivery Network) ～
これもキャッシュの一種ですが、各ブラウザではなく、インターネット網上、世界各地に配置されたキャッシュサーバーによるキャッシュ網と言えます。例えば、日本からアメリカのWEBサイトを閲覧する場合、日本とアメリカ間で通信を行う為、高速回線であっても若干の時間が必要となりますが、アメリカのWEBサイトのデータを日本のキャッシュサーバーにキャッシュすることで距離を近くして速度を向上させます。このように世界各地にキャッシュサーバーを配置し、訪問者が一番近くのキャッシュサーバーを利用することで、高速化を図ります。
このCDNは元々、ファイルサイズの大きい動画の配信を高速化する目的で運用されてきました。しかし、CDNサービスは非常に高額で、大企業以外の利用は難しい状況でした。ところが近年、AWSが考えられないほど低価格で、このCDNサービスの提供を開始したことがきっかけとなり、一般のWEBサイトでもCDNが導入できる状況になりました。CDNはブラウザでいうキャッシュとは違い、近い距離にファイルを配置するミラーリングに近いものです。この為、再読み込みだけでなく新規読み込みの際も距離的な利点を得られ、HTML自体は１行ずつ読み込むことには変わりはないものの、違うアプローチからですが高速化が図られます。さらにCDNはロードバランサとしての役割も果たし、負荷分散にも寄与します。
文中で紹介したAWS以外に、Cloudflare、Akamai等がCDNサービスを提供しています。
２．CSS(:Cascading Style Sheets)
CSSはHTMLに対し、レイアウトを指定するいわゆる設定ファイルのような役割をします。書き方は、
/* CSSの例 */
p {
color:red;
}
のように、対象となるパラメータに対して{}内に設定を記載します。この例の場合、HTMLのpタグの文字色は赤色と設定しています。
HTML5では原則、HTMLで大枠を指定した上でCSSでレイアウトを補完するというように、HTMLとCSSの両方を利用してWEBページを作成します。
CSSの最新はCSS3です。
CSSもHTMLと同じくインタプリタ方式で１行目から順番にブラウザによって解釈されます。このため、もし同じ設定を２回書いたとすると、後の設定で、前の設定が上書きされてしまいます。
CSSにはレイアウトを設定する以外に、レスポンシブウェブデザインという重要な役割があります。
～ レスポンシブウェブデザイン ～
過去、HTML4の当時、<table>タグで幅や高さを指定して、表示する大きさを固定したWEBサイトを作成することが一般的でした。ところがその後、スマホ、タブレットなど画面サイズの異なる多様なデバイスからWEBサイトにアクセスされるよになり、閲覧するデバイスに合せて動的に表示を変える、いわゆるレスポンシブウェブデザインがWEBページ作成にあたり必須の要件となりました。このレスポンスデザインを実現するための技術の一つがCSSのメディアクエリです。
～ コード例 ～
/* メディアクエリの例 */
p {
color:red;
}
@media screen and (max-width: 580px) {
p {
color:yellow;
}
}
この例ではデバイスの幅580px以上の場合はpタグの文字色は赤、580px未満の場合は黄に振り分けています。このようにアクセスするデバイスに合わせてCSSのレイアウト指定を切り替える仕組みがメディアクエリです。
３．HTML、CSSのフレームワーク
Bootstrap
BootstrapはTwitter社が開発したHTML、CSSのフレームワークです。無償。商用可。MIT Licenseで運用されます。レスポンシブウェブデザインを比較的容易に、そして最小のコード量で実現できます。
Bootstrap（https://getbootstrap.com/）
４．HTML、CSSのIDE
HTML、CSSの開発環境として、テキストエディタを使用する場合もありますが、以下のようなIDEがあります。
Brackets
Adobe Systemsが開発した軽量なWeb開発向けIDEです。無償。商用可。MIT Licenseで運用されます。
Brackets（http://brackets.io/）
Dreamweaver CC
Adobe Systemsが販売するWeb開発向け有償IDEです。Adobe Creative Cloudにおいてクラウドサービスとして提供されています。PhotoshopやIllustrator等のデザインアプリケーションとの親和性が高く、デザインと統合したWEB開発が可能となります。
～ 価格 ～
| 法人/個人 |
製品 |
購入プラン |
価格 |
| 個人 |
DreamweaverCCのみ |
年間プラン(月々払い) |
\2,728(税込)／月 |
| 年間プラン(年払い) |
\28,776(税込)／年 |
| 月々プラン |
\3,828(税別)／月 |
| 全製品(Photoshop CC、Illustrator CC等含む) |
年間プラン(月々払い) |
\6,248(税込)／月 |
| 年間プラン(年払い) |
\72,336(税込)／年 |
| 月々プラン |
\9,878(税込)／月 |
年間プランは1年縛りのプランです。途中解約する場合、残存月数×50%の料金が解約料として請求されます。
全てのプランで自動更新がデフォルトONになっています。継続的に使用するかしないか状況に応じて設定変更しておくべきです。
一年縛りの場合、更新月の前月のみ解約料なしで解約できます。このタイミングを覚えておかないといけないのでかなり大変です。
個人の場合、フリーのデザイナー等、確実に一年以上利用する方以外は、最初、少々高いですが月々プランで契約することをお勧めします。契約以降、使用状況を見て一年縛りに切り替えるかどうか考えることが出来ます。プルダウンのデフォルトが年間プラン(月々払い)になっているので注意して下さい。
マルチプラットフォームでWin、macOSどちらにもインストールできます。1ユーザーで2台までインストール可能ですが同時使用は1台のみです。
全プランでTypekitの全フォント、クラウドストレージ100GB、ポートフォリオWebサイトの利用が可能です。
Dreamweaver（https://www.adobe.com/jp/products/dreamweaver.html）
Visual Studio Code
マイクロソフトが提供する、ほぼ全てのプログラム言語に対応する軽量IDEです。こちらでまとめています。
その他
併用するプログラム言語と併せてHTML、CSSの開発を行う場合は、NetBeans、Eclipse、VisualStudio等が利用されます。
