みなさま新年あけましておめでとうございます。ブログを始めてから5回目の年越しとなりました。早い物です。今年も宜しくお願いいたします。
毎年近所の氷川神社に初詣に行っておみくじをひいているのですが、今年は末吉で、内容を見るとこれが中々良い感じでした。
さてさて、今年も何も買ってませんが(笑)、物欲大王が刺激されているものが2点。
前者は年末にビックカメラへ行った時に試聴して一気に欲しくなりました。iTunesから聴く時にはもってこいな感じですがAmazonのレビューを見たら電源のオンオフが無いとあったのでちょい悩んでしまってます。値段は手頃なんですよね。
後者はそろそろテレビがやばくなってきたので買い替えのタイミングを見計らっている所ですが、300GBの録画が出来てこの値段、さらにデジタル、アナログチューナーが２発あるのが魅力。家電店でも11万代＋ポイント還元になってるので一気に欲しいモードにはなってます。
いや、テレビの買い替え時期って非常に難しいですね...と今年も物欲ネタでスタートの当ブログでした。
先日Twitterで問いかけた所色々な意見が出たtitle属性の使い方について少々まとめてみることにしました。事の始まりはh1を画像で表現したい場合、どのようなマークアップが良いのだろうか？と言う問いかけが発端です。
title = text [CS]
この属性は、当該要素に関する助言的情報を提供する。
文書全体に関する情報を提供し1文書に1度しか出現し得ないTITLE要素とは異なり、 title属性は幾つの要素に現れてもよい。 ある要素がtitle属性をサポートしているかどうかについては、当該要素の定義を参照されたい。
要するにW3Cの仕様では要素に大して補足的な説明が必要な時に使用する属性な訳です。
FirefoxやOpera、Safariはalt属性をツールチップで表示しないため、alt属性と合わせてimg要素なんかにtitle属性を併記する使い方は間違ってると言う事になりますね（そもそもあまり使われてないか...）。
例えば不動産の情報を提供している○○ハウジングがあったとします。画像で出来たロゴがh1要素でマークアップされています。またこの画像はa要素でマークアップされてます。この場合はどのようにマークアップすべきか？
私の考え方だと以下のマークアップがベストのような気がします。
<h1 title="不動産情報を提供している○○ハウジングのウェブサイト"><a href="index.html" title="○○ハウジングウェブサイトトップに移動します"><img src="logo.gif" alt="○○ハウジングロゴ画像" /></a></h1>
h1にtitle属性を入れたのは画像はあくまでもロゴであり、見出しとなるh1要素本来の意味が伝わらないと解釈したからです。a要素にはこのリンクが何を意味するかの補足説明をtitle属性で入れる必要があるでしょう。ちなみにこのマークアップでツールチップに表示されるのはa要素のtitle属性になります。
このようにコーダーが考えてしまうようなケースは作業の遅れにつながるのできちんとガイドラインに入れるべきではないでしょうか？
CSS Happy Lifeさんの記事で面白いのがあったので僕もやってみました。IE6で閲覧するとヘッダーに『アナログ』が出るというもの。
画像も使わせていただきました。
本日プリント用CSSをゴリゴリと書いていました。その時2つほど問題になった点があったのでメモ代わりに書いておきます。
まず一つはナビゲーションやバナーが表示されているサイドバー（div#secondary）をdisplay: noneで消しました。このサイドバーはdiv#secondaryで定義してあり、中にdiv.localNavが定義されています。その下にバナー群がpタグで定義されていますが、Firefoxのプリントプレビューではきちんとサイドバーが消えてくれるのですが、IE6では何故かバナー群が消えてくれません。なのでdiv#secondaryの子要素を消すためにユニバーサルセレクタを使いました。
div#secondary * { display: none; }こいつでIE6でもサイドバーが非表示になってくれました。
次に問題になったのがdivごとに改ページされてしまったのです。メインコンテンツ部はdiv.sectionで各ブロックを定義してあり、簡易clearfixとしてoverflow: hiddenを記述していました。こいつが悪さをしていたのです。なのでoverflow: visibleで上書きしました。
div.section { overflow: visible; }これで印刷用CSSで奇麗に印刷出来るようになりました
Mac miniの時に購入したPrincetonのHDD 250GBがパンパンになってしまったので新たなる外付けディスクの購入を検討。Front AttackやTwin SATANは色々調べたら音がうるさいとの事で却下。結局LaCie d2 Quadra 1TBを購入。ファンレスなので（またファンレスを買ってしまった）音は静かだし値段も26500円とお手頃で満足。
この所Gunsブームの勢いでドライブ名をSlash(メイン900GB)、Izzy（サブ100GB）にしてしまいました。
Princetonのディスクのパーティションを1つにするためにSlashにデータを移動し、フォーマットをかけディスク名をAxlにしました。さらにI-O DATAの160GBをDuffにしました。
あとはStevenを加えれば初期メンバーがそろう...
2エントリー連続でPhotoshop関連になります。今回は左のような見出し画像を書き出すリソースファイルを変数を使って管理します。
このような見出し画像を作成する場合、通常だと背景画像レイヤーを複数枚と見出し名テキストレイヤーを大量に作らなければなりません。私も今まではテキストレイヤーだらけになっていました。このような余分なレイヤーを作らないでリソースを管理出来る方法が変数を使ったリソース管理法になります。
簡単に変数を使った管理法の説明をすると、背景画像レイヤーを数種類用意し、日本語名の見出しと英語名の見出しはCSVファイルで管理すると言う方法になります。
それでは詳しく説明をしていきます。
わが制作チームのデザイナーLovwar君が中々ナイスなテクニックを開発してブログに掲載していました。あまりにもナイスで自分向けにカスタマイズして自分用アクションを作成してみました（パクリ）。
Lovwar君のアクションは選択範囲を指定してアクションを実行するタイプですが、私のは最初にアクションを実行して途中で中止を入れるタイプです。
ステップは左の通りでレイヤー名とスライス名を入力するために途中でダイアログを出します。まず最初にレイヤー名を入れるのですが、入れたあとにレイヤー名をコピーし、スライス名入力の時にペーストしてレイヤー名＝スライス名にします。
このアクションでスライス作成を繰り返します。最後（最初でも可能）ですがスライスフォルダを作ってまとめてしまいます。例えば左の図のような感じです。これでレイヤーを見ればどのスライスかが一目瞭然になります。
けれどもやはりLovwar君のエントリーにあるように、ボタンパーツなんかはスマートオブジェクト化してしまってから[レイヤー]→[レイヤーに基づく新規スライス]を実行した方が遥かに便利だとは思います。
