入門:CSS(カスケーディングスタイルシート)

 2020.12.08  株式会社ジェイピー・セキュア

パソコンだけでなくスマートフォンが普及することにより、近年はWebサイトがさらに身近な存在になっています。情報を得るため、買い物をするため、食事や旅行を予約するためなど、Webページを見ることが私たちの暮らしの中で当たり前なことになっていますが、そういったWebページはほぼすべて、HTMLと合わせてCSS(カスケーディングシート)が使用されています。本稿ではWebページのデザインには欠かせない言語、CSSについて説明していきます。

CSSとHTMLの関係

世の中にあるWebサイトはそのほとんどがHTMLという言語で構成されていて、HTMLがブラウザに読み込まれることによって私たちが日頃見ているWebページが表示されています。HTMLはページ情報や本文を記すための言語であり、そこに文字の色や背景の画像などの装飾を施すために使われるのがCSSです。

css_1

 

CSSはHTMLと同じテキストデータですので、HTMLソース内に直接書き込むこともできますが、単独のCSSファイルを作成しHTMLから読み込む手段も多く使われています。

関連記事:入門:HTML(Hyper Text Markup Language)

CSSの書き方

書き方はシンプルですので、基本的な構造を覚えてしまえば記述は難しくありません。例えば、<p>タグで囲った文字を青色で表示したい場合、CSSでは下記のようにP{font-color:blue}と記述します。

css_2

 

指示する内容を{}の中に記述していくこの形式で、必要な分だけ羅列していくのです。CSSはバージョンの進化と共にできることが増えてきたため、プロパティの種類は数えきれないほど膨大なものになっています。Color→文字色、border→枠線、background-image→背景画像など一般的によく使用されるものから徐々に覚えていきましょう。

それではCSSを設定していないWebページと、設定しているWebページを比べてみましょう。

css_3

 

まず、CSSなしのページではWebページの枠組みのみで構成されている状態なので、ブラウザ上ではモノトーンで表示されています。

では、CSS文書に「h1(タイトル部分)に文字色=白と背景=青、p(本文)に文字色=オレンジ、文字の大きさ20ピクセル」という指示を記述してみます。

css_4

 

簡単ではありますがブラウザ上の表示に、装飾が施されました。

このように同じ場所に複数の指示を出す場合には;で区切り、見やすい場所で改行して羅列していきます。ブラウザで読み込まれるときに改行は無視されますので、自分がわかりやすいように記述していきましょう。CSSの記述をサポートしてくれる便利なソフトウェアも多数ありますので、まずはそういったソフトを使ってみることもおすすめします。

CSSを使用するメリット

CSSでWebページの装飾を設定することで、文書の構造とスタイルを分離して管理できるようになります。HTML文書だけでも<font>や<center>などのタグを使用することで装飾に関する指示を出すことは可能ですが、例えば後から見出しの色を変更する場合、見出しが使われている箇所全てを変更する必要がありますが、CSSではこういった変更を一括で行うことができます。また、スタイルに関する記述を一カ所にまとめ、HTML文書がシンプルに軽量化されることによって、検索エンジンに正しく解釈されるなどSEO対策にも効果的です。

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

PC、タブレット、スマートフォンなど様々な端末が利用されている昨今、Webページがどの端末から閲覧されるかによって画面が表示される大きさや縦横比が大きく異なります。例えばPCの画面は横長、モバイル画面は縦長なものが一般的です。2つの大きさに合わせてWebページを作成すると倍のコストがかかってしまうため、最近では「レスポンシブ・ウェブデザイン」と呼ばれる見やすい表示に自動で切り替える仕組みを持つデザインが多く採用されています。「レスポンシブ・ウェブデザイン」では、作成するWebページのHTMLファイルは1つだけ用意し、端末ごとに表示される幅はCSSでコントロールすることが可能です。

css_5

まとめ

Webページの見栄えに深く関わるCSSですが本稿で触れたのはほんの一例で、CSSでは他にも様々な装飾・デザインを実現することができます。日頃Webページを見ているときに、このデザインはどんな設定を加えているのか、と考えながら見てみるのも楽しいかもしれませんね。

CTA

RECENT POST「入門」の最新記事


入門

Webアプリケーションとは何か?ネイティブアプリとの違い、メリットを解説

入門

カスタム・シグネチャの活用について

入門

HTTP(HyperText Transfer Protocol)とは

入門

入門:HTML(Hyper Text Markup Language)

入門:CSS(カスケーディングスタイルシート)