CSS: 2005年7月アーカイブ

Ajax なチャット

| | コメント(2)

Ajax の習作、RO風のチャット。
ajaxchat.png

サンプルは こちら。ソースコードは こちら
自由に使いねい。エラーが出たら教えてくれい。
動作確認 (Win32) Internet Explorer 5.5/6.0 Netscape 7.1 Firefox 1.0.4 Opera 8.01

従来のチャットと何が違うのか?
画面偏移がない
湖に浮かぶ白鳥が泳ぐように、見えない場所でがんばるのが Ajax の役目。

Ajax はクライアントとサーバーの関係を変える物ではない?
クライアントの要求を細かく処理していく。待たせない。

なんとなくかっこいい?
空賊連合よりはかっこいい。豚も言っている。

将来性は?
タダで作れるところがポイント。お金があるなら Flash 等のリッチクライアントを使用すべし。

document.styleSheets

| | コメント(0)

ページ内でスタイルシートを動的に変更する。こんな話題があったので調べてみた。

LINK 要素で取り込まれた CSS は、document オブジェクトの styleSheets オブジェクトでアクセスする事が出来る。ただし Opera については該当するオブジェクトがない(?)。

たとえば現在読み込まれている CSS ファイルを知るには、以下のように書く。

var styleSheets = document.styleSheets;

for (var i = 0, iMax = styleSheets.length; i < iMax; i++)
{
	var styleSheet = styleSheets[i];

	alert(styleSheet.href);
}

このサンプルは こちら

この href プロパティを変更してやれば動的に CSS を読み込みに行き、結果的に変更できる。ただし Opera ではこの手法は使えないので、選択したスタイルシートをクッキーやクエリに憶えさせておき、リロード時に LINK 要素を動的に生成する事で対応するのが一般的な模様。

さらに、個々の CSS ルールを知るには以下のようにする。

var styleSheets = document.styleSheets;
var report = "";

for (var i = 0, iMax = styleSheets.length; i < iMax; i++)
{
	var styleSheet = styleSheets[i];
	var rules = styleSheet.rules || styleSheet.cssRules;
	
	// ファイルを取得
	report += "[" + styleSheet.href + "]" + "\n";
	
	for (var j = 0, jMax = rules.length; j < jMax; j++)
	{
		var rule = rules[j];
		var styles = rule.style;
		
		// セレクタを取得
		report += "[" + rule.selectorText + "]" + "\n";

		// プロパティ : 値 を取得
		for (var property in styles)
		{
			var value = styles[property];
			
			// 値がなければ省略
			if (value == "")
			{
				continue;
			}

			report += property + ":" + value + "\n";
		}
	}
}

// ウィンドウが大きすぎた場合 F4 で閉じる
alert(report);

サンプルは こちら処理が重いので注意!

書き直し

| | コメント(3)

Dr.blog で頂いたテンプレートだが、文章構造やCSSが少しばかりいじり難かったので、デザインはそのままで全て書き直すことにした。

CSS でレイアウトをするのはあまり経験がなかったので、基本に戻り練習してみる。以下の簡単な文章を用意し、ヘッダ・フッタ・メニュー・本文のレイアウトを考えてみる。


<html>
	<body>
		<h1>ヘッダー</h1>

		<ul>
			<li>ここにお品書き1</li>
			<li>ここにお品書き2</li>
			<li>ここにお品書き3</li>
		</ul>

		<p>
			ここに本文
		</p>

		<address>
			著作権表示
		</address>
	</body>
</html>

H1 要素がヘッダー、UL 要素がメニュー、P 要素が本文、ADDRESS 要素がフッターと考える。これらは全てブロック要素なので、いかにこのブロックを積み上げるかでレイアウトを決めていくのだ。


*
{
	margin: 0;
	padding: 0;
}

h1
{
	text-align: center;
	
	background-color: #E0F0FF;
}

ul
{
	float: left;
	width: 30%;

	background-color: #FFFFE0;
}

p
{
	float: left;
	width: 70%;

	background-color: #F0FFF0;
}

address
{
	clear: left;

	background-color: #FFF0F0;
}

こうすると以下のようになる。
よくある2カラムのスタイルだ。
2colum.png
メニューと本文の左右を入れ替えたければ P 要素と UL 要素の回り込みを float: left; から float: right; とし、ADDRESS 要素の回り込み解除を clear: left; から clear: right; とするだけでいい。

また、お品書きをヘッダの下へ横一列に並べて、その下に本文としたい場合は以下のようにする。


*
{
	margin: 0;
	padding: 0;
}

h1
{
	text-align: center;
	
	background-color: #E0F0FF;
}

ul
{
	background-color: #FFFFE0;
}

ul li
{
	float: left;

	background-color: #FFFFF0;
	
	list-style-type: none;
	list-style-position: outside;
}

p
{
	clear: both;

	background-color: #F0FFF0;
}

address
{
	background-color: #FFF0F0;
}

flat.png

文章構造をいじる事なく、CSS 一つ変更するだけで見た目が大きく変わる。CSS とはやればやるほど実に面白い物だ。

このアーカイブについて

このページには、2005年7月以降に書かれたブログ記事のうちCSSカテゴリに属しているものが含まれています。

前のアーカイブはCSS: 2005年6月です。

次のアーカイブはCSS: 2006年5月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.12