デザインの美しさはCSSによって決まる

ウェブサイトが簡単に持てるようになった時代において、他社と差別化することは容易ではありません。
しかしながら、何の対策も行わないでいると、何の印象も残らないウェブサイトになってしまいます。
今回はデザイン部分で他社と差別化するため、以下のポイントでCSSについて紹介していきたいと思います。

• ・HTMLは文章構造、CSSは装飾をそれぞれ担っている
• ・CSSには3つの記述方法がある
• ・CSSプロパティはかなりの数が定義されている
• ・ワードプレスもCSSで装飾できる。デザインを重視しないウェブサイトならばフレームワークを使うべき
• ・デザインが重要なウェブサイトならばCSSをゼロから書いた方が良い

HTMLは文章、CSSは装飾

CSSとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の頭文字をとっていて、HTMLのデザイン（装飾）をするための言語です。

ウェブサイト関連の言語と言えば、HTMLをイメージする人が多いでしょうが、見た目が美しいウェブサイトを作るためにはそれだけでは不十分です。
HTMLはタグを使って文章構造を構築し、ユーザーがページを見た時に読みやすくする事が主な役割ですが、基本的にHTMLだけで書かれたウェブサイトは黒色の文字と画像、動画だけで構成されているのでかなり味気ないウェブサイトになります。

一方でCSSは装飾が主な役割です。そのためウェブサイトを艶やかにします。
白黒しか使われていなかったウェブサイトに色を加えて、文字の大きさや文字フォント、背景色などに変化を与えます。レイアウト調整もお手の物です。

このようにCSSはウェブサイトを全体的に美しくしてくれるのです。

■関連記事：世界中の情報整理を後押ししたHTMLの進歩

CSSには3パターンの書き方がある

CSSには主に3パターンの記述方法がありますが、書き方によって表示感が変わることはありません。ただ記載する箇所が違うだけです。

1.CSSファイルを作り、HTMLファイルで読み込む

HTMLファイルは文章、CSSファイルは装飾で完全に役割を分ける方法です。
拡張子を.cssにすればCSSファイルは作れます。HTMLファイルのheadタグ内に＜link rel=”stylesheet” type =”text/css” href=”スタイルシート名”＞と記述することでHTMLファイルがCSSファイルを読み込んでくれるので、CSSファイルに記述した内容が反映されることになります。

2.HTMLファイルにstyleタグを使って書く

HTMLファイルとCSSファイルを分けずに、HTMLファイル内に記述する方法です。
headタグで囲まれたところにstyleタグを書き、その中にCSSを記述します。

3.HTMLタグの中に書く

2の書き方と似ていますが、HTMLタグ内に直接CSSを書き込む方法です。
＜p＞タグを装飾する場合は、＜p style=”font-size:10px;”＞というように記述します。この書き方なら、どのHTMLタグに装飾があたっているかが一目でわかります。

CSSの記述はCSSファイルに書くべき理由

このように3つのパターンでCSSを記述する方法をお伝えしました。
それぞれメリットはありますが、基本的にCSSは1番目のCSSファイルを作り、HTMLファイルで読み込む方法で記述をした方が良いです。

HTMLファイルは文章構造、CSSファイルは装飾を目的として開発されました。原因不明のバグを起こさないためにもそれぞれのファイル目的に沿った形で記述した方が安全です。
手間かもしれませんが、それぞれ分けて記述しましょう。

代表的なCSSプロパティ

CSSには様々なプロパティが用意されていますが、その中でも代表的なプロパティを紹介します。役割と併せてプロパティの書き方も解説していきます。

フォント関連の装飾を行うfont

fontプロパティはフォントのスタイルや太さ、サイズなどを指定します。フォントはウェブサイトの印象を大きく左右するので、慎重に指定しましょう。

p{font:italic normal bold 15px;}
この指定はpタグで括られている文字を装飾しています。フォントをイタリック体の太字で15pxの大きさにする指定です。

文字色を付けるcolor

colorプロパティは文字に色を付けます。文字色の指定方法は色名指定やHTMLカラーコード指定などのパターンがあります。
●色名指定で赤色をつける p{color:red;}
●HTMLカラーコードで赤色をつける p{color:#ff0000;}
このように記述します。

背景色をつけるbackground-color

backgroundは背景指定を行うプロパティです。その中でも良く使うbackground-colorは背景に色をつけます。指定方法はcolorプロパティと同様、色名指定やHTMLカラーコード指定などのパターンがあります。比較的広範囲を扱うタグに指定することが多いです。
●色名指定で赤色をつける body{background-color:red;}
●HTMLカラーコードで赤色をつける body{background-color:#ff0000;}
ちなみにbackgroundはcolorだけでなく、背景画像を指定するbackground-imageや背景画像の位置を指定するbackground-positionなどがあります。

高さを調整するheight

レイアウト調整のためにそれぞれのHTMLタグ表示の高さを指定するタグがheightプロパティです。指定方法はpx（ピクセル）や%(パーセント)で指定します。
●pxで高さを指定する p{height:120px;}
●%で高さを指定する p{height:80%;}
このようにして高さを調整します。

幅を調整するwidth

widthは幅を指定するプロパティです。heightとセットで記述されることが多く、また記述方法はheightと同様にpxと%で指定します。
●pxで幅を指定する p{width:120px;}
●%で幅を指定する p{width:80%;}
このようにして幅の大きさを調整します。

境界線をデザインするborder

borderプロパティは境界線の太さや色、スタイルを指定します。

p{border:double 12px #ff0000;}
と記述すると、境界線が12pxで赤色の2本線となります。
以上、よく使うCSSプロパティを紹介しましたが、他にもpaddingやmargin、displayやclearなどたくさんのプロパティがあります。使い方ひとつで大きくデザインが変わるので、それぞれの特徴を理解したうえで上手に使ってください。

ワードプレスもCSS

今まではHTMLファイルとCSSファイルの組み合わせを前提としてCSSを紹介してきましたが、手軽にウェブサイトを作るワードプレスのデザインもCSSで行います。
今や世界中25%以上のウェブサイトがワードプレスを使っていると言われていますが、ワードプレスの場合もCSSファイルに書き込むことで装飾ができます。
ただし注意点として、ワードプレスはテーマをインストールした時点ですでにCSSファイル内に記述があります。
この既存記述を消したり、大きく変更したりするとデザインが大幅に変わってしまう可能性があるため、ワードプレスでCSSファイルを修正・追記する場合は慎重に行う必要があります。

CSSにはフレームワークがある

自分での記述に自信がない方はCSSのフレームワークを使うのも1つのやり方です。フレームワークのCSSをベースにして、必要なところだけ自分好みに修正を加えるのが賢い利用法です。
フレームワークはホームページよりもウェブアプリ―ケーションを作る場合によく利用されます。代表的なフレームワークは以下の3つです。

Bootstrap

圧倒的人気のフレームワークです。ツイッター社が開発したCSSフレームワークで、高品質かつ手軽に利用ができます。
またレスポンシブデザインなので、スマートフォンやタブレット端末にも最適な形で表示されます。

Foundation

Bootstrapには敵いませんが、こちらも人気のCSSフレームワークです。
Bootstrapよりデザインの自由度が高いので、”見たことがあるデザイン”になりづらいフレームークです。こちらもレスポンシブデザインです。

Pure

Yahoo!が提供するCSSフレームワークのPureは圧倒的な軽さが特徴です。
そのため最低限の部分をPureがカバーして、プラスアルファーのデザインは自分で作る方におすすめのフレームワークです。

デザイン重視であればゼロからのCSS記述がおすすめ

CSSはCSSファイルをゼロから作り上げるタイプと、ワードプレスやフレームワークのように既存CSSに自分なりに手を加えるタイプがあります。デザインをあまり重視しない場合は後者で十分ですが、デザイン力を重視するような企業のウェブサイトであれば、CSSをゼロから書いた方がオリジナリティの高いウェブサイトが出来上がります。
時間はかかるかもしれませんが、デザインでブランドイメージや企業のポリシーを表現したいのであれば、ゼロからのCSS記述がオススメです。

PR：ECサイト構築パッケージ「Orange EC」ではお客様にECサイト運営のノウハウをお伝えしています

>>お問合せはこちらから