ウェブデザイナー募集 ホームページ作成HOME

ホームページ作成講座HAC Design

CSS・スタイルシートとは

CSS・スタイルシートとは

CSS（Cascading Style Sheets＝カスケーディング・スタイルシート）とは、ホームページ作成講座でも簡単に説明していますが、ホームページのデザインとレイアウトをHTMLを分けて書くことです。
CSSにはHTML内に直接記述していく方法と外部ファイルを読み込むという２つの方法があります。
HTMLではスタイルシートと言えば、CSSのことを指しているのが一般的です。

CSSはウェブの標準化団体W3CR（World Wide Web Consortium）によって勧告され、 HTMLで記述された文書にレイアウトスタイルを定義するためのマークアップ言語のことです。
よくドキュメントタイプに記載されているW3CとはW3CR（World Wide Web Consortium）のことを指します。

CSSはブログなどのデザインに用いられるようになってから、ウェブデザイナーだけでなく、 一般の人もカスタマイズなどの目的で勉強する人も増えてきています。

今までホームページの作成をHTMLだけでスタイリングしている人も、 ホームページビルダーなどのソフトを使っている人も、少しずつCSSでのレイアウトに移行してきています。

なぜスタイルシートによるレイアウトが人気なのでしょうか？

CSSによるレイアウトのメリットをあげてみましょう。

複数のページのレイアウトの変更が簡単！

CSSを外部のファイルとして作成すれば、HTMLファイルからリンク要素で結び付けることによって、
複数のページでスタイルを共有させることができます。
スタイルシートのスタイルを変更することにより、一度に複数のファイルのデザイン、 レイアウトを変更することができます。それにホームページの更新とメンテナンスがとてもに楽になります。
また、HTMLファイルを新規作成するときもリンクでCSSファイルと結び付ければ、あらかじめ、用意したデザイン、 レイアウトを簡単に適用することができます。

HTMLファイルがスッキリ！

HTMLファイルからデザイン・レイアウトの見栄えの要素を切り離すことにより、
HTMLファイルのソースがシンプルになります。そのためHTMLファイルを書くのも楽になります。

ブラウザでの表示が速い

HTMLファイルの容量が減り、軽くなったことでブラウザでの表示が速くなります。
テーブルなどでレイアウトをしているとなかなか表示されなかったりします。
表示が少しでも早くなればインターネットの速度が遅いユーザーにもやさしいです。

シンプルでスタイリッシュなデザインができる

デザイン、レイアウトをHTMLファイル、分離することにより、 凝ったデザインをシンプルに構築することができるようになりました。 より詳細かつスタイリッシュにデザインを構築できるようになります。

アクセシビリティ

CSSは凝ったデザインのためだけではなく、ウェブアクセシビリティを考慮するうえでも役に立ちます。
アクセシビリティとはすべての人に優しいホームページを構築することです。
要は見る人を選ばないホームページ作成を心がけて作っていくことと解釈してもいいでしょう。
大企業のホームページ作成や官公庁のホームページ作成でもない限りあまり難しく考える必要はありませんが、 最低限のアクセシビリティをCSSにより有効活用できると考えた方がいいと思います。
（官公庁がアクセシビリティがしっかりしているかというとさほどしっかり作られていません。）

最低限のアクセシビリティとは。
文字が読みやすく、リンク先のページ内容が安易に想像できる。
画像ファイルに代替テキストを記載し、視覚障害の方が音声で理解できるようにする。
サイトの構成がわかりやすく、サイト内で迷子にならないようなつくりにする。
ページの内容がわかりやすい見出しと文章の設定。
インターネットの通信速度が遅い人にもホームページを閲覧できるようにする。

このようにCSSでのホームページ作成はメリットも多く、将来性があります。
新しくホームページを作成するなら、是非CSSで作ってみてください。

CSSの基礎知識
CSS・スタイルシートとは
ブログのCSS
CSSでレイアウト 書き方編
CSSでレイアウト 実践編
CSSポイントレイアウト
CSS フォント
CSS テーブル
CSS ロールオーバー
CSS 背景
CSS margin
CSS float
あると便利！
CSS エディター
FireFoxとCSS
CSSのお勧め書籍
リファレンスHOME
ウェブサイトHOME