今日、杉山さんと音声チャットしてるときに、福岡の人材の話になって、「自分がRSS購読してる人に福岡の人がいて、その人と一緒に仕事できたら楽しそう。」とURLを送ってみると、
なんと、知っている会社の社員の方のblogだった。
たまたま杉山さんが知ってたのだが。
ちゃんとblogとか書いてたり、情報発信してると、見てる人は見てたりするんだよなー。と実感。
今、ちょっとアレなのであんまり書けないけど、できるだけ書くようにしようっと。
月別: 2007年2月
Photoshop使用時の効率的なスライス
HTMLコーディングにおけるスライスの効率は、PhotoshopよりFireworskの方が断然上だと思ってます。
オブジェクトを複数選択して、ショートカットで一気にそのオブジェクトのサイズにスライスできますし。
しかし、画像を書き出す時のレンダリング能力という点では、やっぱりPhotoshopに軍配があがると思います。
微妙なグラデーション部分を両方のアプリケーションで書き出し比べたらわかりやすいかもですね。
Photoshopで新規ページをスライスする場合は、普通にスライスツールでやるのが効率いいと思いますが、
このパーツだけ書き出したいという時や、そのパーツに修正が入って書き出し直しが必要なときとかは、
スライスの代わりに切り抜きツールでトリミングして、別名保存して、Web用に書き出しした方がが効率いい気がしてます。
うまいことバッチ作ったら更に効率的かも。
リストタグの中に画像入れたけど下に隙間ができちゃったときの対処（IE6）
リストタグに画像を入れてナビゲーションバーにすることもあると思います。
※Daniel Nolan氏のImage Rollover Codeなどを利用する場合。
しかし、IE6では、画像の下に隙間が出来ちゃいます。
これは、確か画像がインライン要素で、行間をもってるからだったような・・・。
そんなときは、隙間ができちゃう画像にdisplay: block;するといいみたいです。
簡単な例は、下記の通りです。
■HTML
|
1 2 3 4 5 6 |
<ul> <li><a href=”#”><img src=”hoge.gif” alt=”fuga” class=”imgover” /></a></li> <li><a href=”#”><img src=”hoge.gif” alt=”fuga” class=”imgover” /></a></li> <li><a href=”#”><img src=”hoge.gif” alt=”fuga” class=”imgover” /></a></li> </ul> |
■CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
ul { width: xxxpx; height: xxxpx; } li { float: left; } li img { display: block; } |
NetScape7.1でbackground-position :0 bottom;に配置した背景が出ない
忘れがちなのでメモ
背景をボックスの下部に配置しようとして、下記のようなCSS書くこともあると思うんだけど、
なんでかNetscape7.1でbackground-position: 0 bottom;がダメみたい。
対応策は、0をなくして記述。忘れるなよオレ。
■Netscape7.1でうまくレンダリングしてくれない例
|
1 2 3 |
background: #xxx url(hoge.gif) no-repeat 0 bottom; |
■対応策
|
1 2 3 4 |
background: #xxx url(hoge.gif) no-repeat bottom; もしくは background: #xxx url(hoge.gif) no-repeat left bottom; |
SEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」
これまでは、RankQuest SEO Toolbarというアドオンをインストールしてました。
けど、高機能すぎて？よく使い方わかんないし、ツールバーの面積は取るしで、あんまし使ってなかったんです。
SEO専門の方には、いいのかも知れませんが。
SEO for Firefoxをk氏に教えてもらいました。
これは、切り替えもウインドウの右下のロゴで切り替えもできるし、いいっ！
GIGAZINEの記事よりSEO対策がFirefoxで簡単にできるようになる「SEO for Firefox」
Vim7のOmni補完の候補の選択
今まで、Omni補完の候補を選択するとき、矢印キーとか使ってたんだけど、EmacsとかCocoaアプリみたいな、キーバインドが効くんだ。orz
↓：C-n
↑：C-p
HTML.vimでVimでのHTML編集が楽になる
最近、Vimが良いとの事で、使い始めたが、正直なにがいいのか？今ひとつピンと来てなかった。
前のエントリーでclosetag.vimについて書いたが、基本的な使い方がわかってなかったorz
Vim使いの人は、HTMLの編集には、HTML.vimとか使ってるんだな。
オレのVim環境は、杉山さんに作ってもらった環境なんで、HTML.vimはインストールしてあったけど、Last modified: Jan 03, 2007 ってなってたので、最新のファイルをダウンロードした。
ダウンロードしたファイルを開いて、サイトに書いてある通り、『:source %』って入力したら、自動でインストールできた。スゲ。
これで、filetypeがこのプラグインが動く状態になっていれば、HTMLの編集は、かなり楽になるはず。
ちなみに、オレの環境はfiletypeはhtmlでもxhtmlでもプラグインは機能してるみたい。
あとは、HTML.vimのヘルプテキスト見ながら、;○○っていうのを打ち込めば、タグが勝手に出て来て、その時のカーソルの位置もいい感じ。
例えば、;af って打てば、↓ここまで出て来て、カーソルは””の中間に来てる。
しかも、ショートカットの設定というか、キーのマッピングが直感的にわかりやすい。
知らなくても、これかな？って打ったら出てくるじゃん。
こりゃちょっと慣れたら、Dreamweaverより早いな。
次はCSSファイルだな。
構造のマークアップなしでフロートをクリアする方法（clearfix）
前のエントリーでクリアツールについて、書いたんですが、別の方法もあります。
構造のマークアップなしでフロートをクリアする方法
思い出してみれば、Movable Typeの3.2のデフォルトcssを見て、なんだろーなーとは思ってたw
探したら、その当時から解説してた方もいらっしゃいますね。しかもわかりやすい！
最近はIE7も気になるのですが、やっぱり同じような記事もありました。
clearfixハック
【IE7対応clearfix】さらに続報、コピペでつかえる主要ブラウザをclearするコード、[多分最終版]
これまた以前のエントリーで紹介したYahoo! UI Library Grids cssこのページのQuick Links:の Download:からパッケージをダウンロードしてみるとわかるのだが、build/grids/grids.cssにも似たような記述の部分もある。
しかし、clearfixもホーリーハック使ってあるし、grid.cssもdivを入れ子にしないと、マージン／パディングは無理そうだしな。
んー要は使いどころですかね。
css3では、もっと簡単になったり、便利になったりしないかなー。
葬儀に参列
親戚の葬儀に参列させてもらった。
毎度のことだが、葬儀に参列すると、人生についてのこととか、豊かさとは？とか考えさせられる。
日々大事にして生きて行かないとなー。
Yahoo! UI Library
これもg氏に教えてもらったネタ。
知ってる人は知っている、Yahoo! User Interface Library
その中で、YUI Library CSS Toolsは下記の通り。
Reset css
Fonts css
Grids css
Grids cssについての日本語の解説は、phpspot開発日誌 Yahoo!が提供するレイアウト用CSSライブラリがわかりやすかった。
Yahoo! UI Library Grids CSSを使ってページレイアウトこのページも凄くわかりやすい。