マスターしたいHTML&CSS

HTMLとCSSはWebサイトに欠かせない技術です。一昔前のホームページから、最新のWebサービスまで、WebサイトはHTMLとCSSを基盤につくられています。

昨今はSNSの流行や各種ブログサービスの人気で、あまり個人でWebサイトを作成・公開することはなくなりました。しかし、Webサイトをこだわってつくりたいという趣味の人気や、IT系で有利なスキルとしての人気は変わらず高いです。

人気のHTMLとCSSがどんなものかみていきましょう。

HTML―Webサイトの内容

HTMLはWebサイトの文書(内容)を表示するための言語です。言語と言っても普段使う日本語のような言語とは違い、Webサイトを表示するためにいろいろな規則のある特別な言語です。

HTMLはHyperText Markup Languageの略称です。HyperText(ハイパーテキスト)というのは、文書同士をリンクさせるための仕組みです。Webサイトはリンクをクリックすると他のページに飛べます。こういった仕組みを指していると考えてください。

Markup(マークアップ)は印をつけるといった意味です。HTMLはタグ(印)をつけて、文章を意味づけします。たとえば、<a>というタグはリンクを意味します。次に示す例は、https://gihyo.jpというサイトにリンクするためのHTMLの例文です。

<a href="https://gihyo.jp">gihyo.jp</a>

他にも強調したい、文章の見出しにしたいなどさまざまな意味のマークアップを適用できます。HTMLはWebサイトの文章とその意味づけを記述します。

CSS―Webサイトの見た目

CSSはWebサイトの装飾のための言語です。HTMLと組み合わせて使うことで文書の見た目を変更します。CSSはCascading Style Sheets(カスケーディングスタイルシート)の略称です。文字の大きさや色を変えたり、ページの背景に画像を置いたりといった見た目の変更はもちろん。レイアウトを自在に変更するといった、より高度な使い方もできます。

たとえば、スマートフォンとパソコンでWebサイトの見た目を変えるような使い方もできます。CSSはWebサイトの見た目をよくするうえで欠かせません。

HTMLとCSSのあたらしい書き方

HTMLとCSSは、実は仕様(書き方のルールや機能)がどんどん更新されていきます。HTML5とCSS3という大幅な刷新は特に話題になりました。

HTMLとCSSは実は新しい仕様にもとづいた書き方にしなくても、ほとんどのケースで問題なく動かせます。なので、一度勉強すれば、知識はある程度通用します。

ただ、新しい仕様を学んでいたほうが、より柔軟に表現力豊かにWebサイトをつくれます。たとえば、新聞や雑誌のような自由なレイアウトを可能にするGrid(グリッド)などは比較的新しいCSSの仕様です。

書籍やさしくわかるHTML&CSSの教室では、最新のレイアウト方法などを取り上げつつ、わかりやすくHTMLとCSSを解説しています。