タグ:レイアウト ( 1 ) タグの人気記事

記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
 

CSSレイアウト - 40種類の例題で楽しめるCSSレイアウト集

はじめに

 ホームページやブログのレイアウトはCSSでレイアウトをしたいと考えている方も多いのではないでしょうか。でも、CSSでのレイアウトが難しいと思う方もいらっしゃるかもしれません。慣れるとテーブルでレイアウトをするよりもCSSのレイアウトの方がHTMLのコードが少なくてメンテナンスが楽なんですよね。またCSSを書き換えるだけでレイアウトが自由にできるので私はCSSのレイアウトが好きです。
 CSSのレイアウトで悩んだら、40もの例題があるサイトを参考にするのも良いかもしれません。英語のサイトですが、見ればすぐ分かる例題と、ダウンロードできる見本があるので基本的なレイアウトで迷ったら、見てみるのも良いかもしれませんね。

 今回は、サイトのご紹介とエキサイトでのブログスキン編集のお話です。

難易度:★★
 ちょっと難しいけど、できたときは嬉しいですよ。


サイト

 40種類のCSSレイアウト集は以下のリンクからアクセスできます。

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!

利点

 このサイトのCSSレイアウト集の良い点は、短い簡単なコードで構成されていること。短い簡単なコードなのでレイアウトに重要な部分が分かりやすく、理解しやすいことです。また見本があり、ダウンロードして自分で実際に確かめることができるのも良い点です。

エキサイトのブログで利用するには


 エキサイトなどのブログの場合、必ず入れなければならないエキサイト特有のタグがあります。そのタグを消すとエラーになるので注意する必要があります。次の記事が私の手順です。

1.普段利用しているブログでレイアウトをするとミスした時にトラブルの元なので、テスト用のIDを取得する。

2.スキン編集画面で、メイン画面編集のメイン部分のみテーブル関連のタグを削除する。このときレイアウトが崩れるが、本文などをいじっていないので崩れ方がすくない。

3.テーブルを取り除いたHTMLをみて、必要があればdivなどを追加する。

4.CSSでレイアウトする。

5.よさそうならば本文部分などにも手を付ける。

6.メインサイトにスキンを適応する。この時に、記事部分でタグが閉じてない、本文の大きさよりも大きな画像を使用しているとレイアウトが崩れることがあります。


はじめは無理しないでね

 はじめはCSSのレイアウトが難しいかもしれません。プロでも多くのブラウザに対応しているテーブルを使うこともあるようです。テーブルの良さはレイアウトが崩れにくく幅の自動調整があるのでテーブルの方が良く感じられることもあります。
 無理にCSSのレイアウトにするのでなく、すこしづつ自分で出来そうなところからはじめると挫折しにくいようです。CSSのレイアウトになれる頃にはテーブルよりもCSSのレイアウトが好きになっているかもしれませんね。


関連記事

 私のサイトはCSSのレイアウトを行っています。3列スキンの雛形を2列のレイアウトに変更して使用しています。よろしかったらご覧下さい。

コピペでできるCSSレイアウト(excite編)
ぽっとの陽だまり研究室 : コピペでできるCSS編集 バックグランド編1/2


[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2007-01-06 17:37 | │├レイアウト
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。