2006年9月

SQLife

sq-life.jpg自社サイトで恐縮ですが、本日オープンした出来立てほやほやのSQLife。
コーディングは恐れ多くも、自分が担当しました。
自分が担当したサイトを紹介ってのも恥ずかしい部分が多々御座いますが、デザインや企画はかなりいい感じになってるんじゃないかと思います！


サイトの内容は、

SQ Life は、人間の感覚と自然の力を使った毎日を幸せに生きるためのヒントを提供しています。スピリチュアルな心、スピリチュアリティをより深め、より豊かで充実した生活を。

と言った感じで、スピリチュアルを高め、もっと人生を楽しもう・満喫しよーってなノリです。

ボク自身、今回メインはコーダーとして参加いたしましたが、取材に行ったりと色々やっております。
そうして参加しているウチに、興味が沸々と湧いてくるのが分かりました。

そのお陰も有り、元々メンタル的に強い方じゃないので、セラピーやカウンセリングは興味が有ったりしたし、逆に鬱になっている人を救ってあげたいという気持ちも有るので、心理的な面でどーしたらもっと強く楽しく生きられるの？っていうことを高めるっていう今回のサイトSQLifeのコーディングはやってて楽しかったです。


サイトの内容的に基本ターゲットは女性になってしまうと思われますが、男性にも楽しんでもらえたらええなーと、プロジェクト参加者の一人として思います。

IEバグ：peek-a-booバグ

  • バグ

WinIEの動作確認をしている時に、時々表示が違うってことありませんか？

ボクはソレが結構発生したりして、原因が分からず悩んだりする事が多々有ります。
IEにバグが多すぎるってばそれまでですが、それにしてもIEはよくハメてくれる…

現在仕事で組んでいるサイトがあるんだけど、ソレも時々表示がおかしくなったりして、納期との戦いだったりする昨今。

そんな中、ふと読んでいたブログにpeek-a-booバグなる記事が書かれていたので、今更ながら「あ！」
と思わされました。

びっくりするくらいタイミングが良かった。

ちょっと発生条件が分かってませんが、WinIEだけ読み込み時にボーダーが出たり消えたり、背景がスクロールしたら消えちゃうとかそういうバグにハマってしまったら、
height:1%;
のように、高さを指定して上げる事で解決するそうな。

IEは、高さを固定しても内容物にあわせて自動的に高さもあわせてくれるので、そこを利用して回避します。

そうなると当然、IE以外のブラウザでは高さが固定されてしまうので、子セレクタを利用したハックやら、アンダースコアハックやらで対処しておかなければなりません。


IEちゃんは、ホント。。。もう、ねぇ？

頑張って！！

参考サイト：http://edo-freiheit.sakura.ne.jp/eblog/

CSSの適用方法

基本的な部分であるCSSの適用方法について。

適用方法は、以下の3通り＋2通り。

  1. style属性を用いて、各要素に直接指定する
  2. （X）htmlのhead要素の範囲内に指定する
  3. head要素の範囲内で、link要素によって外部ファイルを読み込む

上記3つだけ覚えておけば特に困らない感じ。
むしろ、3の外部ファイルを読み込む方法だけ分かってれば良いと思う。

1、2のようにhtml文書内にそのままCSSを記述していく方法は非推奨とされてます。
なので、3の外部ファイルを読み込む方法が推奨されます。

大まかな理由としては、文章構造と表現（見栄え）部分の分離が目的の一つなのに、html文章内に書いちゃったら、通常通りhtmlにfont color="red"とかって書くのと変わらないから意味が無くなってしまう。
特に1を使う理由は殆ど無いので、使わないようにするのがええと思います。
使うとしたら、アフィリエイトとか広告のタグ中に入ってたりするのが浮かぶけど通常の用途だとまず必要性は無いかな。

2に関しては、サンプルとか何かしらで外部に書けない場合に使ったりする（と思う）

一応後の2つ。

  1. head要素の範囲内で、@importによって外部ファイルを読み込む
  2. xml-stylesheet処理命令で外部ファイルを読み込む

後の2つの方法は、分かる人だけ使えばいいので、特別な事でも無ければ覚える必要は無いかと。
むしろ、ボクが必要としてる段階の人じゃないので書けません。。。

ってことで、上の3つについてを追記にて。

カーソルオン時にリンクをボタンのように動かす

たまに、リンクにカーソルを乗せた時、ほんのチョット動くのを見たことがありませんか？
実はコレって非常に簡単なテクニックで、CSSに下記の様に記述するだけです。

a:hover {
 position:relative;
 top:1px;
 left:1px;
}

昔、コレみて感動したのを覚えてます(笑
上記の書き方だと全体に適用されちゃうので、ワンポイントとして使うと良いかも知れません。

チョット前のエントリーの、「サイドの背景画像を本文にあわせてページの最後まで表示する（2カラム）」でも何気に使ってたりします。
http://css-happylife.com/template/02/

該当のCSSはコレ↓

h1 a:hover {
 position:relative;
 top:1px;
 left:1px;
}

部分的に適用させる場合は↑みたいな感じで記述すれば、h1のa:hoverにだけ適用されます。

動きを変えたい場合は、topとleftの値を大きくして上げれば良いのですが、あまり数値を大きくすると挙動が激しすぎてビミョーになってしまうので、1pxぐらいが妥当だと思います。

子セレクタ「>」を利用したハック

IEが子セレクタに対応していないというのを利用したテクニックです。
一番最初に覚えるべきハックとも言えるほど、便利なハック。

やり方

div#g_navi ul {
 margin-left:-5px;
 width:600px;
}
/*IE以外に...*/
div#g_navi > ul {
 margin-left:0;
}


↑こんな感じで、IE用の値を書いた後に、IE以外用の値を子セレクタを使って書きます。

上記のサンプルでは、「floatで左右どちらかに寄せているボックスに、marginの値を指定するとIE5.x/IE6の環境下で、指定値の2倍程度のmarginが設定される。」バグ対策として使ってます。

アンダースコアハックと逆ですが、アンダースコアハックはCSSの書式的にはダメなので、W3C CSS ValidatorでErrorになります。

子セレクタは、IE6が対応してないっていうだけで、悪い事なんてない正しい書き方ですので、ボクはじゃんじゃん使って良いと思います。
（使わずに回避できるならその方が勿論良いですけど。）

確か、MicrosoftのIE開発チームが「悪いハック」として書いていたと記憶しておりますが、IE6が対応してないだけで時期IE7が正常にCSSを解釈してくれるのならば、カスケード処理の規則通り上書き処理されるので何の問題も無いハズです。
IE6はIE7が正式リリースされてもスグに切り替わる訳も無いので、当分は必要になってくると思います。


個人的には、この子セレクタを利用したハックだけ覚えておけば困った時大抵対処出来ると思ってます。

サイドの背景画像を本文にあわせてページの最後まで表示する（2カラム）

hogehoge_happylife.gif基本的な段組みレイアウトが出来るようになった後に、最初にぶち当たる壁だと思われる、サイドバーの繰り返し。

コレって、テーブルレイアウトだと容易に実現出来るのですが、通常CSSで段組みをした場合、サイドバーがメインコンテンツより短いと途中で背景が途切れてしまいます。

ソレだと随分いけてないので、ちゃんとメインコンテンツの内容にあわせて表示するようにして上げます。

まずは、サンプルをご覧下さいませ。

サンプル：

http://css-happylife.com/template/02/

持ち帰り用：

http://css-happylife.com/template/02/02.zip

文字サイズを変更して頂ければ、内容にあわせてサイドバーが伸び縮みするのが分かると思います。

メニュー(リスト)の画像をカーソルオン時にロールオーバーする

テンプレートと呼ぶほどじゃないですが、CSSで最初にやってみたくなるテクニックの一つである、javascriptを使わずにCSSのみでロールオーバーを実現する方法をサンプルを交えてご紹介です。

簡単に説明すると、CSSでa要素に背景を指定して、a:hoverにロールオーバー用の画像を指定して上げます。

a {
	background:url(hoge.gif) no-repeat;
}
a:hover {
	background:url(hoge_on.gif) no-repeat;
}

↑のように。

ただ、コレだけだとa要素はインライン要素なのでブロック要素に変えてあげなきゃいけません。
簡単に言うと、そのテキストのある部分にしか適用されないので、マウスカーソルを合わせたときテキスト部分しか反応されなかったり、背景画像が全部表示されなかったりするので、ちゃんと「っぽく」してあげます。

a {
	background:url(hoge.gif) no-repeat;
	display:block;
}

↑のように。

また、ブロック要素にすると横幅100％な感じになっちゃうので、widthで横幅を指定するのをお忘れなく。

a {
	background:url(hoge.gif) no-repeat;
	display:block;
	width:200px;
}

↑のように。

コレで必要最低限な部分はOKです。
後は、部分的に適用する為にidやclassなどをつけて行き、じゃんじゃん装飾していきます。

そーして出来上がったのが今回のサンプル。
http://css-happylife.com/template/01/

テンプレってカテゴリに入れてるんだから、お持ち帰り用もご用意しまひた。
http://css-happylife.com/template/01/01.zip

ネットのサラダボウル

saladbowl.jpg今回ご紹介するサイトは、ボクの尊敬する人の一人であられるryokenさんが運営なさっているサイト。

今回CSS HappyLifeをリニューアル（09/14）するにあたって一番影響を受けたサイトです。
ですから色々な部分でインスパイアされました。

デザイン部分での影響が一番ですが、少しでもクオリティが近づけるよう頑張ってました。
MTで吐き出されるソースも拘ってるんじゃないのかなーと、勝手に 妄想 想像してたりします。

書いている内容も面白くて、読み応え抜群です。

CSSもボクより理解力が深く、コーディングで詰まった際にはしばしばご教授頂いてます。
特に入社したての頃はすんごぃ助けて頂いたのを今でも鮮明に覚えております。

その節は大変有難う御座いました。
その節だけじゃなく、今でも現役でお世話になっておりますが。

と、何だか内部告発・・・じゃなく、内部告白っぽくなってますが、ボクの身近な目標って事で今回書かせてもらいました。
（許可なんてもちろん取ってませんけどネ）

文書型宣言DTD（document type declaration）

  • (X)HTML

いつも、何処からともなくコピペするもの。（暗記する気全く無し）

xml宣言

<?xml version="1.0" encoding="utf-8"?>

文書型宣言DTD（document type declaration）

+++ XHTML 1.0 Transitional +++

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

+++ XHTML 1.0 Strict +++

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

+++ HTML 4.01 Transitional +++

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

+++ HTML 4.01 Strict +++

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

metaとか。

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

DOCTYPEについての説明は、文章型宣言とかドクタイプ、ドキュメントタイプ辺りで検索すれば、素敵サイトさまが丁寧に説明して下さってますので、そちらを参考にして下さい。

こういったメモって意外と役に立ったりするから、
いつも固定で指定するCSSのメモでもそのうち作ろうっと。

心機一転。

かなり内部的な事情ですが、文字コード問題で色々不便を感じていたので、Shift_JISからutf-8に文字コードを変更しました。

元々文字コードに拘っているとかそういった事は無かったのですが、昔からShift_JISでコーディングしていたので、このCSS HappyLifeも組み慣れたShift_JISで組んだのが運の尽き...

色々面倒な事が発生したりと、初めて文字コードに対して考えさせられたように思います。

そんな訳で文字コードをutf-8にし、MTのVerも3.32にアップ、ついでにデザインも一新しました！

気分も新たにコレからはしっかりエントリーしていきたいと思い・・・もとい、します！！

あ、まだ細かい部分が未完成ですがその辺は見なかった事に。
追々完成させていきますので～。

アンダースコアハック

CSS覚え始めの頃、多様していたハックがアンダースコアハックです。

アンダースコアハックとは、Win版IEのみ適用させたい時に使います。

コレは、IEのバグを利用したテクニックで、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれます。

記述方法はいたって簡単。
プロパティの前に　_　を置くだけ。

使いどころとしてはかなり多様で、IEだけ表示がおかしい時には何かと便利に使えます。
例えば、

.hoge {
	border-top:1px solid #CCC;
	margin:1px 10px 20px 0;
	_margin-top:0;
}

などのように、記述すればIEだけmargin-topが0になります。
IEには、互換モードの時に、

ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう

というバグがあるので、バグにはバグで対抗するって感じですね。

一応、ご注意としてアンダースコアハックは、W3C CSS ValidatorでErrorになりますので、多様はしない方がいいです。
あと、IE7ではもちろん修正されているので、他モダンブラウザ同様無視されます。
IE7の表示が標準通りなら無視されてくれないと困るわけですが。

と、アンダースコアハックについて長々書いてしまいましたが、ハック自体、使わずに済むのならソレが一番良いと思います。

ボクも出来るだけ使わないよう気をつけてます。

↑上に行くよ