CSS HappyLife

IE6で閲覧すると。

2008-12-15T07:54:40Z

IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。

って言ってたので、CSS HappyLifeでやってみた。
ボクが出来る2008年最後の大仕事でした。えぇ。

使いたい方は是非是非。

ちなみに、ボクが使った画像はコレです。自分のモニタで出るやつを参考にしました。
ご自由にお使いください。

IE6だけに表示させるにはどんなやり方でもいいっすけど、手っ取り早いのだったらハック使ってやるのがいいかと。

.analog {
	display: none;
}
* html .analog {
	display: block;
	position: absolute;
	top: 10px;
	right: 30px;
}

こんな感じで。
であ。

16日のお昼頃追記

ウチのアクセス解析を久々に確認してみたら、全体の50％くらいがFirefoxで40％くらいがIEでした。
そのIEのうち、45％くらいがIE6でした。

お、思った以上に多かった...その中からIE6メインで使ってウチに来てくれてる方がどの程度居るか分かりませんが、気分を害してる方がいたらすみません。

でも、こういった事をしてても、後3年～5年は対応ブラウザから外れないだろうから、IE6に関する知識は忘れないようにしたいですね。
場合によっては、IE5.x、6、7、8対応しなきゃいけない事もあるって考えると怖いなぁ～

にしても、5分で書いたエントリーがはてブで100越えるとは思わなかったっす・・・
2時間掛けて書いたエントリーが全くブクマされなかったりっていう差をすごく実感した！

どっかに、そんなエントリー書いてましたね。

マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年

2008-12-01T15:46:13Z

ただの雑記。

素晴らしい方々と飲んできた！
こんな面子↓

やーホント、ボクが参加しちゃっていいの！？ってくらいすごい方々が揃ってるわけですが、びびりながらでも、参加する価値はありますね。

飲みの内容は、終始hamaさんのお料理トークで盛り上がったわけですが、とても有意義な時間で、素敵なお話満載でした。

特にコリスの中の人とお会いできたのはびっくり。

なんかこーゆーのいいですね。
セミナーとか勉強会より、ただ集まって飲む方がボクは有意義な時間に感じますね。

同じ業界で更に同じような職種が集まると、必然的に会話の内容は、お料理トークになるわけですが、色んな会社の話が聞けるのはやっぱり参考になるっす。

マークアップな人たち（じゃなくてもいいけど）が、ただ集まって飲む会とかってコミュあったら面白いなー（笑）

ソースなんて誰も見ないよ。

2008-11-18T03:51:42Z

ボクたちみたいな、Web業界の人間やそういうのに興味ある人でも無ければ、訪れたサイトのソースなんて誰も見ないよね。

そんな感じだから、蔑ろにされやすいし、扱いも低かったりする。

そりゃそーだ。
ボクだって、今の仕事してなかったらサイトのソースなんて見る事無いし。
テーブルレイアウトだろうが、どんな方法で組まれていようが普通に閲覧できれば関係ないよね。

でもさ、エラー出まくりのHTMLなんて、体内がずたぼろの人と同じじゃんね。
見た目健康そうでキレイに着飾ってても、体内ずたぼろじゃあやっぱりダメじゃないですか。
人様の体内を覗く事なんて普通に考えたら無いし。
普通に歩いているように見えれば、見分けなんて付かない。

だけど、時が経つにつれ徐々に身体がおかしい事に気付いていく。
そんなんイヤだよ。

HTMLだって、昔作ったサイトはInternet Explorerでしか見れなかったりして。
その頃はInternet Explorer以外のブラウザで閲覧するなんて考えなかったんだろうけど、今はそうじゃないよね。

徐々にだけど、ソースがボロボロのサイトって気付いていく。

ウェブサイトは生き物だ！っていう人が居たりするけど、ホントそうだなぁって思う。

ソースがボロボロじゃあ、色んな器官が正常に動作しないし、エラーが出ちゃったりする。そもそも閲覧できないなんていう状態じゃあ死んでるのと同じ。

中身（コンテンツ）が全く無いサイトじゃあ、心を磨かなかった人と同じで、誰も魅力なんて感じてくれない。だから人は集まらない。
無駄にポップアップしたり、音楽がいきなり流れるサイトなんて、マナーが全く無い人と同じで嫌われちゃう。そんなん当たり前だよね。
もし、見た目がものすっごい良ければ、人は集まるかもしれないけど、中身が無い人とは長く付き合おうって思えないよね。一目見てお終い。

デザインが全くいけてないサイトじゃあ、人は寄らない。
どんなに素敵な中身を持ってても、めっさ怪しかったり、不衛生な感じの人とはあんま一緒に居たくないよね。
だから、最低限の身だしなみを整えて清潔にしてれば、中身が良ければ人なんていくらでも集まってくる。そしてずっと居てくれる。

その見た目を整えるのに、服を身体に縫い付けてたら、見た目を変えるのにどれだけの苦労が掛かるか。
だから、服を身体に縫い付けるなんてことはしない。
CSSをHTMLに書いちゃったらダメだよね。

だからって、あまりにも見た目を気にしすぎて、派手にし過ぎたりしちゃうと、やっぱり人は離れていってしまう。

結局、何かが欠けてたらダメで、すべてがバランス良くないと、いけてるヤツ（サイト）にはならないよねーって。
ソースなんて誰も見ないかもしんないけど、見た目と中身にばっかり気が取られてて体調管理できなかったらパーになっちゃうよっ！

いつもとチョット違った内容がふと浮かんだので、雰囲気を変えてエントリーしてみた！

新規でサイトを作るのに使えそうなの一式。Ver 3

2008-11-12T13:58:01Z

随分前に、Ver2の見直しをして3になってたんですけど、公開してなかったので今更ながら公開です。

中身は2を使ってみて、社内のマークアップエンジニアからフィードバックもらったり、自分でも違和感が有った部分を調整してます。
それなりの期間使ってみて、問題をあんまり感じていないので、完成度としては大分良くなったかなぁって思います。

Ver.3の中身ご説明

主な変更点を。

style.cssのwidthなどのプロパティをまとめていたのをVer1と同じに。
default.cssに書かれていた、p要素のmargin-bottomの指定をstyle.cssに移動。
default.cssのfont-familyの指定を若干変更。
index.htmlにGoogleカスタムサーチ用に使えるソースを記入。
JavaScriptが色々増加。

ざっとこんなところでしょうか。
そんなにすげー勢いでの変更はしてません。

ディレクトリ構成

ディレクトリ構成自体は変わってませんが、JavaScriptファイルが結構増えました。

Ver1も結構入ってましたが、それとは違ってます。

アクセス解析用に「ga.js」と「getTracker.js」が追加されたのと、フォームなどで使える、半角カナを全角カナに変換してくれたりする「replaceascii.js」が入ってます。

repleaceascii.jsは、アッキーが作ってくれて色々改良してくれた優れもの。
ヨモツネットでは、valueconvertor.js ってファイル名になってますが、一式に入ってるrepleaceascii.jsも中身は同じです。

入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する | ヨモツネット

XHTMLテンプレートの変更点

仕様は前回のと同様で、以下のような感じになってます。

XML宣言無し
文字コード：utf-8
DOCTYPE：XHTML 1.0 Strict
改行コード：CR+LF

body要素のclassが「indexBody」から「topBody」に変更してます。
これは、他の階層のインデックスページで「indexBody」って使いたい場合があったので、このようにしてます。

次に、div#header内にGoogleカスタムサーチ用のソースコードが記入されてます。

<dl id="siteSearch">
<dt>サイト内検索</dt>
<dd>
<form action="./search.shtml" id="searchBox">
<fieldset>
<input type="hidden" name="cx" value="" />
<input type="hidden" name="cof" value="FORID:11" />
<input name="q" type="text" class="searchBox" value="サイト内検索" tabindex="1" accesskey="1" />
<input type="button" name="sa" accesskey="2" tabindex="2" value="検索" class="searchBtn" />
</fieldset>
</form>
</dd>
</dl>

入れた理由は、そこそこの確立で使うのに、コピペしてくるのが面倒だから入れておきました。
後はメインエリアにタブテスト用のソースがありましたが削除してます。

CSSファイルの変更点

default.css

font-familyの指定が、今まではIE7だけメイリオだったのに対して、IE6以外メイリオ指定にしてます。

/*--- default */
body {
	background: #fff;
	color: #333;
	font-size: small;
	font-family: "メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	line-height: 1.5;
}
* html body {	/* for IF6 */
	font-family: "ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

メイリオが最初の指定になってるのが嫌な方はご自由に変えてください。

他に、p要素にmargin-bottom: 1em;の指定が入ってましたがdefault.cssからは削除して、style.cssに移動しました。

style.css

最初に横幅指定も含まれていたのを削除して、基本設定、リンクカラーのみにしてます。
横幅の指定などは、#mainや#subなどに。

次に、汎用classにshare.jsで自動的に付く外部リンクアイコンの指定を行えるようにしてます。

後は、#main内の以下の要素にだけ、margin-bottom: 1em;の指定が当たるようにしてます。

#main table,
#main ol,
#main ul,
#main dl,
#main blockquote,
#main pre,
#main p {
	margin-bottom: 1em;
}

JavaScriptファイルの変更点

yuga.jsが結構カスタマイズされ、textareaなどにフォーカスした場合に消えるJSが入って、share.jsとしてます。
share.jsのyuga.jsはちょこちょこコメント入れてるので使えるかなぁと。
（いつか書く気がおきたら、カスタムしたyuga.jsについても書きたいのですが）

ga.jsとgetTracker.js

これはbodyの終了タグ直前に以下のように記述することで、Googleアクセス解析使ってる場合すぐにセットできます。

<script type="text/javascript" src="/js/ga.js"></script>
<script type="text/javascript" src="/js/getTracker.js"></script>
</body>

読み込ませるようにしたら、getTracker.jsの"UAxxxxxx"部分をそのサイト用に変更すればOKです。

replaceascii.js

これは、先ほどもちょろっと説明しましたが、フォームなどで入力されたテキストの形式が違う場合に、自動で指定した形式に変換してくれるJavaScriptです。

詳細はヨモツネット参照で。

入力されたテキストを自動で指定の形式(半角, 全角, ひらがな, 全角カタカナ)に変換する | ヨモツネット

最後に。

毎回書いてますが、気に入らないなーって部分は、自由に変えてナンボの一式なので、いぢり倒して下さいませー。

今よりコーディングのスピードを上げるには

2008-11-11T15:01:01Z

「今よりコーディングのスピードを上げる17の方法」とかってタイトルにしたら、いかにもそれっぽい感じがするなぁ（笑）

さて、仕事をする上でもっとも重要な要素の一つに、作業スピードって有ると思うけど、正直最近の自分が以前に比べて早くなっている気がしない今日この頃。

一応、現状の作業スピードでも期間内に納品は出来てるから最低限の作業スピードは確保されてると思うんだけど、コレが1.5倍くらい早くなったら、空いた時間に勉強したり、もっとガンガン組んでいけるから、速さを極める事はとても重要だよなーと。

なので、自分がやろーとしてる思いついた方法をメモ。

コーディングのスピードが上がりそうな事

無理やり出した感も有るけど、取り合えず思いついた方法を。

1）基本的なタイピング速度を上げる。

タイピングソフトとかを活用して、基本となるタイピング速度を上げれば少しはコーディングのスピードも速くなるかもって思った。
特に誤字・脱字が多いからこれを減らせるように頑張ってみよう。

2）キーボードやマウスを変えてみる。

今使ってるキーボードが「FILCOのMajestouch」だけど、コレ結構気に入ってるからどーしよう。
HHKBとか速そうな人は良く使ってるけど、どうなんだろ。
マウスは、LogicoolのMX620を使ってるけど、ボタンが多いマウスにして、ショートカットを登録しておくとかしたら速くならんかな。

3）PCのスペックを上げてみる。

これは重要ですね。psd開くのにイチイチ待たされたりするのは、完全に無駄な時間だし、お金に余裕が有ればCPUとメモリを増強したいなぁ～

4）デュアルじゃなくてトリプルモニタにする。

自宅会社ともにデュアルモニタだけど、1枚増やしてみる。
これで、Photoshop、エディタ、ブラウザで分けれるっていう素晴らしさ。やりたいけど、金が・・・
hamaさんとかモニタ5枚だったっけ？（笑）

5）テキストエディタからDreamweaverに戻してみる。

すっかり秀丸さんに慣れてしまったけど、新規でサイトを組むには、やっぱりオーサリングソフトを使ったほうがより速く組める気がする。取りあえずインストールしてみようっと。

6）ショートカットキーを多様する。

基本的なことだけど、使ってないショートカットキーとかをもっと覚えたら速くなりそう。マウスを触る時間を如何に減らせるかって重要ですよね。

7）独自ショートカットキーの作成をする。

hamaさんが言ってたけど、十字キーが指から遠くて使いにくいから、RDFCキー辺りに十字キーを割り当ててやってるとか。
如何にホームポジションを維持したまま組めるか。ってトコロですよね。
そういうのも研究してみよう。

8）辞書登録を活用してみる。

間違って日本語入力状態でタグを打ったりしてもスグに出るように「＜あ」で変換すると<a href=""></a>が出るとかしてるけど、そういう感じのをガンガン登録してみたらもちっと速くならないかな。
Dreamweaverを使う前提でも役に立つかどうか。

9）各ブラウザのレンダリングを熟知する。

まだまだブラウザ独自のレンダリングに悩ませる状況が発生するので、その発生率を極力0にしたら速くなりそう。

10）ブラウザの表示チェックはIEにする。

表示チェックはFirefoxでやって、IEは最後に見て対応しましょう。
みたいなのを見かけるときが有るけど、より効率よく組むには、9番が出来ていれば、IEだけチェックして、他のブラウザはチェックなんてしなくても崩れていないはず。
最後にまとめてFxやOpera、Safariで確認すればOKってのが一番効率が良さそう。

11）ブラウザの表示チェックをあまり行わない。

理想は1ページ全部のスタイル書いてから、1回ブラウザで表示チェックしてお終い。なんだけど、どうしても数行書いたら見てしまう。もっとこう脳内イメージ膨らませて、ガンガン書いてからさらっとチェックして終らせられればかなり速くなるんだけどなぁ...

12）より汎用性の高いclass名などのルールを作る。

これもいまだに悩んだりしてしまう事があるから、もちっと使いやすくていけてるclass名をつけて、色んなサイトで対応できるようにすれば無駄な時間カットに繋がるよね。
メインエリア内で悩むことが多いから、この辺のclass名候補を増やそう。
section、sectionHeader、sectionBody、sectionFooter、mainHeader、mainBody、mainFooterとかそういうフィーリングはどうだろう。

13）spanやdivを増やすことを躊躇いすぎない。

増やさないためにどーするか？ですげー時間を消費してしまう時があるから、その判断を早くすることで、スピード上がらないかな。

14）作業を中断させない。

メールや電話、呼びかけ、チャットなどを如何に減らせるかだけど、コレは難しいなぁ～

15）ちゃんと休憩する。

ボクはサボりすぎなくらい休むタイプなので、休憩しすぎない。が適切だけど、根詰めちゃう人は適度に休んでやった方が効率上がるよねって思う。

16）モチベーションを上げる。

このサイトを組み終わったら飲みにいく！とか、早く終らせたら上司が喜んでくれる！とか、音楽ガンガン流してノリノリでやってみるとか、可愛いあの子の為に俺頑張っちゃってるぜ！みたいなよく分からん事考えたりして、モチベーションを如何に維持するかって大切ですよね。

17）CSS HappyLifeってブログを読んでみる。

このブログもアナタの助けになるかも知れませんYO！ってことで。

今のボクは、9～11番が一番重要だと思ってるので、その辺を主に頑張ってみようと思った。
何か素敵なスピードアップの方法あったら教えてくださいまし。

Movable Type 4.2のマニュアル（初めて更新する人向け）

2008-11-10T15:30:00Z

先週風邪を引いて治りきってないのに、デザフェスに行って来たからなのか、いまだに本調子にならないhirasawaです。寒いので風邪には気をつけましょう！
にしても、デザフェスが面白かった。
初めて行ったけど、あんなに見るものがあるなんて！

さて、今回はMovable Type の初心者向けマニュアルみたいなのを作りました。

Movable Type 4.2x系の基本的な操作方法に関するマニュアル

これのターゲットは、作る側じゃなくて更新だけする側です。
なので、余計な説明をせずに、更新する方法に絞ってます。

経緯とか目的を続きにて。

経緯とか目的

Movable Type には、ちゃんとドキュメントが用意されてますが、アレは更新するだけの人が見る分には親切とは言えません。

特に、CMSとしてMovable Type を導入してお客さんに更新してもらう場合、何も分からない人や、ブログやmixiすら書いたことが無い人たちが更新しなきゃいけません。

なのに、口頭の説明だけじゃ使い方を忘れてしまったりして、気付けば更新がされないなんて切ないですよね。

そんな訳で、そういう方たちに最適化されたマニュアルが有ればとっても素敵！
そう思ったので作ってみました。

digiperのMTの使い方がベースですが、それなりに汎用性が高いマニュアルにしたつもりなので、MTの基本的な操作方法を伝えるのに使っていただいて構いません。
まぁ、自分が使いたいが為だけに作ったんで世間的に使いやすいかは謎です。

配布してもいいかなーって思ったんですが、SSI使ってたり色々微妙だったので、このマニュアルをベースにちゃんと使いたいって人が居ましたらご連絡くださいませ。

このマニュアルで使ってるプラグイン

このマニュアルでは以下のプラグインを使ってる事を前提にしてたりしますのでご紹介。

clearfixを使わないでやるには。

2008-11-09T14:39:52Z

2008年11月11日お昼頃: overflow部分を一部加筆しました。

ウチのとあるページのコメント数が28になって、何となく嬉しい今日この頃。

さて、今回はこんなタイトルですけど、こんなエントリーをしようと思ったのは、floatを指定した要素の親要素の高さが算出されない時の解決手段として、clearfixでぐぐれみたいなのをよく見かけたり、あまりにもclearfixが有名だから、最近CSS覚えた人とかは、もしかしたら知らないのかなぁ～なんて思ったのです。

なので、一応基本に戻ってみましょうということで。
最近、「CSS Nite ビギナーズ」とかもやってますしね。

あ、clearfixを知らない方は、clearfix｜CSS HappyLife辺りか適当にぐぐってくださいませ。

何か、久々に書いてる気がして、どうやって書いてたか思い出せない...

えっと、そもそもどんな状況の時かっていうと以下のような時。

こんな時に、clearfixを使ったりすると思います。
毎度用意しているサンプルは、以下より。

サンプルページを見る

サンプルを見てもらえば大体分かるかと思いますが、clearfixを使わない場合は、float、overflow、min-heigtプロパティ辺りでやるのが主だと思います。

全サンプルで共通しているスタイルは、以下のようになってます。

#main .section {
	margin: 10px 0 20px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ccc;
}
 
#main .section p {
	float: left;
	width: 360px;
}
 
#main .section p.image {
	float: left;
	width: 128px;
	margin: 0 10px 0 0;
}
 
#main .section p.image img {
	vertical-align: top;
}

この状態だと、ダメなのでちゃんとしてあげるためにclearfixを使うと以下のようになります。

#main .section:after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}
 
#main .section {
	zoom: 1;
}

zoom使ってますが、独自拡張とか使うのが嫌な人はwidthプロパティの指定をしてもOKです。

一応ここからが本題の、clearfix以外でやるには。ですが、ボクが多く使うのは、overflowを使った方法。
以下のような感じです。

#main .section {
	overflow: hidden;
}
 
* html #main .section {
	height: 1%;
}

見た感じ、clearfix使うよりすっきり！
あ、これもIE6用のハックが嫌な場合は、widthプロパティの指定でもOKです。
widthの計算が面倒だったり忘れてる場合が多いから出来るだけ入れたくない人なんです...
後、もうちょっとまともな理由としては、横幅が変わってもwidthの指定が無ければ使い回しが楽ってのもあります。

なお、overflowの値は「hidden/auto/scroll」のいずれかでOKです。
あんまり覚えてないんですけど、hiddenが一番安定してた気がします。

とても良さ気に書いてますが1つ注意点として、overflowは印刷の時に、一部のブラウザで1枚に印刷できないときに改ページせずに消えてしまう時があり、全体を囲ってるdivとかで使ってしまうとよろしくないので、サンプルのようにメインエリア内の一部とかで使うのがいいと思います。
（Firefox2までだったと思う...）

overflowで高さが算出されるのは、2.1の仕様にそんな感じのことが書いてあります。
たぶんこの辺↓
10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

英語は頭痛くなるので次。
floatでやる場合は以下のようになります。

#main .section {
	float: left;
}

floatしてる親要素もfloatさせることで、floatのルールが適用されて高さが算出されます。
ただ、floatを使ってやるとマージンの相殺がされないので、余白が変わってしまったり、widthプロパティの指定が無いとレイアウトが崩れたり、後続する要素にclearプロパティの指定が無いと一部のブラウザで崩れたりと、他の処理が面倒になってくるので使い勝手としては微妙かもしれません。（昔はこの方法しか知らなかったので良く使ってましたが）

min-heightプロパティを使ってやる場合は以下のような感じです。

#main .section {
	min-height: 128px;
}
 
* html #main .section {
	height: 128px;
}

コレが使える状況は限られていて、テキストが少なくて、今後を見越したときも明らかに長いテキストは入らないだろうって思える時に加え角丸があった場合に使ったりしてます。
なので、当然テキスト量が多かったり極端にフォントサイズを上げると枠からはみ出してしまいます。

ざっとこんな感じです。

ブログを書くって事。

2008-10-19T05:48:41Z

最近、ダーツにはまってるhirasawaです。
ダーツ仲間を激しく募集しているので、自分が使えるリソースで一番人が見そうなコレを利用させてもらいます！
連絡先は、iddyのプロフから何かしらでどうぞ！
レーティング3の初心者丸出しですが、上級者でも興味あるって方でも、hirasawaってのと話してみたいって奇特な方でも誰でも大歓迎っす！本気っす！

さて、募集はこのくらいにして、CSS Nite in Ginza, Vol.27に行ってきました。

今回参加するお二方とも、CSS Niteや色んなイベントを通して仲良くしてもらってる（と思ってる）ので、何というかとても身近な人が出演者として出ているので、色々感じる事があったりします。

ちょうど、Vol.27の1ヶ月前くらいにお二人にお会いする機会があって、飲みながら濃ゆい話とともにVol.27出演に関してのお話もちろっとしてきました。

そんな感じのお話を続きにて。

飲みの趣旨が、Web業界な方で元々とあるゲームに熱中してた集いだったので、濃い話がメインでしたが、集まってるメンバーがメンバーなので、マークアップの話とかそういう話もしつつ、Vol.27出演に関しての話が出たときに、二人ともCSS Niteとかのような100人を超えるセミナー等での出演経験は無いらしく、キンチョーしてるーとか言ってました。

hamaさんも、あっきーもあんまり緊張とかしないタイプに見えてたので、何処か安心する自分が居るとか居ないとか。

にしても、人前で話してナンボっていう仕事をメインとしてる訳じゃないので、慣れない中色々準備するのは、想像しただけで大変なのが伝わってきます。

すげーなぁ。

して、Vol.27当日ですが、MT100本。の紹介をちょろっとさせてもらう時間が有ったんですが、肝心の本が無いっていう。いや、ホント参加してた方すみません。

しかし、人前で話すのは苦手すぎる。
どーしたらいいんでしょうね、コレは・・・
ウチのクライアントさんも居たようで、お恥ずかしい限り。

って、このブログも読まれてるっていう。
人前で話すのは死ぬほど苦手ですが、仕事はしっかりばっちりカッチリやってます！
ダイジョウブです。ご安心ください！（必死

そんなボクのチキンっぷりはいいとして、出演者のお二人ですが、hamaさんはとても落ち着いてる感じでいつものhamaさんっぽく話してました。
あっきーも、緊張している感はとても伝わってきたけど、「らしさ」がとても出てました。

無理に自分を飾らない感じが、とても大切なんだろうなって思います。
変に良くやらなきゃとか、ちゃんとしなきゃって考えると、頭真っ白になったりしちゃって、結果最低みたいな。

ちょっとずつ頑張ろう。うん。

気付けば前置きが長いですが、ここら辺から主題のブログを書くっていう事に関して。

hamaさんがお話してた『Webの世界に情報発信しよう！』は、簡単に言うと「ブログ書いて情報発信」っていう感じだったんですが、ボクもブログを書いてた事で仕事が舞い込んできたり、著名な方とお話しする機会や知り合う機会が増えたり、デジパっていう会社の知名度アップにチョットは貢献したりしたので、たまにはその辺の話でも書こうと思った次第です。

このブログは、そもそも「仕事」として業務の一環でやらなければならなかったんです。ざっとボクが書き始めた頃のブログのルールを上げると、

全社員がブログを書く。
エントリーは週2回が必須。
内容は自由。

という感じで、目的としては「個人のアウトプット能力の向上やデジパの認知度向上」でした。

確か、入社3ヶ月以内にブログを立ち上げる必要があって、入社前からどーしようとか考えてました。
ちなみに、デジパに入った当時はデザイナー志望。

あれ？何処で道が変わった！？
まぁいいや（笑）

んで、何を書こうか悩みに悩んだ挙句、CSSネタをメインのこのブログが誕生した訳です。
始める前の気持ちとしては、CSSネタとかTips系、リファレンスやってるサイトなんて幾らでも有ったし、今更自分が書いてどうなる？とか、CSSは好きだけど、そもそも人様に情報を発信したりするレベルじゃないなぁとか、ネタを絞り過ぎて、書くこと無くなるんじゃないか？とかとか色々考えてました。

コーディングに関して、当時は自信も全く無かったので。

書き始めは、デジパの社員として相応しい内容を書かなければいけないとか、下手なこと書いてボッコボコに言われたらどうしようとか（外の人は殆ど読んでないので、社内の人からの突っ込みが怖かった）思って書いてたので、今の言葉遣いとチョットだけ違います。たぶん。
見たくないので一番古いのとか消したいですが。

それと、あの頃一番ネックだったのが本名を晒さなければならないって事。
そんなルールは無かったかも知れませんが。
今までWeb上で使ってた名前がryoだったので、平澤とか出したくないっすよね。

このブログでは、ryoって名前出すほうが恥ずかしい事に気付いた。今気付いた！

えっと、そんな訳でブログを書き始めた頃は、あまり乗り気じゃなかったので、気持ちとしては結構後ろ向きだったかも知れません。

しかし、しかしです。
そんな社員ブログでもボクのモチベーションを上げる一つの理由が、毎月アクセス数を集計して、3ヶ月に一度ブログの表彰があったんです。

アクセス数、伸長率、デジパオフィシャルへの誘導数でそれぞれ『￥』がちょろっと出ます！

なので、やるからには社内でアクセストップを目指そうと。

当時は「WWW WATCH」のアクセスがどうやっても届かないんじゃないか？ってくらいだったんですが、自分なりにアクセスが上がりそうな事は片っ端から試してやってたら、半年後くらいに一度追い抜いて、追い抜いたらWWW WATCHの中の人に火が付いて、すぐにぶち抜かれて、結果何の表彰ももらえないという悲しさ。

この辺から、WWW WATCHとCSS HappyLifeのアクセス対決が始まったとかそうでないとか（笑）

表彰が終わり、次の3ヶ月の集計に入った頃、HappyLifeがイケサイに掲載されたんです。
すげー喜んでたなぁ（笑）
そこでアクセスがグッと増えて、この記事が初めてまともにブックマークされ、このタイミングで需要がありそうなエントリーが書ければ一気に増えるかも！みたいな事考えててエントリーしたのが、『もう、class名やid名で悩まないんだからっ！！』でした。

あのタイミングを逃したくなかったから、ビギナー向けエントリーを書いてる途中で公開したっていう。
今考えると必死すぎる...

いや、コレも全て「努力」の一つです！
class名やid名のエントリーした後くらいに、初めてweb creatorsで記事書きませんか？のお話を頂いたので、ホントに良かった。

気付けば、「お前金の為だけに頑張ってたのかよ！」的な感じもしますが、コーダーとかって職種は表立って周りから評価されるのが難しいので、社内での評価を上げるために出来る手段の一つとして、ブログを頑張って書いてたんす。

今思えば、

一つの内容に特化したブログ
サイト名見て、何となく内容がわかる
週2という程よいエントリー数
主業務と直結するからネタがあまり切れない
主業務じゃなくても好きなことだから書ける
メモ代わりに書いてみる
金もモチベーションの一つになった
この緩い感じの言葉遣いが、親しみ易いって人も居た
WWW WATCHよりアクセス伸ばしたいっていう気合い

って辺りが、アクセスが伸びた理由だったのかなって。
なので、hamaさんのお話を聞いて、またブログ書いてみようかな～とか、新しく始めてみよーかなぁって人は、自分が好きなことで特化できそうな内容辺りが一番書きやすい気がします。

あ、あっきーの内容に関して全然書いてない...ごめんなさいっ！

今よりちょっとだけクオリティを上げるために。

2008-09-19T18:36:46Z

執筆が終わったと思えば、主業務が激務でネタがちらほら浮かんでたのに書けない今日この頃。
でも、どこぞのiPhoneネタと宣伝ばかりになってしまったブログよりいいかも知れません。えぇ。

さて、CSSってある程度覚えてしまえば思った以上に簡単に組めたりして、何となく組めている気がするって思ったりしないっすかね。
もしくは、その逆になーんかイマイチ成長してないようなって感じてる時とか。

そんな状況のときに、今よりちょっとだけコーディングのクオリティや効率を上げるのに意識する事とかやっておくべきこととかを思いつくままに上げてみます。
仕事としてってのがベースなので、個人サイトやブログレベルだと当てはまらないかも。

ボクが昔はやってなかったけど今は当たり前な事とか、今でも忘れがちな事とか、何かそういう感じのことを書いていくので、人によっては当たり前だし、ちょっとした発見がある人も居るかも？

よく分かりませんが、いっきます！

クオリティや効率を上げるために必要そうな事

この見出しが一段階下げる目的だけで使ったなんてとても言えません。

何はともあれ、HTMLが最重要。

正しい文書構造でマークアップ出来てなければ、どんなにCSSが分かっててもダメっす。

必ずlintは使うよーに。

たまーにチェックするの忘れちゃうんだけど、テキストエディタとかで作業している場合は、要素の閉じ忘れとかっていうイージーミスに気付かないから必ずチェックしなきゃダメっす。減点されてたら、解説を読むなりググるなりして次回から同じミスを繰り返さないように。

デザインから要素を選ばないよーに。

デザイン上こう見えるから、この要素でマークアップじゃなくて、プレーンな状態で見た時に正しい意味合いになるようにしなきゃダメっす。

サイト全体を見て、設計しなきゃ。

「木を見て森を見ず」じゃないけど、ページ単位で組んでると無駄が多くなっちゃうから、サイト全体をちゃんと見て、どの要素がどこで使いまわせるか考えなきゃダメっす。コレはデザインにも言えるかな。

横幅も大事だけど、縦幅にも気を使って。

デザインを再現するにあたって、横幅は1pxでもずれるとカラム落ちが発生したりするから気付き易いんだけど、縦幅の詰めが甘いとデザインクオリティが一気に落ちちゃう。
特にテキストはline-heightプロパティの関係とかで、デザイン上10px空いているのをそのまま10pxとかだと実際には13px相当だったりしちゃうから、その辺りも気を使わないとダメっす。

フォームには必ずlabel要素を使うよーに。

ラジオボタンとチェックボックスは特にそうだけど、label要素を使ってないと使いにくいから、使わないとダメっす。

文字サイズを変えても崩れないよーに。

画像しかないヘッダーとかで、文字サイズを変えるとずれて行くとのはカッコ悪いから、Fxとかで幾ら大きくしてもズレ無いようにしておかないとダメっす。テキスト部分も当然、レイアウトが破綻しないようにしなきゃダメっす。

classとかを減らしたいからって、ガチガチに組まないよーに。

例えば、デザイン上このページはp要素を使う部分が特定のデザインしかないからってclassを付けずに、子孫セレクタだけで親要素からp要素に指定しちゃうと、後から普通の段落が追加できない可能性が出ちゃう。
個人サイトならいいんだけど、仕事としてサイトを組む場合は、あまりにもガチガチに組んでしまうと柔軟性が無くなって、修正や追加するときに、都度CSSも直さないといけないっていう状況が発生してしまう。その作業を別の人がやる可能性も高いから、そんな事にならないように多少classが増えても管理面が良くならなきゃダメっす。

できるだけ汎用性の高いclass名をつけるよーに。

そのページのそのデザイン。実は他のページでも同じだったりしない？そんな時に、同じスタイル当てるのに別々のclass名付けるのは手間だから、どっちに使っても不自然じゃないclass名をつけなきゃダメっす。

あまりにもCSSファイルを分割し過ぎないよーに。

分割管理は、うまく機能してればとても使い易いけど、安易に分割したり、ページ単位とかで分けたりするのはかえって煩雑になってしまいがち。HTMLからclassとかidをコピって検索かけても分割され過ぎてると目的のスタイルが見つからなくなってしまう可能性も考えてあげなきゃダメっす。

読み込み中のことも考えて、背景画像を引いてても背景色の指定もするよーに。

背景色の指定をするとデザイン上問題が出るケースもあるので、一概には言えないけど、例えばグラデーションの背景画像を使っている場合とかは開始か終了の色を指定することで、読み込み時に多少重くなってもすぐにテキストが読めたり、読み込みがキレイになったりするからやっておくといいとおもー。

class名に「clear」や「clearfix」は使わないよーに。

何気にウチのサイトの検索ワード1位が「clearfix」だったりするんですが、コレをそのままclass名に使う人が結構多い気がするけど、見た目を現すclass名はびみょーなので使ったらダメっす。そもそも、clearfix使わないと再現できないっていうケース自体がfloatプロパティへの理解を深めれば殆ど無いかとおもー。

だからって、絶対に見た目を現すclass名がダメとは思わないよーに。

良くないとはいえ、見た目や位置関係でclassを付けないとダメなケースもやっぱり有るんです。ブログ構築してる時なんて特にそうだけど、そんなときまで頑なにつけないってのは、管理・更新・運用面で効率が落ちてしまうだけなので、状況を見て判断しなきゃダメっす。

繰り返しの背景画像を小さく切り過ぎないよーに。

容量を抑える目的でリピートさせる系の背景を切る時に、最小サイズで切って並べると、レンダリングスピードがかなり落ちて、PCにも意外と負荷が掛かってしまう。横で繰り返す画像の場合、1px×50pxとかで切らずに20px×50pxとかで切った方が実は早かったりする。時代遅れな低スペックマシンでやってみるとその差が体感できるんす。

プロパティの指定順序は統一するよーに。

これは最初に癖付ける部分ですが、指定順序がバラバラだと、同じ指定を2度してしまったり、後から見た時に分かり難かったりといい事が無いので、統一しなきゃダメっす。美の追求ですわ！美の！じゃあ、どんな順番がいいんですか？ってのは、Mozilla.orgの外部CSSの順番が有名で、ボクもソレに近いです。簡単に書くと、1. 視覚整形モデル、2. ボックスモデル、3. 背景と前景、4. フォントとテキスト、5. 生成内容っていう感じ。

IEではまらないよーに。

IE6/7で変だなっていうときは、何も考えずにとりあえず「zoom: 1;」を試してみれば、9割方問題が解決しちゃったり。zoomプロパティはIE独自なので、使いたくない人はwidthプロパティの指定をするとかで乗り切れちゃいます。IE6だけ変だぞ？っていう場合、「display: inline;」やってみると直ったり。如何にIE対策を早い段階で覚えるかってのも作業効率を上げるには重要だと思うっす。

確認を怠らないよーに。

意外なところで、意外なミスをやらかしてる可能性があるので、確認はしっかりやらなきゃダメっす。

あまり根つめすぎずにやるよーに。

うぉ、ネタが切れてきた、、、何事に対してもそうだと思うんですけど、納期に追われる余り食事も休憩も余り取らずにっていう状態は、精神的にも身体にも良くないので、ほどほどにさぼってやりませぅ。じゃないと結果として効率が落ちたり、ミスが増えたりといい事がない気がするっす。

何はともあれ楽しまないと損です！

いや、ホントに。コーディングつまんねー！とか思ってたらやっぱりダメっす。せっかくなんで、楽しんでやってください。ウチのサイトの目的がそれなので最重要っす！！

あぁ、もっとイッパイ書く予定だったけど、書き出すとあまり浮かばない。
気が向いたり、浮かんだりしたら追記していきまっす。

しかし書いているウチにターゲットとしてた人のレベルがどの辺だったか曖昧に...

まぁ、何はともあれ、弊社にもコーダーさんとかマークアップエンジニアさんっていう人は何人か居ますので、その人たちへのメッセージが込められているとかそうでないとか。

がんばってね。

コメント対応版絵文字プラグイン（emoddy）

2008-08-23T09:30:05Z

ちょこちょことバージョンアップを重ねてきた、Movable Typeにて絵文字を使用可能にする、emoddyプラグインですが、今回コメント部分にも絵文字が使えるようになりました。

対応しているバージョンは、MT4.0、4.1x、4.2となっております。
管理画面の大きな変更がなければバージョンが上がっても使えると思います。

旧バージョンでも書いておりましたが、このプラグインの特徴などをご紹介。

とにかく使いたいって人は、アップロードするだけで使える！
絵文字の画像を追加するのがとてもカンタン！
画像がいっぱいに増えても普段は邪魔にならない！
好きなディレクトリに絵文字用の画像を設置可能！
絵文字が最初から88個くらい付いている！
カスタマイズとかも自由にしてOK！
コメントにも絵文字が使える！
モディファイアを使う事で、ブログ記事編集画面にimg要素などのソースが表示されなくなり、すっきりできる

など、いい感じになってきました。
TypePad で使用している絵文字アイコンをダウンロードして、そのまま該当のディレクトリにアップロードすれば、すぐに使えたりします。

ダウンロードやインストール方法、詳細な説明は続きにて。

ダウンロード

コメント対応版絵文字プラグイン（emoddy）zip形式（68KB）

上記リンクをクリックして、ダウンロードしてくださいませ。

基本的なインストール方法

ダウンロード後、任意の場所（デスクトップなど）に置き、解凍します。
emoddy302フォルダ内に、「mt-static」と「plugins」があるのを確認してください。
2つのフォルダの中身全てをMovableTypeがインストールされているディレクトリ（mt.cgiがある場所）にアップロードします。
個別のブログの設定→プラグインより、emoddy3.0.2が表示されているのを確認してください。

以上で、基本的なインストールは完了です。
後は、「ブログを書く」などから、ボタンが追加されていれば完璧です。
ウェブページのエントリー画面にも表示されますので、あわせてご確認ください。

ちゃんとインストールされると、以下のような感じになります。

コメントでemoddyを使用する

今回のバージョンより、個別ページのコメントにも絵文字が使えるようになりましたので、その使い方を説明します。

コメントを使いたいhead要素にCSSとJSを読み込ませる

<link rel="stylesheet"
href="<$MTStaticWebPath$>plugins/emoddy/css/emoddy.css" type="text/css" />
<script type="text/javascript"
src="<$MTStaticWebPath$>plugins/emoddy/js/emoddy.js"></script>

「mt-static\plugins\emoddy」のCSSとJSまでのパスが正しく記述されていればOKです。
なので、mt-static内が嫌な人は、任意のディレクトリに移動させ、そこまでのパスを記述してください。

コメント設定を変更する

各ブログの設定 > コメントのコメントポリシー内にある、HTMLを許可にチェックを付け、HTMLタグを制限でカスタム設定を選択します。
そしたら、以下のHTMLを入力します。

a href,b,i,br/,p,strong,em,ul,ol,li,blockquote,pre,img src class width height alt

絵文字のみ許可の場合は、img以降だけで大丈夫だと思われ。

この部分です。

コメントフォーム部分にemoddy表示用のソースを記述する

ブログ記事テンプレートなど、コメントフォームが設置されているテンプレートに以下のソースをコメント本文のtextarea要素直前などに記述します。

<$MTEmoddyComment$>

「保存」後、再構築をかければ絵文字がコメントでも使えるようになります。

初期状態は管理画面と同様に、ボタンが1つ表示された状態で、クリックすると一覧が表示されますので、使いたい絵文字をクリックすればOKです。

上記のMTタグは、以下のHTMLが吐き出され、一度再構築をかけたタイミングで、コメント用の「emoddy_icons.js」が生成されます。

<div id="emoddy">
<a href="javascript:void(0)" onclick="_CL_emoddy.EmoddyIcon('emoddy_icons',event)"><img title="Insert Emoddy tag" src="http://yourdomainname.com/cms/mt-static/plugins/emoddy/images/bn_emoddy_normal.gif" alt="Insert Emoddy tag" width="22" height="22" /></a>
<div id="emoddy_icons"><script type="text/javascript" src="http://yourdomainname.com/emoddy_icons.js"></script></div>
</div>

emoddy_icons.jsは、デフォルトのままだとルートディレクトリに生成されるので、jsディレクトリにまとめたいなど、この場所が嫌なときは、プラグインの設定から変更が可能です。（詳細は後述）

細かい設定など

絵文字画像の追加方法

「mt-static\plugins\emoddy\images」に「gif形式」の画像を追加するだけでOKです。
ファイル名順に並び替えられますので、近い絵文字のファイル名の先頭を揃えておくなどすると、キレイに並ぶと思います。

※画像の差し替えやリネームなどする際に「bn_emoddy_normal.gif」を削除してしまうと、管理画面に表示されなくなってしまうので、消さないようにご注意ください。
（_active.gifと_hover.gifは使われてないのは秘密です。）

絵文字画像のディレクトリ変更

初期では、「mt-static\plugins\emoddy\images」に絵文字画像が入ってますが、任意のディレクトリに移動させる事も可能です。

例えば、「http://css-happylife.com/img/emoddy/」で絵文字を使いたい場合、まずは該当のディレクトリに絵文字画像をアップロードしておきます。
システムと各ブログでそれぞれ設定が出来ますので、自分の目的にあわせて設定してください。

システムプラグイン設定から変更する場合

複数のブログで絵文字を使用する場合に、一括でディレクトリ変更する際に使用します。
emoddy 3.0.2の設定画面を表示させ以下の指定を行い「変更を保存」後再構築をかければ反映されます。

ICON SITE URL：絵文字画像が入っているディレクトリをURLで指定します。（例：http://css-happylife.com/img/emoddy/）
ICON SITE PATH：絵文字画像が入っているサイトパスを指定します。（例：/home/htdocs/blog/img/emoddy）

home/htdocsとかのサイトパスは、各ブログの設定 > 公開のサイトパスから確認すると手っ取り早いです。

なお、ここにはJSの設定とemoddyタグを使用するのチェックボックスがありますが、詳細は後述します。

各ブログのプラグイン設定から変更する場合

個々に設定を行いたい場合や、ブログが1つしか無い時はこっちの設定を変更します。

ツール > プラグインより、emoddy 3.0.2の設定画面を表示させ以下の指定を行い「変更を保存」後再構築をかければ反映されます。

ICON PATH：絵文字画像が入っているディレクトリのパスを指定します。（例：img/emoddy/）

システム設定と同時に行っていると、こちらの指定が優先されます。

「emoddyタグを使用する」の使い方

こちらにチェックをつけると、<Emoddy:face_smile>のように、エントリー画面が独自タグで表示されるようになります。

そのままだと、動作しないため、
<$MTEntryBody$>や<$MTEntryMore$>などに、
<$MTEntryBody emoddy="1"$>とモディファイアを付け足す必要があります。
MTEntryTitleなどにも、モディファイアを追加すると使えたりします。

なお、コメント部分はこれに対応していません。ご了承をば。

コメント用の「emoddy_icons.js」の生成ディレクトリ変更

初期状態でコメントに絵文字を使うようにすると、ルートディレクトリにJSが生成されてしまうので、コレを変更するには、絵文字画像のディレクトリ変更と同じようにプラグインの設定から変更してください。

なお、ディレクトリを変更する場合は、パーミッションの変更が必要な場合があります。「777」とか、書き込めそうな権限にしたってください。

ライセンス

この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。

という感じです。改変とかは自由にやってください。ブラッシュアップ歓迎です。
特定の画像のみを特定の使い方をするのもOKです。

デジパ（株）オフィス移転のご連絡

2008-08-23T06:36:15Z

デジパ株式会社は8月24日（日）に下記住所へオフィスを移転いたします。

〒108-0023
東京都港区芝浦3-6-5 オカザキ芝浦ビル4階
（Googleマップで地図を表示）

電話番号、FAX番号に変更はございません。

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。

2008-08-21T17:04:49Z

この度、Movable Type をCMS的に使っちゃおうぜ！みたいなノリの本を書かせていただきました。

去年、共著の形で (X)HTML、CSS 関連の書籍、「Web標準XHTML+CSSデザインクリエイターが身につけておくべき新・100の法則。」を出版させていただきましたが、今回も同じメンバーでやりました！

前回も長いタイトルでしたが、今回も異様に長いです。

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。

略称は、MT100本とかでしょうか。

いやー今回も長かった。
前回以上に長かったっす。ホントに苦労した...

そんな苦労話と、書籍の紹介を続きにて。

お話を頂いたのが結構前で、その頃とっても忙しくて今日になってしまったんですが、Movable Type 4.2対応本としては、現状2冊目でしょうか？

知ってる限りだと、Movable Type 4.2 パーフェクトガイドが出てるのでその次だと思う。

本の方向性は全く違うので、どちらも買っても問題ないっす！

この本の性質上、Movable Type を初めて触るって方は対象になってないので、Movable Type を使って一通りブログを構築した事があるとか、制作会社につとめてたり、フリーでやってる人がCMS的にMovable Type を使うにはどうしたらいいん？

っていう感じの内容が100個あります。

なので、基本的な部分を知っていないと、細かい説明とか全くしてないんでわけわかめな感じです。
でも、その為にMovable Type 4.2 パーフェクトガイドがあるんです。

こっちで基本から色々マスターして、もうちょっと別のことってどーするんだろう？って時に使えると思います。

前回、編集者の方が山手線あたりで青本読んでる人が居ましたよ！って報告あったんで、今回はソレを目撃したくて仕方ありません。

怪しいニヤついた顔でアナタのMT100本を見ている人が居たら要注意です！
ボクかも知れません。

いや、ホントに見てみたい・・・どのくらいの感動を得られるのか。

あ、後親バカで申し訳ないのですが、Movable Type で絵文字を使う方法的なノリで、自分のところで配布してるemoddyをちゃっかりしっかり宣伝してます。
その為にコメントに絵文字対応してたりしたので。。。

なので、近いうちに最新版のemoddyもアップしますからもう少々お待ちを。

気付けばちゃんとした宣伝になってない風味なので、以下のエントリーもどうぞ。

Movable Type 本を書きました | WWW WATCH

アイコンやサムネイルの横にタイトルと概要文があるような時。

2008-07-25T05:49:41Z

とりあえず、暑いっす。えぇ。
ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。

あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。

ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。

さて、そろそろ本題に。

こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。

今回は、これの組み方の一つとしてサンプルを用意してみました。
サンプルの確認は以下より。

サンプルを見る

こういうデザインの場合、どうやって組もうか結構悩むんです。
何に悩むって、この画像をどうやってマークアップするか。

今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があって手間だなぁ～と。
なので、画像もdtに入れてしまえばリンクは一つですむので良い感じがしました。

と、言う訳で今回は以下のように組んでます。

<dl class="serviceList">
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。
</dd>
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。デジパ(略)評価される理由とは。
</dd>
<dt><a href="./">デジパのウェブサイト制作
<img src="./img/item/icon_digiper.gif" alt="digipeアイコン" /></a></dt>
<dd>
デジパ(略)評価される理由とは。
</dd>
</dl>

dt要素のテキストの後にimg要素を配置。dd要素が簡単な説明とか概要文です。
h3要素とかの見出しに、pって組み合わせでも、h3要素に画像を入れれば同様の事が出来る風味です。

CSSは以下のようになってます。

#main dl.serviceList {
	margin: 0 0 20px;
}
 
#main dl.serviceList dt {
	position: relative;
	width: 460px;
	margin-bottom: 5px;
	padding-top: 15px;
	padding-left: 80px;
	font-weight: bold;
	border-top: 1px dotted #ACACAC;
}
 
#main dl.serviceList dt.firstChild,
#main dl.serviceList dt:first-child {
	border-top: 0;
	padding-top: 0;
}
 
#main dl.serviceList dt a {
	padding-left: 15px;
	background: url(../img/item/mark_01.gif) no-repeat left center;
}
 
#main dl.serviceList dt img {
	position: absolute;
	top: 15px;
	left: 0;
	padding: 2px;
	border: 1px solid #EEE;
}
 
#main dl.serviceList dt.firstChild img,
#main dl.serviceList dt:first-child img {
	top: 0;
}
 
#main dl.serviceList dd {
	margin-bottom: 15px;
	padding-left: 80px;
	height: 50px;
}
 
#main dl.serviceList > dd {
	min-height: 50px;
	height: auto;
}

デザインを整えるために本題とは関係ないプロパティやらがありますが、基本的にやってることは、positionプロパティでdt要素の左上を基点として、img要素を飛ばしてる感じです。
後は、dd要素のテキストが少ない場合に、レイアウトが破綻しないよう、min-heightの指定をして最低の高さを確保してます。

もし、dt内のテキストが画像の場合は、アイコンにclass指定して上げれば良い感じです。

こんな感じのデザインを組む必要がある場合の一つの選択肢として如何でしょうか。

最後に、

サンプルのダウンロードとサンプルの確認

フッターの背景をコンテンツが少ない時でも下まで表示させる

2008-06-30T16:13:13Z

デジパのベトナムオフィシャルサイトがオープンしました。

さて、今回はこのデジパベトナムを組むのに辺り、最初は無理（もしくは相当厄介）だと思ってたことが思ったよりカンタンに出来たのでご紹介。

Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。

キャプチャみたいな感じです。

コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。

と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。

htmlとbody要素にheight: 100%指定して...みたいなのが覚えられないだけですが。

また、この方法だとフッターの高さを固定する方法が一般的だと思う。

有名どころだと、、、

辺りでしょうか？
A CSS Sticky Footerみたいに画像オンリーならいいんですが、テキストが有るとDDTT対応（文字サイズの可変でもちゃんとテキストが読める状態）をうたえなくなってしまうのでダメだったりします。

で、まぁ前置きが長くなりましたが、フッターの背景を下まで表示させれればいいな。と思った次第です。

キャプチャみたいな感じです。

サンプルも用意ししてますので、以下よりご覧下さいませませ。

このサンプルを見る

サンプルのようにあまりにも本文が無いと、フッターの色が強すぎる場合など目に優しくなかったりするので、その辺りはメインエリアにmin-heightプロパティとかである程度確保しておけばいいかと思います。

#main {
	float: left;
	width: 540px;
	margin-right: 20px;
	min-height: 200px;
}
* html #main { /* for IE6 */
	height: 200px;
}

で、肝心のフッター部分ですが、上記の方法とかtable-cellとか色々試行錯誤した結果、とてもカンタンに出来てなんで気づかなかったのか不思議になったんですが、以下のような指定をすることで出来ました。

html {
	background: #d3b0ac;
}
body {
	background: #fff;
}

これだけです。
今回フッターには軽くグラデーションを入れているので、グラデーションの終了部分の色をhtml要素に指定してあげます。

他はコレといったことはしてないです。
脳内妄想の段階で無理だと思ってて、html要素にbackgroundの指定をする。っていう発想が無かったので、ここにたどり着くのに正直結構時間が掛かりました。

ただ、この方法の欠点は、横幅100％な背景がある場合に限られます。
（html要素に背景画像を用意してrepeat-yで表示させればいけるんですが、IEで横幅を変えたりした時に1pxずれる問題が解決できなかったので...）

限られるとはいえ、フッターがちゃんとボックスみたいになってる場合はそこまで不自然じゃないと思うので、いいかなーとか。

ということで今回のサンプルやデジパベトナムみたいなデザインの場合は使えるかと思います。
心なしかウチのデザインでフッターの横幅100％は増えているので活躍しそうです。

ちなみに今回のサンプルでは、フッターにはdivを一つ噛ませて横幅100％にしてますが、あっきーのブログで紹介されている方法を使えばdivを増やさずに出来ちゃったりします。

横幅が 100% の header を ~inner を使わずに実現する | ヨモツネット

タグクラウドみたいなのの単語の折り返しに関して

2008-06-27T16:56:51Z

単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。

Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。

で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。

サンプルは以下より確認できます。

単語の禁則処理に関してのサンプル

取りあえず、サンプル見てもらうと2つ似たようなのがあるんですが、タグクラウドみたいなのを作ったときに普通に作ると多分2番目みたいになるかと思います。

通常はコレで問題ないのです。
なにせ、1番目みたいにすると、長いテキストが入った場合に折り返してくれないので、はみ出したりしてしまいます。
更に、IE6だとoverflow: hidden;の指定が無い場合はボックスの幅を広げてしまうので、カラム落ちしてしまったりといい事がありません。

が、基本的に短いテキストで羅列されるなら、1番目のようになっていた方が一つの単語の途中で改行されないので、読みやすくなったりします。

そうなんですよね。読みやすくなるのです。なら、やった方がいいよね。
っていうことで、やる事になったのですが、中々ブラウザによって言う事を聞いてくれず、色々悩んだりした挙句、以下のようなCSSで意図した感じに出来ました。

#main ul.tagList {
	width: 510px;
	margin: 10px 0;
	padding: 15px;
	background: #f0f8ff;
}
#main ul.tagList li {
	display: inline;
	margin-right: 10px;
	white-space: nowrap;
	line-height: 2;
}
*:first-child + html #main ul.tagList li {
	float:left;
}
* html #main ul.tagList {
	overflow: hidden;
}
* html #main ul.tagList li {
	float:left;
}

今回、リストで並べてるので、何はともあれdisplay: inline;の指定をしてインライン風味に。
コレだけだと2番目のと同じなので、今回の目的である単語単位での折り返しを禁止させるようにするために、white-space: nowrap;の指定をしてみます。

そしたら、FirefoxはOKだったんすが、IE6/7が横一列に並んでしまったのでIE6/7はハックしてfloat指定したらいい感じに並んでくれました。
ただ、floatを指定すると親要素が高さを算出してくれませんので背景が見えません。

それを解決するには、widthの指定を親要素に当たるul要素にすることで解決。zoom: 1;でもいいんですが。

コレで以下のブラウザで大体おんなじ見た目になりました。

Internet Explorer 6
Internet Explorer 7
Opera 9.5
Safari 3
Firefox 3

最初は、white-space: pre;とかでやってたらかなりはまってしまって大変な事になりかけましたが、無事意図した状態になって良かったです。はい。

ちなみに、サンプルのメインエリア下部にある見出しっぽいものの下は、半角英数字だけだとどうなるのか気になったので残ってますが、今回のエントリーとは関係はありません。いわゆるおまけです。

あ、最後に。

CSS HappyLife

IE6で閲覧すると。

16日のお昼頃追記

マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年

ソースなんて誰も見ないよ。

新規でサイトを作るのに使えそうなの一式。Ver 3

Ver.3の中身ご説明

ディレクトリ構成

XHTMLテンプレートの変更点

CSSファイルの変更点

default.css

style.css

JavaScriptファイルの変更点

ga.jsとgetTracker.js

replaceascii.js

最後に。

今よりコーディングのスピードを上げるには

コーディングのスピードが上がりそうな事

1）基本的なタイピング速度を上げる。

2）キーボードやマウスを変えてみる。

3）PCのスペックを上げてみる。

4）デュアルじゃなくてトリプルモニタにする。

5）テキストエディタからDreamweaverに戻してみる。

6）ショートカットキーを多様する。

7）独自ショートカットキーの作成をする。

8）辞書登録を活用してみる。

9）各ブラウザのレンダリングを熟知する。

10）ブラウザの表示チェックはIEにする。

11）ブラウザの表示チェックをあまり行わない。

12）より汎用性の高いclass名などのルールを作る。

13）spanやdivを増やすことを躊躇いすぎない。

14）作業を中断させない。

15）ちゃんと休憩する。

16）モチベーションを上げる。

17）CSS HappyLifeってブログを読んでみる。

Movable Type 4.2のマニュアル（初めて更新する人向け）

経緯とか目的

このマニュアルで使ってるプラグイン

clearfixを使わないでやるには。

ブログを書くって事。

今よりちょっとだけクオリティを上げるために。

クオリティや効率を上げるために必要そうな事

何はともあれ、HTMLが最重要。

必ずlintは使うよーに。

デザインから要素を選ばないよーに。

サイト全体を見て、設計しなきゃ。

横幅も大事だけど、縦幅にも気を使って。

フォームには必ずlabel要素を使うよーに。

文字サイズを変えても崩れないよーに。

classとかを減らしたいからって、ガチガチに組まないよーに。

できるだけ汎用性の高いclass名をつけるよーに。

あまりにもCSSファイルを分割し過ぎないよーに。

読み込み中のことも考えて、背景画像を引いてても背景色の指定もするよーに。

class名に「clear」や「clearfix」は使わないよーに。

だからって、絶対に見た目を現すclass名がダメとは思わないよーに。

繰り返しの背景画像を小さく切り過ぎないよーに。

プロパティの指定順序は統一するよーに。

IEではまらないよーに。

確認を怠らないよーに。

あまり根つめすぎずにやるよーに。

何はともあれ楽しまないと損です！

コメント対応版 絵文字プラグイン（emoddy）

ダウンロード

基本的なインストール方法

コメントでemoddyを使用する

コメントを使いたいhead要素にCSSとJSを読み込ませる

コメント設定を変更する

コメントフォーム部分にemoddy表示用のソースを記述する

細かい設定など

絵文字画像の追加方法

絵文字画像のディレクトリ変更

システムプラグイン設定から変更する場合

各ブログのプラグイン設定から変更する場合

「emoddyタグを使用する」の使い方

コメント用の「emoddy_icons.js」の生成ディレクトリ変更

ライセンス

デジパ（株）オフィス移転のご連絡

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック クリエイターが身につけておくべき新・100の法則。

アイコンやサムネイルの横にタイトルと概要文があるような時。

サンプルのダウンロードとサンプルの確認

コメント対応版絵文字プラグイン（emoddy）

Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニッククリエイターが身につけておくべき新・100の法則。