パソコンだけでなくスマートフォンが普及することにより、近年はWebサイトがさらに身近な存在になっています。
情報を得るため、買い物をするため、食事や旅行を予約するためなど、Webページを見ることが私たちの暮らしの中で当たり前なことになっていますが、そういったWebページはほぼすべて、HTMLと合わせてCSS（Cascading Style Sheets）が使用されています。
本稿ではWebページのデザインには欠かせない言語、CSSについて説明していきます。
CSSとHTMLの関係
世の中にあるWebサイトはそのほとんどがHTMLという言語で構成されていて、HTMLがブラウザに読み込まれることによって私たちが日頃見ているWebページが表示されています。
HTMLはページ情報や本文を記すための言語であり、そこに文字の色や背景の画像などの装飾を施すために使われるのがCSSです。
CSSはHTMLと同じテキストデータですので、HTMLソース内に直接書き込むこともできますが、単独のCSSファイルを作成しHTMLから読み込む手段も多く使われています。
入門：HTML（Hyper Text Markup Language）
私たちが日頃何気なく見ているWebサイトはほぼすべて、「HTML」から成り立っています。「HTML」はすべてのWebサイトの基礎といえる言語です。言語といっても人と人とが話をする言語と違って、コンピューターに対して情報を伝えるための言語です。本稿では「HTML」とはなにか、わかりやすく解説していきます。
CSSの書き方
書き方はシンプルですので、基本的な構造を覚えてしまえば記述は難しくありません。例えば、<p>タグで囲った文字を青色で表示したい場合、CSSでは下記のようにP{font-color:blue}と記述します。
指示する内容を｛｝の中に記述していくこの形式で、必要な分だけ羅列していくのです。CSSはバージョンの進化と共にできることが増えてきたため、プロパティの種類は数えきれないほど膨大なものになっています。Color→文字色、border→枠線、background-image→背景画像など一般的によく使用されるものから徐々に覚えていきましょう。
それではCSSを設定していないWebページと、設定しているWebページを比べてみましょう。
まず、CSSなしのページではWebページの枠組みのみで構成されている状態なので、ブラウザ上ではモノトーンで表示されています。
では、CSSファイル（test.css）に「h1（タイトル部分）に文字色＝白と背景＝青、p（本文）に文字色＝オレンジ、文字の大きさ20ピクセル」という指示を記述してHTMLから読み込んでみます。
簡単ではありますがブラウザ上の表示に、装飾が施されました。
このように同じ場所に複数の指示を出す場合には；で区切り、見やすい場所で改行して羅列していきます。ブラウザで読み込まれるときに改行は無視されますので、自分がわかりやすいように記述していきましょう。
CSSの入力補助など記述をサポートしてくれる便利なソフトウェアも多数ありますので、まずはそういったソフトを使ってみることもおすすめします。
CSSを使用するメリット
CSSでWebページの装飾を設定することで、文書の構造とスタイルを分離して管理できるようになります。
HTML文書だけでも<font>や<center>などのタグを使用することで装飾に関する指示を出すことは可能ですが、例えば後から見出しの色を変更する場合、見出しが使われている箇所全てを変更する必要があり、CSSではこういった変更を一括で行うことができます。
また、スタイルに関する記述を一カ所にまとめ、HTML文書がシンプルに軽量化されることによって、検索エンジンに正しく解釈されるなどSEO対策にも効果的です。
レスポンシブ・ウェブデザイン
PC、タブレット、スマートフォンなど様々な端末が利用されている昨今、Webページがどの端末から閲覧されるかによって画面が表示される大きさや縦横比が大きく異なります。
例えばPCの画面は横長、モバイル画面は縦長なものが一般的です。２つの大きさに合わせてWebページを作成すると倍のコストがかかってしまうため、最近では「レスポンシブ・ウェブデザイン」と呼ばれる見やすい表示に自動で切り替える仕組みを持つデザインが多く採用されています。
「レスポンシブ・ウェブデザイン」では、作成するWebページのHTMLファイルを１つだけ用意し、端末ごとに表示される幅はCSSでコントロールすることが可能です。
まとめ
Webページの見栄えに深く関わるCSSですが本稿で触れたのはほんの一例で、CSSでは他にも様々な装飾・デザインを実現することができます。
日頃Webページを見ているときに、このデザインはどんな設定を加えているのか、と考えながら見てみるのも楽しいかもしれませんね。
HTTPとは？HTTPSについても解説
私たちが普段、Webブラウザを使ってWebサイトにアクセスする時、「HTTP」という通信プロトコルが利用されています。Webブラウザのアドレスバーに「http://www.〇〇〇.co.jp」などと入力した場合の、「http:」の部分のことです。本稿では「HTTP」とはなにか、分かりやすく解説していきます。
