« 2008年1月 | トップページ | 2008年4月 »

2008年2月

2008年2月24日 (日)

CSSの書き方いろいろ

CSSの書き方にはいくつか方法があります。

  1. CSSファイルにまとめて書く方法
    HTMLファイルとは別にCSSファイルを作ってその中にCSSを書く方法。
  2. HTMLファイル内にstyleタグでまとめて書く方法
    CSSファイルを別途用意しなくてもHTML内にCSSを書くことができます。
  3. HTMLの各タグに書く方法
    特定のタグにだけ有効なCSS指定。

この3つの書き方について説明します。

続きを読む "CSSの書き方いろいろ" »

2008年2月15日 (金)

IEとFirefoxでz-indexの扱いが異なる

CSSのz-index指定を行った場合、InternetExplorerとFirefoxで表示が異なることがあります。例えば、あるCSS,HTMLをIEとFirefoxで表示したとき、次のように異なった表示になります。


Firefoxの表示

IEの表示

このように表示が異なってくる理由は、

続きを読む "IEとFirefoxでz-indexの扱いが異なる" »

2008年2月10日 (日)

ココログのカスタムCSSの編集~プルダウンメニューの作成~

ココログのカスタムCSSの編集を使ってプルダウンメニューを作ってみる。上のタイトル欄のメニューように、マウスカーソルを重ねるとプルダウンメニューを出すことができるようになります。

続きを読む "ココログのカスタムCSSの編集~プルダウンメニューの作成~" »

2008年2月 8日 (金)

ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~

ココログのカスタムCSSの編集~メニューの作成~で作ったメニューに背景を付け、マウスカーソルを重ねると色が変わるようにしてみます。
↓こんな感じのメニューを作ることができます。「ブログのサブタイトル」にHTMLを書いてブログトップに配置します。

続きを読む "ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~" »

2008年2月 6日 (水)

IE6でCSSで設定したレイアウトが崩れる

IE6の場合、"DOCTYPE"の指定をHTMLの先頭行で正しく行わないとCSSの互換性に問題が起こるとのこと。ココログではどうなってるか見てみると。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard">
<head>
 :
 :

先頭行にバッチリ入ってました。問題なし。
自分でHTMLを書くときは要注意です。

参考サイト
ADP: IE6のwidth解釈バグ対処法(http://adp.daa.jp/archives/000265.html)

2008年2月 5日 (火)

ココログのカスタムCSSの編集~IE6ショック~

今までFirefox2とInternet explorer7で表示確認をしながらカスタムCSSを書いていました。ほぼ同じように表示できていたのですが、IE6では全く表示がくずれていました。shock
何が悪かったのかよくわかりませんが、おいおい直していきたいと思います。

追記(2008/2/6):
セレクタのIDが何かと被ってたのが原因のようです。ID指定をやめたら正常に表示できました。今までの記事全部修正しました。

2008年2月 4日 (月)

ココログのカスタムCSSの編集~Google検索ボックスの設置~

ブログのタイトル位置に、ブログ内検索ができるGoogle検索ボックスを取り付けてみます。ココログロゴの横にも検索ボックスはありますが、ここは敢えてGoogle検索を置いてみます。

↓こんな感じの検索ボックスをタイトル位置に置きます。

Google
WWW を検索 http://shirabemono.cocolog-nifty.com/blog/ を検索

続きを読む "ココログのカスタムCSSの編集~Google検索ボックスの設置~" »

2008年2月 3日 (日)

ココログのカスタムCSSの編集~メニューの作成~

「カスタムCSSの編集」を使ってブログのトップにメニューを作成してみます。メニューはブログの先頭に表示したいので、「ブログのサブタイトル」を使って書きます。「ブログのサブタイトル」は管理ページの「設定」タブで設定できます。
メニューには、このブログのトップページへのリンクと、ココログ関連カテゴリへのリンクを設定したいと思います。

続きを読む "ココログのカスタムCSSの編集~メニューの作成~" »

2008年2月 2日 (土)

ココログのカスタムCSSの編集~2段組レイアウトの設定~

カスタムCSSを編集して2段組レイアウトを実現してみます。HTMLのテーブルでも実現できますが、カスタムCSSで設定してしまえば細かいレイアウト設定もHTMLは煩雑にならず、比較的簡潔に書くことができるようになります。

次のようなレイアウトで文章を表示できるようになります。

ここは赤色にしました。幅は500pxです。
ここは左側のレイアウトになります。幅を200px、背景を緑色、線で枠を囲みました
ここは右側のレイアウトです。幅を300px、背景は青、点線で枠を囲みました。

ここは左枠と右枠の背景になります。

続きを読む "ココログのカスタムCSSの編集~2段組レイアウトの設定~" »

ココログのカスタムCSSの編集~ブログの横幅を変更する~

このブログは「唐草模様」のテーマを「右サイドバー付」のレイアウトで使っています。記事の幅はデフォルトでは400px、右サイドバーの幅は200pxとなっていて、記事の幅が狭い感じになっています。記事の幅を600pxに広げる方法を説明します。

続きを読む "ココログのカスタムCSSの編集~ブログの横幅を変更する~" »

2008年2月 1日 (金)

ココログのCSSファイル

私のブログには次の3つのCSSファイルが読み込まれています。

1のCSSファイルは、2,3のCSSファイルのインポートと「カスタムCSSの編集」で追加したCSSが記述されています。
2のCSSファイルは、このブログで使っているテーマ「唐草模様」で設定されるCSSファイルです。
3のCSSファイルは、ココログのベースとなるCSSのようです。

続きを読む "ココログのCSSファイル" »

« 2008年1月 | トップページ | 2008年4月 »