FC2ブログ
このサイトについて

 このサイトCSSレイアウト入門講座では初心者にも分かりやすくCSSを使ってサイトやブログのレイアウトの作り方からCSSの使い方を勉強できます。中には特殊なCSSの使い方や CSSでのルールなどより詳しくCSSレイアウトを勉強していこうと思います。

CSS(カスケーディング・スタイル・シート)とは

wikipediaより引用
 Cascading Style Sheets(カスケーディング・スタイル・シート、CSS)とは、HTML や XML の要素をどのように修飾(表示)するかを指示する仕様であり、W3Cによる勧告の一つ。カスケード・スタイル・シートとも呼ばれる。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。

CSSレイアウトの利点

デザインの修正が簡単

 サイト全体で一つのスタイルシートファイルを用いることにより、一箇所の記述を変更するだけで、全体の修正を行うことが出来ます。外観デザインをより良いものにしようという心がけが、スマートな形で尊重されるのです。CSSはシンプルですから、尚この利点が生かされるでしょう。

 HTMLを最小限にすることによりSEOにも強くなります。CSSを外部ファイルとすることにより更にHTMLのソースは単純になり CSSでレイアウトすることで検索エンジンに非常に優しいHTML(ソース)を作成できます。

 現在はほぼ全てのブラウザがCSS1をサポートしており もはやCSSは普及したと言えるでしょう。時代とともに(X)HTML+CSSで作成されたサイトが主流となりつつあります。

1カラムレイアウトのテンプレートの作り方

シンプルで見やすいレイアウト。作りようによっては非常にクールなサイトにも。


2カラムレイアウトのテンプレートの作り方

まだまだ根強い人気の二列でのCSSレイアウトの制作方法です。


3カラムレイアウトのテンプレートの作り方

非常に多いタイプのCSSレイアウトです。2カラムレイアウトの応用ですが頑張って見ましょう。


4カラムレイアウトのテンプレートの作り方

ポータルサイトなどじわじわと増えてきている4カラムレイアウト。情報の多いサイトにオススメです。

CSSでタイトルを画像に置き換える

Posted by csslayout CATEGORY : CSSについて説明

タイトルを画像に置き換えるCSSテクニックです。ここではタイトルを使用しますが 他にも使えるテクニックです。


スポンサーサイト



[ 2010/04/20 02:45 ] CSSについて説明 | TB(0) | CM(1) | [編集]

1カラムレイアウトのテンプレートの作り方

Posted by csslayout CATEGORY : CSSについて説明

CSSでの1カラムレイアウトのテンプレートを作成していきます。

まずはHTMLソースから。


[ 2009/05/31 00:43 ] CSSについて説明 | TB(0) | CM(0) | [編集]

IEでマウスオーバーすると画像がちらつく

Posted by csslayout CATEGORY : CSS よくあるトラブル

画像をtext-indentで置き換えしてロールオーバーというのはもうCSSテクニックとしてもよく使われていますが Internet Exprolerでマウスオーバーすると画像がちらつく現象が時々webサイトを拝見していて見受けられます。そんなマウスオーバーのちらつきの対処法。

直せますから大丈夫。


[ 2008/03/15 22:09 ] CSS よくあるトラブル | TB(0) | CM(0) | [編集]