HTMLコーディングTIPSブログ－ぜんぶのせ－

最近一緒にお仕事をさせていただいた会社の方から、
素敵なプレゼントを頂きました。

本当にありがとうございます♪
さっそくみんなでいただきました。

フレーバーティーの香りが会社に広がり、
おしゃれなカフェで仕事をしている気分でした。

あけまして おめでとうございます
本年もよろしくお願いいたします。

昨年の大きな出来事といえば、
牧野工房のノウハウを詰め込んだ、
「XHTML&CSS 超高速コーディング術」大藤幹 著者
が出版された事です。

研修生の時に教わったことや、
いつもやっている業務のことが中心に書かれていますが、
改めて文字になったものを読むと、
また違った気付きがたくさんありました。

twitterなどでも取り上げている方がたくさんいて、
ついーとを見るのが楽しみの一つになってますw

本の意見や感想などあれば、
ぜひぜひコメントをお願いします♪

今年は更新回数を増やして、
細かいトピックスや何でもない話など、
どんどん書いていきたいと思っています。

よろしくお願いします！

IE 8正式版のダウンロード開始
これはチェックしとかないとね。

画像をCSSだけでハイクオリティに縮小サムネイル化する方法
使うこともあるかも知れないから、さらっと頭に入れておこう。

CSSで実現する様々テクニック集「35+ very Useful And Powerful CSS techniques」
マークアップ的にどうなのよ？ってのもあるけど、頭を柔らかくするために、ソースをチェック。

The Enkoder Form
メールアドレスをエンコードしてJavascriptで吐出してくれる。
スパム対策に。

IE6/7/8, Fx, Op, Safari, Chromeを同時に起動できる -Xenocode Browser
VistaでもXPでもIE6/7/8rcが同時起動できる。

hasLayout を false にするには
IE6の例のアレ。再確認しときましょう。

以下、Javascript 関連。

伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」
Flashっぽい感じにできちゃいます。
何かの拍子にぱっとこんなのもありますよ！って提案できるといいですね。

jQueryを使い要素の出てくる順に番号をつける方法（forの代わりにeach()を使う繰り返し）
ちょっとJavascriptができるようになってくると、繰り返しで詰まると思います。

会社で、後ろの席 (システムチーム) の人が便利そうなものを作ってました
form周りの設定。こんなケースが出てくるかも。

2/1（日）にコーディング勉強会を開催しました。

牧野工房のコーディングを教え、実際に参加者の方にやっていただくというもので、サイト制作の際の基盤となるヘッダーやナビゲーションなどのテンプレート部分を作りました。
内容自体はなかなか成功と言えると思いますが、講師を務めた私のMCというか進行系の話がぐだぐだでしたね・・・。
技術の説明になればイケルんですが、どーも・・・汗
この辺ももうちょっと経験をつんでいきたいです。
ジツは今回、なんとあの大藤幹さんが見に来てくれました！
連絡をいただいたときは、うれしいけど怖いみたいな複雑な気持ちでしたが、すごい高評価をいただけてうれしかったです。
ただ、プロパティの読み方をツッコまれちゃいました。
内々でやってる分にはいいですが、人に教えるとなると、その辺もしっかりしていかないと駄目ですね。
著書も2冊もいただきました！

• 基本からしっかりわかる Movable Type 4.2
• Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻

この他、参加者の方など以下のサイトでも取り上げていただきました。

• コーディング勉強会の参加　－ SOHOの3%ルール
• コーディング勉強会の参加　－ くずWebデザイナーのなれの果て

EXCELをHTMLのTABLEに変換するjQueryプラグイン

CMS使うサイトで良さそうだ。

ちょっと最近の風習に習って。

1. スクロールしてみる
   (特にIEで)背景が出たり出なかったりするときがあるよ。
   ポジションの設定間違いでスクロールすると残っちゃうときもあるよ。
   横スクロールも試してみて！
2. ウインドウサイズを変えてみる
   特に小さくしてみると、カラム落ちや文字が被ったりしちゃわない？
   ポジションなんかの関係でちらつきや位置のズレが出ることもあるよ。
3. デザインとみくらべて差異が無いか
   デザイナーが試行錯誤して作り上げたデザインだよ。
   ちょっとしたアウトラインの揃え方にもこだわりがあるかもしれないよ。
   更新性を考えたらそっくりそのままじゃない方がいいこともあるけど、細かなところも見てあげて！
   特にクリアの後の余白がブラウザによってずれてる時があるよ。
   リストやポジションやフロート周りでは変な余白が出ちゃう時があるから気をつけて！
4. マウスオーバーしてみる
   ちゃんと動いてる？
   プレロードを忘れてない？
   オーバーすると続く要素が崩れる。なんて現象もあるよ。
5. クリックしてみる
   特にスクリプトを使った場合はブラウザによって動かなかったりもするよ。
   Firefoxではアウトラインがでるよ。はみ出してない？
6. ステータスバーを確認する
   読み込みがちゃんとされてる？
   文字コードがちぐはぐだとCSSが読み込まれないことがあるよ。
   Javascriptにエラーがあるとずっと読み込み中だったりするよ。
   スクリプトエラーのマークは出てない？
7. フォントによってくずれないか
   ヒラギノやメイリオはMS Pゴシックより文字幅が広いよ。
   場所によっては一文字だけ落ちちゃってるかもしれません。
   特にメイリオはCSSで背景に設定した画像がずれちゃってる時があるよ。

インフルやら法用やらで、年明け3日目の出社デス（汗

http://sourceforge.jp/magazine/09/01/09/0516247
Firebugがバージョンアップ。
最近あんまり使ってないけど。。。

http://www.440design.com/2008/01/13/ie7js/
なんかすげえjsライブラリ出てきた！

http://coliss.com/articles/build-websites/operation/javascript/accessible-news-slider.html
jQueryで横にスライドするユニット。

http://journal.mycom.co.jp/news/2009/01/08/058/index.html
IE8への自動更新ブロック。
てか、IE8のシェアってもうOpera超えてるの!?

http://journal.mycom.co.jp/news/2008/11/06/046/
GIF、PNG、JPEGの使い分けについて。
割とわかりやすいんぢゃないかな。

http://journal.mycom.co.jp/news/2008/12/19/007/index.html
透過PNGについてリンクを辿ればいろいろ。
↓がよさげ？
DD_belatedPNG
http://www.dillerdesign.com/experiment/DD_belatedPNG/

http://journal.mycom.co.jp/news/2008/12/19/005/index.html
1サイトにスタイルシートを複数用意しておいて、
ユーザーに選ばせる方法がIE8によってとられるようになるかも。

http://journal.mycom.co.jp/news/2008/12/05/033/index.html
CSS3で今のコーディングが楽になっても、HTML5でいろいろ出来ることが増えちゃったら、今のコーディングは大分変わってマークアップエンジニアに必要なスキルは増えちゃうのかな。

http://builder.japan.zdnet.com/news/story/0,3800079086,20385937,00.htm?ref=rss
ウチでやってる分には世間で騒がれているほど、IE6対応ってむずかしいと感じないよね。崩れにくい方法で最初から組んでおけばいいだけ。

http://www.100shiki.com/archives/2008/12/pxempxtoem.html
pxとemを変換。計算不得意なら重宝かな。

http://gihyo.jp/design/column/01/standard/2009/view01
マークアップによる意味づけがもっと重要視されて、アクセシビリティにもどんどん注目が集まるようになっていくのかな。

http://www.yomotsu.net/lab/css/tips_print-icon
印刷で背景をどうしても出さないと駄目になったら使えるかも。
重くなりそうだけど・・・。

CSS 3のセレクタ「:nth-child()」の問題を回避する方法と応用例

div.section:nth-chid(odd) h2 {background:#CF6;}

＜div class=”section”＞
＜h2＞見出し＜/h2＞
＜p＞本文本文本文本文本文本文本文＜/p＞
＜/div＞

＜div class=”section”＞
＜h2＞見出し＜/h2＞
＜p＞本文本文本文本文本文本文本文＜/p＞
＜/div＞

＜div class=”section”＞
＜h2＞見出し＜/h2＞
＜p＞本文本文本文本文本文本文本文＜/p＞
＜/div＞
こんな感じじゃ駄目なんだろか。
こっちのが使い勝手いいような。

フォームのズレだって許せない！　リセットCSSをアップデート

こんなの作っとかないとなあと思いつつ、後回しになってたので、時間があるときに参考にする用にメモ