スタッフブログ

コーディングラボのスタッフから、
日々のつぶやきをお届けします。

見栄えをよくするスタイルシート

CSSとは

Webページを作成するには、二つの言語を使います。ひとつはHTML(Hyper Text Markup Language)というマークアップ言語で、文書の構造を記述するために使います。もうひとつはCSS(Cascading Style Sheet)というスタイルシート言語です。こちらはHTMLで書かれた文書の見栄えを良くするために、装飾する目的で使われます。フォントや文字の大きさ、文字飾り、行間などの見た目のレイアウトに関する情報を受け持っているのです。以前、HTMLにはレイアウトに関する仕様が取り込まれていました。しかし、文書の論理構造を記述するという趣旨にはずれるうえ、本来の役割とは違った使い方をすると、文章の情報構造がでたらめになってしまい、コンピューターや検索エンジンが理解できないWebサイトになってしまいます。そうした事態にならないためにも、文章構造とレイアウトは別々になっているのです。

基本の決まりごと

まずは基本的な書き方を説明します。
セレクタ{プロパティ:値}となります。

p{font-size:10pt:}

<p></p>で囲んだ部分の{フォントサイズを:10ポイントにする;}というふうになります。記述は基本的に小文字です。書き方のルールとして、プロパティの後は半角コロン:で、値の後ろはセミコロン;で閉めます。プロパティと値は{}で囲います。この半角コロンやセミコロン、{}のどれかでも抜けていると、指定した装飾やデザインがHTMLには反映されませんので、付け忘れがないようにしましょう。
次にフォントの値と色を指定します。

p{font-size:12pt;color:red}

<p></p>で囲んだ部分の{フォントサイズを:12ポイントにする;色を:赤にする}という具合になります。
説明はとっても簡単で単純なものでしたが、実際に自分で記述するとなると、慣れない作業なのでちょっと自信がないときや、手っ取り早く仕上げたい場合には、HTMLとCSSのコーディング代行をしてくれる専門の会社がありますので、そちらのほうにお願いしてしまうというのも、選択肢に入れてみてはいかがでしょうか。