プライベートモードで閲覧中です。

sugar pot : 【私家版・はじめてのFC2ブログカスタマイズ】#18 CSS編 全体的な設定

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

【私家版・はじめてのFC2ブログカスタマイズ】#18 CSS編 全体的な設定

2005年07月15日(金) コメント:1 トラックバック:0

次は全体的な設定。lammbanとある。調べたら、ギニーからのpre circumcision 儀式音楽と出てきたのだけど、定形だよという作者の名付けか。

オリジナル説明文:
	/* contentプロパティの初期化 */
	*:before,
	*:after {
		content : "";
	}

ここは作者のブログに補足説明がある。>

私の制作したテンプレの中に疑似要素を全称セレクタを使用してcontentプロパティの初期化を行っている箇所があります。

*:before, *:after {
content : "";
}

一部のブラウザ(Netscpae・Opera等)で色々と不具合が発生するようですので、気になる方は上記部分をコメントアウトするなり、削除するなりして下さい。通常利用であれば削除しても影響はありません。

そもそもcontentプロパティというのがよく分からない。 content・・・・・内容(コンテンツ)を挿入する

そのまんま。使用例が載っているのでこういうものと理解する。そして、不具合があるということなので、ここは後に削除。


オリジナル説明文:
/* 全体的なマージン・パディング・フォントスタイル等の初期化 */
	* {
		margin : 0;
		padding : 0;
		font-style : normal;
		font-weight : normal;
	}

#17で図示した余白の設定。まずはすべて初期化。フォントのスタイルやウェイトも初期化。これによりブラウザによってデフォルトとされている初期設定値をすべてクリアする。新たにこのファイルで規定するよというわけだ。

オリジナル説明文:
	/* body要素以下全てに適用されます */
	/* 背景に画像を使用したい場合はbackground-colorをbackgroundに修正してお使い下さい */
	/* 書式・例 */
	/* background : url("画像のパス") 画像の表示位置 繰り返し指定; */
	/* background : url("hoge.gif") top left no-repeat; */

	body {
		color : #333;							/* 文字の色 */
		background : url("http://blog9.fc2.com/template/sample/image/sample_bk_body.gif") top left repeat;		/* 背景画像を繰り返し表示 */
		background-color : #fff;				/* 背景の色 */
		/* 背景画像使用例(背景画像を使わない場合はbackground行を削除して下さい */
		text-align : center;					/* 古いIEでセンタリングする */
		line-height : 1.5;						/* 行間 */
		font-size : x-small !important;			/* 古いIEの文字サイズ */
		voice-family : "?"}?"";					/* おまじない */
		voice-family : inherit;					/* おまじない */
		font-size : small !important;			/* CSSを正しく解釈出来るブラウザ用の文字サイズ */
	}
	html>body {
		font-size : small !important;			/* Opera用の文字サイズ */
	}

	textarea {
		width : 90%;
	}

文字サイズについては、ブラウザによってかなり異なってくるので、上記のような指定をあらかじめしておく。ただし、Safariユーザは、カスタマイズ時には必要な注意が。

「怒」

	voice-family: "?"}?"";
	voice-family: inherit;

このCSSハックのせいでマックユーザーの利用率が低くなってると思う。絶対に。
このCSSハックは私のテンプレートで多用しているもの。ブラウザ間で異なるCSSの実装を、やはりCSSのバグを利用して同じ表示にする。
だけど・・・Safariにはテキストエリアに?を入れると文字化けをするバグがある。私のテンプレートをSafariで編集しようとすると非道いことになる。(鯖コップ「ブラウザを使って喜怒哀楽を表現しなさい!」

これはSafariのバグで「?」が」文字化けして「?」に変わってしまうため、正常な表示ができないとのこと。困った。この記事でも文字化けしたので、Firefoxで編集して訂正した。

この部分の意味は、voice-familyプロパティを利用して、Win IE 4-5、Mac IE4、Netscape4などでスタイルが適用されないようにするというもの。「おまじない」とあるので、素直におまじないを唱えておこう。

最後のtextareaは全体の幅の90%幅で表示しましょう、というもの。

まだまだファイルは続く。

※はじめてテキストフォーマットをHTMLタグのみにして書いてみました。あ、ソース見ないでください。恥ずかしい。
#1070
カテゴリ:108 テンプレートフリークス

trackback

<<【私家版・はじめてのFC2ブログカスタマイズ】#18 CSS編 全体的な設定 | FireFoxのライブブックマークの選択肢を増やす(Operaも増えるでよ) (BlogPet)>>

コメント(-1件)

-:管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

  • 2006年12月19日(火)18:48:32
コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/1070-88b85ec9

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。