⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
Webサイトを運営しているのであれば、CSSという用語を聞いたことがあると思います。
しかし、「CSSって何？」「CSSでできることとは？」など、疑問を持っている方も多いでしょう。
そこで、この記事ではCSSについて初心者向けの解説を行います。Webサイトの運営に役立ててください。
CSSとは？
CSSとは略称であり、正式には「Cascading Style Sheets」といいます。
そもそもWebページはHTMLという文書構造と見栄えであるCSSにより成り立っています。自社サイトにおいて、グロバールメニューやヘッダー画像、サイドバーなどさまざまなものを設置していると思います。それがCSSと思ってもいいでしょう。
つまり、CSSを書くことでユーザーがわかりやすいサイトやページに仕上がるわけです。仮にCSSを適用しないと、見出しや文字列が順番になっているだけでとなり、画像の位置や大きさがわからなくなります。
見やすいサイトにするにはCSSが不可欠ということです。
CSSを使うメリット
CSSを適用することで、サイトやページの見栄えが向上します。そのほかにも以下のメリットがあります。
文書構造を保ちながらスタイル指定ができる
HTMLで文書のスタイルを指定しようとすると、文書構造がわからなくなるトラブルが起こります。そこでCSSを使うと、文書構造に影響を与えずにスタイルの指定ができます。
メンテナンスがしやすくなる
たとえば、HTMLで見出しの文字サイズやカラーのスタイル指定しようとすると、見出しを使用しているすべての箇所を変更する必要があります。
しかし、CSSならばそのようなスタイルを一括で管理することが可能です。さらに、複数の文書でスタイルを共有できるためにメンテナンスのしやすさが格段に向上します。
SEO効果が期待できる
CSSでスタイル指定を行うと、スタイルに関する記述を一カ所にまとめることができます。そのため、Webページの軽量化につながり、ユーザービリティにも好影響です。最終的にはSEO効果も期待できるようになります。
メディアごとにスタイル指定ができる
CSSはパソコンのスクリーンだけではなく、スマホやテレビ、点字などさまざまなメディアにわけてスタイル指定ができます。
メディアごとにスタイル指定することで、特定のメディアに依存することなくメディアにあわせたスタイルでWebページの再生が可能となるでしょう。
CSSを書く方法
CSSはHTMLと同様で、コードで書いていきます。たとえば、見出し2を赤文字にしたいならば、以下のようにコードを書きます。
H2 {
color： red；
}
CSSを書くときは、どの部分を変化させたいかを指定して、「color」などと入れます。「：」の右側にその内容を具体的に指示していく流れです。
たとえば、見出し2を赤文字にして文字サイズを50pxにするならば、以下のようになります。
H2 {
color： red；
font-size： 50px
}
以上のように指示内容を追加していくことで、さまざまな要素をカスタマイズできます。
覚えておきたいCSSの指示
ここからは、初心者でも覚えておきたいCSSの指示を9つ、紹介します。
Font-size
「font-size」は文字サイズを指定する指示です。サイズの指定方法は「長さ・％」「絶対サイズ」「相対サイズ」があります。
・長さ・％：任意の数字にpxや％などの単位をつけて指示します。
・絶対サイズ：「x-large」「large」など絶対サイズを指定します。
・相対サイズ：親要素の文字サイズに対して1段階大きくしたいなら「larger」、1段階下にしたいならば「smaller」を指定します。
Color
「color」は文字の色を指定します。ユーザーの環境で背景が設定されていたときに読みにくくなることを防ぐため、背景色の指定を同時にしておくといいでしょう。
Background-color
「background-color」は背景色を指定するときのプロパティです。サイト全体との配色も考えたうえで、変更したいところです。
Hight
「hight」は高さを指定するプロパティです。初期は「auto」となっていますが、数値や％値で指定します。
Width
「width」は幅を指定するプロパティです。Hightと同様で初期は「auto」となっていて、数値や％値で指定します。
Margin
「margin」はマージンという領域間のスペースを指定するプロパティです。次の「padding」と共に覚えておくと有効です。複数の数値を指定すると、上下左右で異なる値の指定が可能です。
Padding
「padding」はパディングと呼ばれる領域内のスペースを指定するプロパティです。「margin」と同様で上下左右に異なる指定をすることが可能です。
Float
「float」は指定された要素を左、もしくは右に寄せて配列するときに使うプロパティです。「float」が使われた要素のあとの要素は、その反対に回り込みます。
たとえば、「float：left」で指定された要素は左に寄り、次に来る要素は右側に回り込みます。初期値は「float：none；」であり、配置を指定していません。
Border
要素の境界線のスタイルや太さ、色を指定するプロパティです。
・スタイルの値：代表的なものは、一本線を表現する「solid」、二本線の「double」などがあります。
・大きさの値：「height」「width」と同じようにpxなどの単位を指定することができます。細くしたいときは「thin」、太くしたいときは「thick」などで指定することが可能です。
・色の値：カラーネームなどで指定することができます。「transparent」の値を入れるとボーダーの色を透明にすることもできます。
CSSをWebサイトに活かそう
CSSはWebサイトやページのデザインを整えるものです。HTMLにおいてもスタイル指定はできますが、いろいろと不都合が生じます。
ですから、CSSを適用させて円滑に見栄えを整えることが有効です。この記事では、覚えて起きたい指示をご紹介しましたので、ぜひ、自社のWebサイトにも適用してデザインなどをより良いもの似してください。
⇒【東証プライム企業も多数利用！】最先端のSNSマーケティングツール「Tofu Analytics」、「InstantWin」とは？
