CSSはWEBデザインの要/台東区上野のWEB制作/訪日外国人集客会社

株式会社ケイツー・インタラクティブ [K2-interactive]

WEB担当者の相談室

CSSはWEBデザインの要

 

ホームぺージのリニューアルの提案でCSSと制作会社がよく言うのですが、CSSって何ですか?

CSSは Cascading Style Sheets の略で、HTMLのタグに紐づけることで、レイアウトやカラーなど視覚的な(デザイン)情報を指定することが出来る言語です。

CSSはWEBデザインの要:目次

制作しない方のためのCSSの基礎知識

制作をしない企業のWEB担当者でも、WEBサイトのリニューアルの際にCSSの話が出てくることがあると思います。そのような方のために、かんたんにCSSについて解説いたします。

また、HTMLについてご覧になりたい方、またはHTMLをご存じない方は、はじめに『ホームページ制作に必ず使う言語HTMLのおさらい』をご覧ください。

スタイルシートとは

CSSは Cascading Style Sheets の略で、文章構造(HTML)とデザイン要素を分離させる為に提唱されたスタイルシートの一つです。利用方法は大まかに以下の3パターンです。

  • 特定のHTMLタグに設定
  • HEADタグ内に設定しページ全体を制御
  • 外部ファイルとしてインクルードしてサイト全体または限定的に制御

セレクタとプロパティ

CSSを設定するためにはセレクタとプロパティを記述します。セレクタとはどの要素(HTMLタグ)に設定するかを記述し、プロパティにはどんな特性をタグに付与するかを設定します。プロパティには値があり、特性の詳細を設定することが出来ます。

例えばPタグ内のテキストを赤くしたい場合は、セレクタに「P」を指定して、プロパティには「テキストの色について」を指定、その値を「赤」にするとします。その場合は下記のように記述します。

特定のHTMLタグに設定する場合
<p style="color:red">テキスト</p>
それ以外の場合
HEADタグ内に記載
p{color:red}
・・省略・・
<p>テキスト</p>

このようなイメージです。HTMLのHEADタグ内に記述することもあれば、外部ファイル(xxx.css)としてインクルードする場合もあります。

よく使われるプロパティの紹介

フォント・テキスト系

テキストの種類やカラー、大きさなどを設定することが出来ます。

  • [位置] text-align: left
  • [大きさ]font-size: 12px
  • [色]  color : red
  • [太字] font-weight: bold

見出しとテキストの文字サイズの関係や、意味合いごとのカラー設定でデザインにメリハリを付けます。

フォント・テキスト系という言葉はこの文章の便宜上使っていますが、一般的には使われません。

背景系

背景色や背景画像とその位置や使い方を指定することが出来ます。

  • [背景色] background-color: red
  • [背景画像]background-color: url(画像へのパス)
  • [位置]  background-position: left top
  • [繰り返し]background-repeat: none

他にもいくつかのプロパティがありますが、これらを駆使してレイアウトの背景に画像を敷くことで、オリジナリティのあるデザインを実現することが出来ます。

背景系という言葉はこの文章の便宜上使っていますが、一般的には使われません。

具体的な記述例

CSSとHTMLの関係をシンプルな例で解説いたします。

特定のHTMLタグに設定

下記のHTMLコードをテキストエディターにコピーして、sample1.htmlとして保存してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。

sample1.html
<html>
 <head>
  <meta charset="utf-8">
  <title>特定のHTMLタグに設定CSSのサンプルです。</title>
 </head>
 <body>
  <p>テキスト</p>
   <div style="color:red">テキスト</div>
  </body>
</htme>
HEADタグ内に設定

下記のHTMLコードをテキストエディターにコピーして、sample2.htmlとして保存してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。

sample2.html
<html>
 <head>
  <meta charset="utf-8">
  <title>HEADタグ内に設定CSSのサンプルです。</title>
  <style type="text/css">
   .sample {
    color:red;
   }

  </style>
 </head>
 <body>
  <p>テキスト</p>
  <div class="sample">テキスト</div>
 </body>
</htme>
外部ファイルをインクルード

HTMLファイルsample3.htmlとsample.cssを同じ階層(フォルダー)に作って、それぞれ下記のように記述してください。こちらの事例では文字コードはutf-8に設定していますが任意でかまいません。

sample3.html
<html>
 <head>
  <meta charset="utf-8">
  <title>外部ファイルをインクルードCSSのサンプルです。</title>
  <link rel="stylesheet" type="text/css" href="sample.css">
 </head>
 <body>
  <p>テキスト</p>
  <div class="sample">テキスト</div>
 </body>
</htme>

外部CSS sample.css
.sample {
 color:red;
}

それぞれのHTMLファイルをブラウザにドラッグ&ドロップすると、赤いテキスト文字が表示されます。これがCSSの視覚効果です。

CSSはWEBデザインの要のまとめ

ホームページのデザインを作るCSSとその効果いかがでしたか?ドキュメント内で文章構造(HTML)とデザイン要素(CSS)が分離されていることを一番シンプルな形でご紹介しました。このように役割を切り離すことで汎用性のあるHTML/CSSのデータ活用が出来ます。また、HTML内には文章構造のみが残るので、検索エンジンに対してもより正しい情報を提供することが出来ます。

ケイツー・インタラクティブでは企業様のホームぺージリニューアルを承っています。ご不明な点やご要望などございましたらお気軽にお問い合わせください。

本情報はページ公開時のものです。情報は常に更新され掲載内容と異なる場合がございます。

WEBマーケティング
CMSツール導入支援

CSSはWEBデザインの要に関連する記事

jqueryを使ってjavascript開発の効率化
UIを実装するフロントエンジニア
HTML5で動画を埋め込む演出
ホームページに掲載するための写真
キャッチコピーの作り方

K2 WAY

ソリューション

施策事例 Client Voice

WEB担当者の必見ノウハウ 7 選

K2の得意なこと

WEBマーケティング

WEBマーケティング

顧客とのコミュニケーション課題を解決して、御社のビジネスを成功につなげるWEBマーケティングのプロ集団です。

WEBマーケティング

インバウンド集客PR

インバウンドの集客PR

IT/SNSを使ったプロモーションからイベント開催まで一貫したO2Oブランド構築で集客・PRをご支援をいたします。

インバウンド集客PRを見る

CMSツール導入支援

CMSツール導入支援

HTMLが判らなくてもかんたんにWEBサイトを更新出来るCMSツールを活用して、見込み客をを増やしませんか?

CMSツール導入支援を見る