「HTML」をご存じの方は一度耳にしたことがあると思われる「CSS」。HTML同様CSSはWEBページ作成にあたり、装飾や見栄えにおいて重要な役割を担います。普段目にするWEBページがどのように作成されているかを見ていきましょう。

CSSとは?

CSSとは「カスケーディングスタイルシート」の略です。HTMLで作成されたWEBページに装飾やレイアウトを指示するスタイルシート言語のことです。文字、背景などの配色や画像の表示位置、余白量の調整などに使用されています。

CSSとHTML

前述したとおり、HTMLで作成されたWEBページに装飾やページレイアウトを指示するための言語がCSSです。HTML(ページ情報、文章構造、本文)とCSS(装飾)を合わせることで見栄えの良いWEBページが出来上がります。CSSはHTMLと同様にテキスト形式となります。また、HTML内にCSSを入力することも可能ですが、HTMLとCSSを別々に管理することもできます。重要なのはどの要素にどのような装飾を加えるかということです。

CSSが必要な理由

HTMLでもスタイルの設定をすることはできますが、文章の内容に合わないタグを使用すると、文章の構造が分からなくなります。CSSを使用することにより、文章の構造に影響を与えずにスタイルの設定ができる為、スムーズにスタイル設定ができます。また、CSSでスタイルをまとめて管理しておくと、同じレイアウトを使用する複数のデータがある際に1回の操作で全ての編集ができることもポイントとなります。また、閲覧されるデバイスごとに、表示されるスタイルを指定することもできます。

CSSの記述

CSSもHTMLと同様、その知識や経験が無いと、一からWEBページを作成することは困難です。最初は、サポートをしてくれるアプリケーションを使用するとよいでしょう。CSSをすべて作成してくれる機能から、編集のサポートをしてくれる機能など、技術に合うアプリケーションを使用しましょう。

CSSの基本的な構造

CSSの基本的な構造は、「セレクタ」、「プロパティ」、「値」の3つを使用して説明できます。

セレクタ{プロパティ:値;}

言語意味
セレクタどこの
プロパティ何を
どうする

この3つを使用することにより、基本的なレイアウトを指定することができ、『{}』内にプロパティ:値;の組み合わせを入れれば、一つの文字列に対していくつものレイアウトの指定をすることができます。

よく使うCSSプロパティと値

文字に関するスタイル

文字の大きさfont-sizepx
文字の色colorred,blue,#FF0000
文字の太さfont-weightbold
文字の字体font-family`MS明朝’
テキストの装飾text-decorationnone,underline,overline

枠線に関するスタイル

枠線border色、種類、枠線の太さ(px)
枠の丸さborder-radiuspx

背景に関するスタイル

背景の色background-colorred,blue,#FF0000
背景の画像background-imageurl()
背景画像のサイズbackground-sizeauto,contain,cover,%
背景全般background 

横幅と高さに関するスタイル

横幅width:px;
高さheight:px;

余白に関するスタイル

ボックス外部の余白margin:px;
ボックス内部の余白padding:px;

テキストに関するスタイル

水平方向の位置text-alignLeft,center,right
行の高さline-height%,em,normal

位置に関するスタイル

位置positionstatic,relative,absolute,fixed
上からの位置topauto,%,em,px
下からの位置bottomauto,%,em,px
左からの位置leftauto,%,em,px
右からの位置rightauto,%,em,px

影に関するスタイル

ボックスの影box-shadow左右、上下、ぼかし、色
テキストの影text-shadow左右、上下、ぼかし、色

まとめ

CSSの重要性について。HTMLと併用することで作成するWEBページの見栄えが良くなり、情報が整備されやすくなる事で、ユーザーに伝えたいことが明確になることでしょう。これからWEBページを作成される方は、CSSとHTMLを併用して作成することをお勧めします。初めはその記述をサポートするアプリケーションを使用してもよいでしょう。