HTML5/CSS3最新のプログラミングで新しい世界を拓く

HTML5とCSS3は重要

ウェブサイトを作成する最新の言語がHTML5とCSS3です。どちらも、ウェブサイトをモバイルフレンドリーにしてより多くのユーザーに見てもらうのに欠かせません。

HTML5とCSS3で出来ることを見てみましょう。

そもそもHTMLとCSSとは

HTMLとは、「Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）」の略称で、要するにウェブサイトの材料となるデータです。これに対し、CSSは「Cascading Style Sheets(カスケーディング・スタイルシート)」と言い、HTMLを装飾したりデザインするのに必要な材料です。コンピューターにウェブサイトとして表示させるには、そのためのデータをサーバーから送信する必要があります。

サーバーは、私たちが使用しているコンピューター側からその“お願い”を受け取り、指示されたウェブサイトのデータを送り返して“返事”します。そうして、ようやくコンピューターにウェブサイトの情報が届くわけですが、そのままではHTMLで書かれたアルファベットの文字列に過ぎず、読みやすい文字や綺麗なデザインなどは皆無です。そこで、ブラウザを使用してそのデータを表示します。ブラウザでは、ウェブサイトのデータが設計されたデザインで表示されるため、HTMLとCSSで必要とするコードを書き、それをサーバーに保存しておきます。

HTML5は何が違うか

HTML5は、HTMLの第5版、つまりバージョン5です。ウェブサイトの材料となるデータが第5版まで新しくなっているため、その分機能性や利便性が向上しているという訳です。HTML5 では、動画や音声の埋め込みが簡単になりました。今や、動きのないウェブサイトは比較的少ないぐらいで、ほとんどの企業は読みやすく機能的ながらも、動きがあって印象に残るウェブサイトを制作します。HTML5以前のHTMLでは、JavaScriptやPHP、FlashPlayerなどのHTML以外のプログラムも併用しなければ、動画や音声をウェブサイト上で表示できませんでした。特に、FlashPlayerはセキュリティーの脆弱性が強く指摘されているため、他のプログラムを使ってさらに複雑な設計をしなければ、必要とする機能を装備出来なかったのです。

しかし、HTML5では動画や音声用のタグがあるため、そこに各種データを放り込み、ブラウザの基本的な機能だけで動画や音声を扱えます。ちょうど、お店に入るとBGMが聞こえてくるのと同じで、お店で音楽を流すのにプロのバンドに演奏を頼む必要はなくなりました。そもそも、HTML5では書く文字構造がシンプルです。今までは、タグで文章が埋め尽くされ、HTMLを扱うエンジニアにとっても複雑で分かりにくいものになりがちでした。書かなければならないコードが多くなると、設計ミスも多くなります。

HTML5では、同じような機能やデザインを持ったウェブサイトを設計する際でも、より少なくシンプルな文字列で表現できます。簡単なJavaScriptを書くだけで、位置情報を取得したり、Cookieよりも容易に　データをクライアント側に保管させたり等の作業が簡単に行えます。入力項目の書式のチェックや必須の項目を作成するのも、JavaScriptを使わずに装備出来ます。必要とされる記述も省略・簡略化されているため、実際にHTMLを書いても間違えにくく、つづり間違いなども減らせます。HTML5ではアプリケーションの開発もでき、iOSやAndroid用のアプリケーションも、HTML5で書いたコードをベースに作成できます。

CSSの新たな機能

CSSの最新版がCSS3ということになりますが、CSS2に様々な機能や仕様を加えたのがCSS3です。そのため、CSS2以前のカスタムシートと互換性があり、書き直さなくてもCSS3の新しい機能を装備できます。例えば、文字や画像に影を付ける場合、以前は画像を加工する必要がありました。しかし、CSS3ではtext-shadowプロパティや、ボックスに影を付けるbox-shadowプロパティを使用することで、CSSだけで影の演出ができます。画像やボックスの角を丸めるのも、画像の加工ではなくborder-radiusプロパティを使用すれば、ブラウザ上で角の丸い枠が表示されます。

他にも、

などの機能が追加されています。これらは、往来のCSSでは装備出来なかった機能です。その他の仕様やコードの書き方は、往来のCSSと同じです。つまり、ある部分をCSS2.1の書き方で書いて、実装したい機能をCSS3で書いたとしても機能します。CSS3とはいえ全てが新しくなったわけではなく、機能や仕様が追加されただけだからです。しかも、CSS3の互換性を活用すれば、HTML4.01などの古い形式のHTMLにも、CSS3の最新の機能を実装できます。

すでに、一部の機能はCSS4としての開発や策定が進んでいますが、これも古いバージョンのブラウザやHTMLでも使用できます。最新の機能に対応していなければ表示されませんが、その最新の機能だけが無視されるため、CSS全体を書き直す必要がないので効率的です。