XHTML+CSS・コーチサイト

webデザインのトレンド

Thu, 16 Jul 2009 03:14:32 +0900

■今や当たり前となったWEBデザイン
WEBデザインにもトレンドがあります。サイト巡りをしていてなんとなく「古い！」と感じるサイトに出会ったことがある方も多いでしょう。今や当たり前となりつつあるWEBデザインについてご紹介しましょう。
ここでも触れてきたCSSやJavaScriptなどを用いたリッチインターフェース、画面がスライドショーのように変わるインターフェース、Flashや動画を埋め込んだインターフェース、サイト上の目立つ位置にサイト説明を盛り込む、などが挙げられます。
広告やバナーの配置も従来は画面の端に羅列され、重要な広告が何を示しているかが分かりづらくなっていましたが、意外と目立つ位置に置く事で、他のPR広告との差別化を図る事が可能になっています。
RSSアイコンも大きく表示されるようになってきましたね。

■文字のフォント・装飾・大きさや透過PNG
FlashやAjaxなどでリッチユーザーインターフェースが実現されるようになった背景で、文字のフォントや装飾などは、デザイン的に重要視する必要がありませんでした。
ですが、最近のトレンドとしてデボス加工といって凹凸加工された立体感のあるテキスト処理ややたらとデカさが目立つデカ文字、などが挙げられています。CSSやJavaScriptで様々なレイアウトが実現できるようになり、文字そのものに装飾する必要性がなかったのですが、ここにきて文字装飾に注目が集まっているようです。
そして透過PNGです。PNGとは画像フォーマットの中の1つです。JPGやGIFは有名ですが、WWW上で使用しやすいように開発され普及していきました。この透過PNGが普及した事でデザインの幅が大きく広がりました。そしてより複雑かつビジュアル重視のデザインを制作できるようになったので、これからますます発展していくと考えられます。

SEO対策

Thu, 16 Jul 2009 03:14:14 +0900

■SEO対策に効果的なXHTML+CSSコーディング
今までに説明した事と重複しますが、これがSEO対策に一役買っているのだという事をご理解頂きたいのです。
XHTML文書内の装飾についてはCSSで制御するという説明をしましたが、HTML文書内で装飾の指定をした場合、ソースが長く重くなってしまいます。そこでXHTMLとCSSを組み合わせて、CSSで装飾レイアウトを行えば、ソースは短くて済みますし、その分テキストを多く組み込むことができます。という事は、検索エンジンで引っかかるキーワードもたくさん盛り込めるので、SEO対策に一役買っているという事がお分かり頂けると思います。これはコーディング時に行える一番簡単なSEO対策です。
通常、ソース記述されている内容は、左から右の流れで上位から下位への表示がされますが、ここでCSSを活用すれば本来下位にあるキーワードを、見栄えに影響せず上位に持ってくる事も可能になる、CSSによるSEO対策の基本です。

■metaタグについて
XHTML文書内のhead部内に記述されている「meta」タグ。これは何でしょうか。
「meta」タグを使う意味は様々ですが、ここではSEO対策に関連する事象のみに触れておきます。ページ内のキーワードを入れる時に「meta name=”keywords”content”○○”」と記載します。このタグを複数並べると検索エンジンで引っかかるキーワードを盛り込めます。サイトやページと関係ないキーワードを盛り込むとスパム行為と見なされますので注意しましょう。更に、検索エンジンでサイトリンクの下に文章が数行表示されますが、「meta name=”description” content=”○○”」と記述すると、○○の部分が表示され、検索エンジンで上位表示されやすくなります。こういうテクニックを使って少しでも上位表示されるようなサイト作りを心がけましょう。

CSSでのレイアウト

Thu, 16 Jul 2009 03:13:38 +0900

■CSSでのレイアウト
CSSでレイアウトを行う際、どこに記述すればいいのでしょうか。CSSでのレイアウト一部分に反映させたい場合はHTML文書に直接記述すればいいですし、ある1ページ内だけで適用させたい場合はヘッダ部に、WEBサイト全体に反映させたい時は、拡張子を「css」として外部ファイルを作成し記述します。その際には「id」「class」タグの使用でCSSの指定が反映できます。CSSでのレイアウト時にはこの外部ファイルへの記述が最もベターです。一番の理由は後ほど説明しますが、外部ファイルへの記述を行う事で、HTMLソースが軽くなり、ユーザ側の表示速度も早まります。またHEAD部に「META」タグを記述するのを忘れないようにしましょう。

■CSSテクニック
「id」と「class」タグの使用方法は、タグ内のidで指定するものはCSSプロパティ内で冒頭に「#」を、classで指定するものはCSS内で冒頭に「.」を付けて使用します。「id」は1ページ内で同じ名前を1度しか使えないのに対し、「class」は何度も使用できます。どちらを使えばいいのか迷った時は「class」を使っておけば問題ないでしょう。
またCSSでレイアウトを組む際、表示すると余分な余白やズレが生じる事があります。幅を決める時には外枠の合計がメインスペース・サイドスペース・必要余白を足した合計値になるようにきちんと計算しましょう。ブラウザによって解釈が異なる場合がありますので、幅の拡張ルールを理解しておく事が大切です。

XHTMLコーディングを行う

Thu, 16 Jul 2009 03:13:13 +0900

■XHTMLのコーディングルール
上記のXHTMLの特徴でも触れましたが、XHTMLにはHTMLとは異なったルールが存在ますのでご紹介しましょう。
まず大きな変化としてXHTMLでは全て小文字でタグの記述を行います。大文字と小文字は区別されますので、基本的に全て小文字で記述するように癖づけましょう。
そして次に省略の不可項目です。空要素のタグ、例えば単独で使用できる改行タグ
の使用時は
で閉じるようにします。/の前に半角スペースを入れます。他にも省略出来ていたものとして、終了タグも省略不可、属性と名前の値が同じでも省略不可、属性は引用符で囲むなどのルールができました。

■XML宣言とDOCTYPE宣言
HTMLで記述する場合はいきなりHTMLタグで書き始めても問題ありませんが、XHTMLで記述する場合はタグの前に、XML宣言かDOCTYPE宣言をしなければいけません。プログラム言語をご存じの方はお分かりでしょうが、最初に何かしら宣言を行ってからコーディングを始めるのと同じで、XML宣言は以下の文書がXML文書であるという通知の役割を果たします。またDOCTYPE宣言は名前の通り、文書の言語バージョンや定義を宣言する時に使用します。
PHP言語でコーディングする場合はXML宣言でビルドエラーを起こします。「

XHTML+CSSの特徴紹介

Thu, 16 Jul 2009 03:12:48 +0900

■XHTMLの特徴やメリット
WEBサイトがHTMLで記述される事が標準化され、一番ベーシックなマーキング言語となりましたが、XHTMLがなぜ生まれたのでしょうか。
XHTMLが生まれた理由として、ある特定サイトのコンピュータ伝達をより高効果にする為、そしてPCモニタやモバイル端末などデバイスやプラットフォーム・ブラウザを問わず、表示できるようにする為の2つが挙げられます。
XHTMLの記述にはいくつかの決まりがあります。特徴的な決まりとして、「タグは全て小文字」「終了タグや属性の省略不可」「XML又はDOCTYPE宣言をする」「装飾にHTMLを使わずCSSで制御する」などが挙げられます。XHTMLを使用する事でソースを短くし、ルールが明確に定められているのでブラウザでの誤認識を防ぐことができます。

■CSSの特徴やメリット
各ブラウザが独自に発展させたHTMLでデザインを行うと、他ブラウザで誤認識されたり、タグの不対応で表示できないという事態を招いていました。そこで誕生したのがCSSです。
文字の装飾やフォントなどのスタイルをHTMLで記述した場合、ページ全体のスタイルを変える時に全てのタグを変更しなければいけませんね。そこでCSSを使ってレイアウトを行えば、1ファイルを変更するだけで全ページのスタイルを一気に変更できてしまいます。これでソースがグッと軽くなり、WEBサイトの表示も早くなります。サーバ容量との兼ね合いもありますので、ソースは軽いに越した事はありません。またHTMLの表示順位を変えられ、キーワードの強調が容易にできSEO対策にも効果があるのです。