カラム落ちとか自分のコーディングとかの話 先日の自分もプロパティの書き順とかのエントリに頂いたブクマコメントでこういうのがありました。forestkさん、コメントありがとー。 padding, margin が width, height の側に無いと調整してたら 「カラム落ちした！どこ？どこのサイズがでかいん！？」 とかならないですか？ 結論から言うとならないようにしてます。というか、後からwidthをいじる必要がないように計算機使いながらやってます。探さなくていいように紙も使ってます。 せっかくなのでその辺り含めて、カラム落ちやコーディング手順について書いてみようかなと思いました。（前にもちょっと書いた記憶があるけど） ボックスについて カラム落ちって外枠のボックス自体に問題がある場合と中身に問題がある場合の2パターンあると思うんですが、まずボックス自体について。 頭の中の前提 2段組

Fireworks ショートカットコンボ(追記有) あまりにも放置気味なので何か更新しようかな、ということで、よく使うFireworksのショートカットコンボでも。 >>080912：パスパネルについて追記しました。 最前面のオブジェクトでマスクするショートカットコンボ 例えばこんなん。適当な背景の上にオブジェクトを乗せてマスクする時。 テキストにフチ線がついてるのは白背景だと分かりにくいからつけただけ。とりあえず重ねる。 いくよっ！ 「Alt+M」→「M」→「G」 （「修正」→「マスク」→「マスクとしてグループ化」） さぁ！みんな声を出して覚えて！ (n'∀')η＜オルト　エム　エム　ジー！ 最前面のオブジェクトでマスクの小ネタ え？こんなの誰でも知ってるって？ んじゃ･･･これを合わせて知ってると便利だよ！ 最前面のオブジェクトでマスクする時はオブジェクトを半透明にして合わせる位置を確

Firefox3とFirefox2のselectの幅 そんなこんなで共存することにしたFx3とFx2なんですが、さっそく共存させてよかったと思った事がありました。 今コーディング中のサイトでこういう見た目にしたいデザイン部分があったんですよ。単純にリストをfloatさせてselectを横並びにしたいーみたいな。 幅違うやん！って気づいた。 これ、Fx3とFx2でselectの幅、若干違うんですね。知らなかった。CSS関連のネタは見たけど部品の違いなんて気にもしてなかった・・・。上のできあがり見本の画像はサンプルだからアレなんですが、実際のデザインにはその部分にも背景画像が入ってて、セレクト周りの幅でうまくコントロールしないと背景からはみ出てアワワ・・・みたいな感じになっちゃってました。一瞬びっくりした。 >>一応確認用のサンプルはこちら 最初もしかしてフォーム周りのmarginだかpadd

Firefox3 文字化け問題・その後(解決済) >>081107：追記:解決しました！！ 先日話題のFirefox3をインストールしました。「めっちゃ早いやん！」と感動しまくってたんですが、1つ問題が。今までFirefox2で何の問題もなく閲覧できてたサイトの一部のサイトが意味不明な文字化け状態で表示されてしまうという現象が起こりました。 具体的なサイト名を挙げるのはちょっとアレなのでぼかしますが、自分がいつも楽しみにしてるサイトなのでちょっと困りました。そのキャプチャがこちら。ごじゃごじゃと書き込んでしまったのでわかりにくいんですが、タイトルは文字化けしてない状態（当然タブも同じく正常です）で、コンテンツの本文がすべて意味不明文字になってます。 単なる文字化けならエンコードを変更すればいいって話なんですが、「表示」>「文字エンコーディング」を確認すると問題なく合ってるという状態でした。

CSS3 :target擬似クラスでイメージギャラリー 最近CSSネタも出尽くした感じで自分でもなかなかこれ面白いよ、と書ける新鮮なネタもないので、海外のサイトで見かけて面白かったものをご紹介。 普段クリックして画像を差替えるイメージギャラリーっぽいものを作る際はjavascriptを使ったりする事が多いんだけど、こちらの記事でCSS3の「 :target」を利用したイメージギャラリーの話が書いてありました。 >>Making an image gallery with :target - CSS3 . Info 内容はimgに対してまずposition:absolute;を指定しておいて、各リンクをクリックした時に:targetの該当img要素に対してz-indexで最前面に配置する、というもの。 ソースやサンプルページはそちらにあるので、そっちを見たほうが早いと思うんだけど、:targ

XAMPPでMTOSを動かしてみる 少し前にMovable Typeのオープンソース版の話題の記事を見かけて試してみようと思ってた。今日はそれを手元にインストールしてみる。実はまだこのブログのMTは3系のままでバージョンアップしてないんだけど、MTOSはMT4系の特徴を持ってるということなので、ちょっとローカルで動かしてみて様子見ようかなと。MTOSについては下記サイトに詳細書いてありました。 >>MTOS: Movable Type オープンソース・プロジェクト | MovableType.jp MTOSのダウンロード 上記サイトでMTOS本体は一体どこからダウンロードするんだろうと、結構ウロウロしてたんですが何とか発見。英語のページからしかダウンロードできないっぽい(?) >>Welcome to the Movable Type Open Source Project 上のページの一

Re:この業界、この職種に対して思っていることをありのままに。 CSS HappyLife の平澤さんのこちらの記事を拝見してグっときました。 >>この業界、この職種に対して思っていることをありのままに。 「だから、俺ってすげーんだぜ！って事考えてみた。」以降が特にグっときた。 1pxのズレに気づく事が出来るのも俺たちだけ。 そうだそうだ！ デザイナがカッチリ作ってくれたデザインの水平ナビゲーションなんかでも全部同じ幅なのかと思ったら1つ目と3つ目は1px大きくて4つ目だけ2px小さいとか気づくのは私だけだ！CSSで余計な記述増えるのめんどいからこっそり直す事もあるけど！ 明らかに同じ構造のページなのに、気まぐれなのかうっかりなのか意図しているのか分からないけど、デザインが違うって気づけるのも俺たちですよ。 そうだ！そうだ！ 敢えてそこはスルーしたりもする事も多いけど！ デザインを汲み取る

Photoshopで人物を若返らせる方法 今日更新するのはいつも書いてる私、Redじゃなくて、忘れた頃にやってくるGreenさんです。久々すぎて覚えてる人は少ない気がしますが、一応このブログ、デザイン的な話はGreenさんが書くとかいう話がかつてあったんですよ。 （参考：>>メンバーが増えました 2007年03月05日） ということで、気を取り直して・・・。 ちょっと「こういう写真加工ってどうしてるのかな？」って気になる事があったので、PhotoshopマスターであるGreenさんに質問してみました。 教えて！Greenさん！の巻 今回Greenさんに聞いたのは、写真の人物の皺消したりっつーのはスタンプツールでちょいちょいとやることが多いんですが、もっと全体的に若返らせるのはどういう加工するのかなっていう話。教えてー！ということで、サンプルを元に実際の処理手順を解説してくれました。以下Gr

半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ

Fireworksのスライスガイドって 消せるんですね。今初めて知りました…orz 多分きっとこんなのって初歩的な話だよね。４年間もFWを愛用してるのに全然知らなかったわ。 スライスガイド消し方 まずデフォルト（スライスガイドあり）の状態。スライスが増えてくるとガイド線のせいで画面が見にくくなる（と、私は思ってる） 上部メニューの「画面表示」>「スライスガイド」にチェックが入っているのでそれを外す。（そこクリックする） 関係ないけど「スライスのオーバーレイ」って何？そこいじっても特に何も変化しないんやけど。何だろ、これは。 スライスガイドのチェックを外すとこの通り、スッキリ。 スライスガイドなくてもピタっとくる オブジェクトをクリックして「Shift+Alt+U」じゃなくて、ピンポイントでスライスガイドに沿ってスライスを作りたい時もあるじゃないですか。そういう時スライスガイドがあるからピタ

PCを出荷状態に戻してみた 最近メインマシンの調子がすこぶる悪く(悪くしたのは私なんですが)、これはもうOSの再インストールですか？とか思いつつもなんだか面倒で放置気味にしてた。どのくらい具合が悪いかといえば普通に「スタート > 終了オプション」でシャットダウンできない程度。 少し前にちょっとしくじった事件があって、レジストリをおかしくしてしまったんですよね。自業自得。「スタート > 終了オプション」に触れようもんなら即時に固まるという恐ろしい現象をさけるべく、別の場所からシャットダウンをしていたものの、やっぱり習慣で気がついたら「終了オプション」にマウスが乗ってて「アアァァァァーーーーまたやってもた…」みたいな事を繰り返すうちに再インストールの存在が大きくなっていきました。でも面倒なのでしばらく放置。 と言ってるうちに連休じゃないですか。クライアントも休みじゃないですか。これはチャンスじ

IE7のフォント絡みでこんな話があった Twitter経由でこんなCSSのフォントサイズに関するバグを教えて頂きました。（バグと呼ぶのか、仕様と呼ぶのかは分かりませんが）発端はfloralさんのこの発言。 IE7で検証した？http://redline.hippy.jp/lab/css/bodyfontsize625.php 以前このブログで書いたこの記事。 >>RedLine Magazine : bodyにfont-size:62.5%を指定すると･･･ 内容はbodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなるよというものでした。 そしてその記事に対して前述の通り、floralさんのポストからIE7だとなにやら

気になった初期化CSS コリスさんの記事でブラウザのデフォルトスタイルを初期化するCSSのサンプルが多数掲載されていました。 >> [CSS]ブラウザのスタイルを初期化するスタイルシートのサンプル集 | コリス 初期化する内容やどこまで初期化しておくのかは案件ごとのデザインなどによってケースバイケースだったりして、完全にこれが私のリセットCSSですと言えるものはないのだけれど、それなりにいつもだいたい使いまわしている自分のリセット部分のソースと見比べて考えてみた。いろいろと拝見して気になったものが2つあったのでメモ。 select option に paddingを指定する 予めブラウザのデフォルトスタイルを全称セレクタ（*）なんかで一気にpaddingを0に指定してしまうと、Fxなどの一部のブラウザでだけのようだけど、selectのoptionの右端が下向き矢印マークで隠れてしまうことが

気になるMODxを試してみる MODx(モドエックス)とは、PHPとMySQLで動作するオープンソースのCMSツールの1つです。オープンソースのCMSといえばXOOPSなどが有名ですが、ちょっとMODxに興味を持ったので試しに使ってみます。MODxについての詳細は下記リンク先をどうぞ。 MODx Content Management System（英語） MODx - Wikipedia(日本語) まだ日本ではそこまで有名でもないみたい（？）で、解説サイトがあまり多くはないんですが面白そうなので挑戦。参考サイトは上記 Wikipedia に記載されています。 MODxの特徴 インストールが簡単 Ajaxを取り入れた使いやすいインターフェイス 階層管理が簡単（ツリー形式で分かりやすい） 見た目は静的なURLでページを生成できる 標準の文字コードはUTF-8。eucやshift_jisの言語フ

変な定義リストをスッキリさせたい 随分前の話になるんだけど、別の制作会社のスタッフがコーディングしたコンテンツの中でdl（定義リスト）が使われてる部分があった。意味的にその場面で定義リストを使うのは間違いじゃないと思うし、それは問題ないんだけれど、少しソースに違和感があった。今日はそれを書いてみる。 何に違和感があったのか 私が違和感を感じたのはこういうソース。（内容は架空のものに差し替えてます） <dl> <dt>開催日時</dt> <dd>2007年8月18日</dd> </dl> <dl> <dt>開催場所</dt> <dd>日本のどこかの県のどこかの市</dd> </dl> <dl> <dt>参加費用</dt> <dd>1,000円くらい</dd> </dl> 何が違和感かって、定義リストで同じグループのものって普通1つのdlの中にdtとddを並べれば済むんじゃないの？と。そのマー

油断大敵 focusさん WindowsにSafariがインストールできるようになって、試してみた方もいらっしゃると思いますが、自分もSafari3を入れてみました。お友達に「Safari3では検索ボックスは酷くなかったね」と前回発覚した「検索フォーム続編：Safari だと酷すぎる」問題がバージョン3では解決している旨を聞いて安心しきっていたのですが、別のひどい事態が発生していることを教えてもらいました。（ありがとうございます！） それがこれ。 そういえばSafariではブルーのアウトラインが出るんでしたね・・・。input周りをCSSでいじいじしてしまったが故の弊害です。以前Safariで見た検索ボックス部分のキャプチャをとって頂いた時の画像がこれなんですが、 今回バージョン3で背景画像は入るようになったものの、focus時の枠線も自動的にそのデカさになる、と。考えたら当たり前の事です

CSSで文字サイズに画像サイズを合わせる テキストサイズの可変に伴いCSSで画像サイズを変更する方法を３つ。 まずサンプル。 >>文字サイズに画像サイズを合わせるのサンプル 説明･･･はサンプルページを見れば何がしたいのか分かるような気もするけど一応書いてみる。どのパターンも単純に大きめのサイズに書き出した画像を用意してどう表示させるかcssで指定してるだけ。 パターン１の場合 パターン１はcss側で表示したい画像を背景画像として指定。幅や高さはemで指定することによって文字サイズの可変に合わせてでっかくなったりちいさくなったり。元画像を縮小拡大しているわけではなく、見える範囲が大きく小さくなるだけなので画質が汚くなるってこともない。 <p class="resize_image01">女の子の写真ですよー</p> .resize_image01{ float: left; width:1

ボックス全体をリンクにしたい まずはこちらの発想の元ネタのサイトの紹介。 Link Boxes (Ask the CSS Guy) やりたいことは上記ページの上部の画像のように、見出しやテキストを置いている部分をリンクボックス化したいという主旨。マークアップや正しい書式にこだわらないなら簡単にできるのだが、ちゃんとした事をしたい人向けのTips。 ※以下のソースは上記サイトからの引用です。 上記サイトの言いたい事を簡単な日本語にして主旨だけ書きます。 ※訳とかまとめ要らないという方はその先に「それ、jQueryでやってみる」とか書いてみたので良かったらそちらへ進んでください。 まず中身はこんな感じ。見出しとテキスト。 <h2>About Us</h2> <p>How my life story became a Hallmark movie.</p> これらをボックスにしてリンクを付けたけ