スタイルの変更

Amulet CSS GARDEN

当サイトはヘッダ部分にてCSSの切り替えをすることにより様々なデザインへの変更の実験サイトです。
(※Safari.Operaブラウザでは正常に動作しない場合がありますのでその他のブラウザにてご確認下さい)
CSSをするとどんなことが出来るのか?どれだけ見た目を変えることが出来るのか?
などといったCSSによる多様なデザインへの実験と、CSS+XHTMLコーディングによる利点や欠点を簡単に説明しているページです。

CSSとは?

ホームページを作成する場合、サイト内の文章を定義する文章構造と装飾の2種類に分かれます。
一昔前までは一つのHTMLの中に文章構造と装飾の両方を記述することが一般的でしたが、サイトの見た目を変えたい時や全体のページの統一感を出す場合に多くの労力を必要としました。
また、音声ブラウザ、テキストブラウザ、検索エンジン等に対して多くの支障がありました。

この文章構造と装飾を分離する為に出て来たのがCSSです。文章構造をHTMLへ装飾をCSSへ記述することにより、文章構造と装飾の完全分離が実現されページ全体の統一性や装飾の変更等の簡略化、音声ブラウザ等への配慮をすることが出来るようになりました。
また、検索エンジンにとってもわかりやすい文章構造にすることが容易になり検索エンジンへの最適化(SEO)に優れているとされています。

XHTMLとは?

一般的に良く知られているHTMLもXHTMLも,Webページを作るための言語です。
XHTMLは,従来のHTMLと,構造化された情報を表すための新しい言語XMLの特徴を合わせ持つものです。従来のHTMLでは、文章構造に関係なくあいまいさなHTML記述でもかまいませんでしたが、XHMLで記述する場合は文章構造の意味に沿った内容にすることが出来ます(奨励されます)。そうすることにより、検索エンジンやブラウザなどが解釈しやすいWEBサイトにすることが出来ます。

CSS + XHTMLの利点

CSS+XHTMLにすることにより、HTMLファイル内のソースが簡略化されさまざまなデバイスへの配慮、表示速度の向上や検索エンジンへの最適化を施すことができ、アクセシビリティ・ユーザビリティへ対応できるサイトにすることが出来ます。
ただし、CSSを用いないXHTML文章のみではテキストが並んでいる簡素なデザインとなる為、装飾をCSSで行い見た目が簡素化しないように調整することが出来ます。文字間や罫線表示等細かい設定をHTMLファイルの容量を増やすこと無く容易に行うことが出来ます。
また、サイト全体のデザインの統一性が保たれ、メンテナンスしやすいサイト設計にすることが出来ます。

CSS + XHTMLの欠点

CSS+XHTMLでの欠点は、CSSはHTMLに比べると新しい機能でしかも複雑なため、ブラウザ間での認識の違いやバグがあったりと未だに最新のブラウザでもサポートしきれていない点があります。古いブラウザになると更に表示の崩れは深刻な場合があります。そのため、各種ブラウザでの表示確認をしなければいけないなどのなど問題が発生しています。

お問い合わせ

当サイトは株式会社アミュレットにおいてCSSの分かりやすさを表現する為に作成したコンテンツです。
文章の引用や無断での利用は固く禁じます。お問い合わせは以下当サイトよりお問い合わせ下さい。

COPYRIGHT© Amulet All Right Reserved.