Webマーケティング2021.03.29
ツイート目次
「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-size | px |
| 文字の色 | color | red,blue,＃FF0000 |
| 文字の太さ | font-weight | bold |
| 文字の字体 | font-family | `MS明朝’ |
| テキストの装飾 | text-decoration | none,underline,overline |
枠線に関するスタイル
| 枠線 | border | 色、種類、枠線の太さ（px） |
| 枠の丸さ | border-radius | px |
背景に関するスタイル
| 背景の色 | background-color | red,blue,＃FF0000 |
| 背景の画像 | background-image | url() |
| 背景画像のサイズ | background-size | auto,contain,cover,% |
| 背景全般 | background |
横幅と高さに関するスタイル
| 横幅 | width | :px; |
| 高さ | height | :px; |
余白に関するスタイル
| ボックス外部の余白 | margin | :px; |
| ボックス内部の余白 | padding | :px; |
テキストに関するスタイル
| 水平方向の位置 | text-align | Left,center,right |
| 行の高さ | line-height | %,em,normal |
位置に関するスタイル
| 位置 | position | static,relative,absolute,fixed |
| 上からの位置 | top | auto,%,em,px |
| 下からの位置 | bottom | auto,%,em,px |
| 左からの位置 | left | auto,%,em,px |
| 右からの位置 | right | auto,%,em,px |
影に関するスタイル
| ボックスの影 | box-shadow | 左右、上下、ぼかし、色 |
| テキストの影 | text-shadow | 左右、上下、ぼかし、色 |
まとめ
CSSの重要性について。HTMLと併用することで作成するWEBページの見栄えが良くなり、情報が整備されやすくなる事で、ユーザーに伝えたいことが明確になることでしょう。これからWEBページを作成される方は、CSSとHTMLを併用して作成することをお勧めします。初めはその記述をサポートするアプリケーションを使用してもよいでしょう。
