Category Web Archive

title属性の使い方

Posted by poundhound on December 20, 2008

先日Twitterで問いかけた所色々な意見が出たtitle属性の使い方について少々まとめてみることにしました。事の始まりはh1を画像で表現したい場合、どのようなマークアップが良いのだろうか?と言う問いかけが発端です。

title = text [CS]
この属性は、当該要素に関する助言的情報を提供する。
文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。

要するにW3Cの仕様では要素に大して補足的な説明が必要な時に使用する属性な訳です。

Read more

Categories:Web Tags:

Comment(0) | Trackback(0)

IE6はアナログ...

Posted by poundhound on December 15, 2008

CSS Happy Lifeさんの記事で面白いのがあったので僕もやってみました。IE6で閲覧するとヘッダーに『アナログ』が出るというもの。

画像も使わせていただきました。

CSS Happy Life 『IE6で閲覧すると。』

Categories:Web Tags:

Comment(0) | Trackback(0)

head.jpg

2エントリー連続でPhotoshop関連になります。今回は左のような見出し画像を書き出すリソースファイルを変数を使って管理します。

このような見出し画像を作成する場合、通常だと背景画像レイヤーを複数枚と見出し名テキストレイヤーを大量に作らなければなりません。私も今まではテキストレイヤーだらけになっていました。このような余分なレイヤーを作らないでリソースを管理出来る方法が変数を使ったリソース管理法になります。

簡単に変数を使った管理法の説明をすると、背景画像レイヤーを数種類用意し、日本語名の見出しと英語名の見出しはCSVファイルで管理すると言う方法になります。

それでは詳しく説明をしていきます。

Read more

Categories:Web Tags:

Comment(0) | Trackback(0)

Photoshopでのスライス作成

Posted by poundhound on December 9, 2008

slice01.jpg

わが制作チームのデザイナーLovwar君が中々ナイスなテクニックを開発してブログに掲載していました。あまりにもナイスで自分向けにカスタマイズして自分用アクションを作成してみました(パクリ)。

slice02.jpg

Lovwar君のアクションは選択範囲を指定してアクションを実行するタイプですが、私のは最初にアクションを実行して途中で中止を入れるタイプです。

ステップは左の通りでレイヤー名とスライス名を入力するために途中でダイアログを出します。まず最初にレイヤー名を入れるのですが、入れたあとにレイヤー名をコピーし、スライス名入力の時にペーストしてレイヤー名=スライス名にします。


slice03.jpg

このアクションでスライス作成を繰り返します。最後(最初でも可能)ですがスライスフォルダを作ってまとめてしまいます。例えば左の図のような感じです。これでレイヤーを見ればどのスライスかが一目瞭然になります。

けれどもやはりLovwar君のエントリーにあるように、ボタンパーツなんかはスマートオブジェクト化してしまってから[レイヤー]→[レイヤーに基づく新規スライス]を実行した方が遥かに便利だとは思います。

スライス作成Photoshopアクションのダウンロード

Categories:Web Tags:

Comment(0) | Trackback(0)

WTFramework bookmarklet

Posted by poundhound on November 13, 2008

WTFramework bookmarklet

これ中々面白いです。サイトで利用しているJavascriptライブラリを確認出来るブックマークレット。

例えばアップルのサイトではPrototype1.6.0.2とScript.aculo.us1.8.0、VAIOのサイトだったらjQuery1.2.2なんて感じで表示されます。

使い方は簡単でブックマークツールバーなどにブックマークレットを設置しておくだけ。

ちょっと見てみたらAmazonはjQuery、flickrはYUI、mixiはPrototype、Last.fmはPrototype+Script.aculo.us、キヤノンはjQuery、DELLはjQuery、SoftbunkはjQueryとなってました。結構jQuery率高いですね。

WTFramework bookmarklet

Categories:Web Tags:

Comment(0) | Trackback(0)

CSS Nite in Ginza, Vol.26 参加しました

Posted by poundhound on September 19, 2008

pmbok.jpg

今月から再びマンスリーになったCSS Nite in Ginzaに参加してきました。LP, Disk 4に参加出来なかったので、今回のスピーカーである林 千晶さんの内容に期待していました。

セミナー内容はとてもすばらしいものでした。何がすばらしいかって?これが話し方や考え方、全てがすばらしかったのです。ディレクションの勉強ついでにプレゼンの勉強もさせてもらいました。

アウトプットが重要、グレーゾーンのスコープをいかに少なくするかなど大変参考になり、これは本も読まねばと思い、林さんの著書であるWebプロジェクトマネジメント標準を買って来ました。

林さんが「この本には人柄が出ていると言われてとても嬉しかった」と語っていましたが、セミナーのスライドや話し方にも人柄が出ていたのが印象的でした。

私はWebの知識は共有するものであり、積極的にシェアしていくと言うスタンスを取っていますが、こういったプロジェクトマネジメントの知識がPMBOK( ピンボック)と言う形でシェアされているのは知りませんでした。「アウトプット」したものを「インプット」して「フィードバック」を受けてさらに「インプット」すると言う言葉を聞いた時に自分の考えは間違ってないなと確信し、これからもどんどんアウトプットして行かねばと思った瞬間でした。

Categories:Web Tags:

Comment(0) | Trackback(0)

Photoshop和訳

Posted by poundhound on August 19, 2008

覚え書き。

■選択範囲 (select)
Modify (選択範囲を変更)
Contract (縮小)
Expand (拡張)
Feather (境界ぼかす)

Read more

Categories:Web Tags:

Comment(0) | Trackback(0)

またまたDreamweaverテンプレートネタです。

Dreamweaverのテンプレートでは三項演算子が使えます。三項演算子とはある条件が一致した場合は左の値、それ以外は右の値を実行する演算子です。記述方法は@@((条件)?'真の時実行する値':'それ以外の場合実行する値')@@と言う形です。

今回はDreamweaverのリピート領域を使ってQ&Aの部分をテンプレート化します。まず以下のような条件のテンプレートを作る事にします。

1.質問と回答を編集可能とする。
2.質問、回答に連番を振る。
3.5項目おきに"このページの一番上へ"のリンクを表示する

Read more

Categories:Web Tags:

Comment(0) | Trackback(0)

My Tweet

    @poundhound

    Google Adsence

    • Movable Type 5 Webサイト作成ガイドVolume 1