Google検索エンジン

トップページ » スタイルシート入門講座 » CSSの基礎知識とコメントの書き方

CSSの基礎知識とコメントの書き方

  • ■スタイルシート（CSS）とは

    スタイルシート（CSS）とは、「Cascading Style Sheets」の略です。 文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つとなります。 Webサイトにおいて、HTMLドキュメントをどのように表示するかを指定する仕様書のようなものです。 スタイルシート言語と呼ばれる、構造化文書の見た目を記述するコンピュータ言語で記述されます。 HTMLファイルには文章の内容や構造を記述し、CSSファイルには文章の体裁や装飾といった見た目を記述することが推奨されています。


    ■CSSでレイアウトを整形することを推奨する理由

    HTMLファイルに直接スタイルを記述すれば、別途CSSファイルを作成する必要がありません。 しかし、ファイルを別々にして、文書の構造と体裁を分離させることは、「開発の効率化」と「検索エンジン最適化（SEO）」の両面において効果があります。

    プログラム開発では、同じことを何度も記述するのは非効率であり、間違いが生じやすくなるため、推奨されていません。 例えばホームページの一部分をまとめて「右寄せ」から「左寄せ」に変更したいとき、個々のHTMLファイルで「align」を指定していると、全てのHTMLファイルを編集する必要があります。 CSSファイルで「text-align」や「float」などを記述して「右寄せ」に整形していたら、CSSファイルを変更するだけで「左寄せ」に変更することが可能です。

    ユーザーの多くは検索エンジンの検索結果をクリックして、ホームページを表示してます。 ホームページを多くの人に閲覧してもらうには、検索エンジン最適化対策（SEO対策）を実施する必要があります。 HTMLファイルの記述を簡潔にした方が、検索エンジンにwebサイトの内容を理解してもらいやすくなるためSEOにより効果的です。


    ■スタイルシートの使い方

    スタイルシートは、HTMLファイルの「<head>」と「</head>」の間に「link」タグを挿入することで使用できます。 「rel」は、HTMLファイルと参照先であるCSSファイルの関係を記述するので、「stylesheet」を指定します。 「type」には、参照先のタイプを記述するので、「text/css」を指定します。 「href」には、参照先のURLを記述するので、CSSファイルを保存しているURLを指定します。 「media」には、文書の出力先を指定しますが、基本的に「all」を指定しておけば問題ありません。

    HTMLファイル記述例
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
    <title>ホームページタイトル</title>
    <link rel="stylesheet" type="text/css" href="sample.css" media="all" />
    </head>
    <body>
    ホームページの本文を記述します。
    </body>
    </html>

    ■CSSに記述した半角スペース・タブ・改行について

    スタイルシートでは、半角スペース・タブ・改行はスタイルに影響しません。 これらを使用して、CSSファイルのソースコードを見やすく整形しても問題ありません。 ただし、全角スペースを記述してしまうと、スタイルに影響したり、予期せぬエラーが発生したりします。 基本的に一部のフォント指定以外は、全て半角で記述します。


    ■CSSのコメントの書き方

    CSSに記述しているコードは、動作やスタイルに影響しない様に、コメント化することができます。 下のCSSファイル記述例のようにコメント化すると「/*」と「*/」に囲まれている間のソースコードは、スタイルに一切影響しません。

    CSSファイル記述例 
    /*コメント化の例*/
/*
div.test{
	font-style:italic;
	font-weight:bold;
	text-align:center;
	background-color:#CCCC00;
	width:500px;
}
*/
スタイルシート入門講座
it-manual.comのウェブサイト
書籍の紹介
  • 全部無料でつくるはじめてのホームページ & HTML for Windows 7/Vista/XP
    全部無料でつくるはじめてのホームページ & HTML
    発売：2010/07/30
    定価：1,869円
    著者：浅岡 省一
    出版：翔泳社
    内容：ホームページの雛形となるサンプルが丸ごと収録されているので、ソフトや素材と組み合わせれば、自分好みのホームページを無料で簡単に作ることも可能です。Windows7/Vista/XPに対応してます。
  • SEOを強化する技術 エンジニアが内側から支えるサイト設計・構築術
    SEOを強化する技術
    発売：2009/12/18
    定価：1,890円
    著者：安川 洋
    出版：インプレスジャパン
    内容：TwitterのSEO効果など最新のトピックについても記載されています。エンジニアだけではなく、エンジニアの力を借りてより高度なSEO対策を行いたいWeb担当者にも最適の内容です。
  • Webデザインの基本ルール-プロに学ぶ、一生枯れない永久不滅テクニック (Design Lab+ 1-3)
    Webデザインの基本ルール
    発売：2009/03/27
    定価：1,890円
    著者：デザインラボ編集部
    出版：ソフトバンククリエイティブ
    内容：色の力を最大限に活かす配色の基本とベースカラー別配色パターン集、XHTMLとCSSでデザインをカタチにするWeb制作技術の概要と基本、Web標準、SEO、ユーザビリティ、アクセシビリティの考え方など。
おすすめレンタルサーバー
  • ミニバード
    月額263円で、ディスク容量が30GB利用可能です。ポイント制があり、ポイントを最大まで利用すると、月額約197円の換算になります。
  • ロリポップ！
    「コロリポプラン」なら月額105円で容量2GB、「ロリポプラン」なら月額263円で容量13GB、マルチドメイン、データベース、共有SSLが使えます。「チカッパプラン」なら月額525円で容量30GB利用可能です。
  • ファイアバード
    50GBの大容量で、月額525円からのレンタルサーバーです。マルチドメイン、無料お試し期間、その他ユーザーツールなど便利な機能がたくさんあります。
  • さくらインターネット
    月額125円のプランからビジネスにも使えるプランまで、予算や利用目的で選べる共用レンタルサーバや、サーバ1台まるごと利用できる専有レンタルサーバなど様々なサービスが用意されています。
  • １００ＧＢ無制限レンタルサーバー【Ｘ２】
    100GBの容量以外は、ほとんど無制限のレンタルサーバーです。マルチドメイン、サブドメイン、FTPアカウント、データベース、メールアカウントなどが無制限で利用できます。
  • ＷＡＤＡＸレンタルサーバー
    サポート充実、高機能、高セキュリティーをお求めなら、イチオシのレンタルサーバーです。セコムと提携することで、業界屈指の高セキュリティーを実現してます。
  • マルチドメイン対応、ビジネス仕様 高性能レンタルサーバー 【シックスコア】
    サーバー自体が高性能なビジネス仕様のレンタルサーバーです。さらに高性能な専用レンタルサーバーも用意されています。