娘が小学二年生になり、みまもりケータイ2を買い与えました ishida です。 娘がケータイのボタンを押すたびに、位置情報が送られてきて便利なのですが、 電話をかけたときにも、位置情報がメールで送られてきてちょっと通知頻度高すぎなんじゃね？ さてさて、今回はとある案件で画像を上下中央に表示する機会がありまして、 忘れないように自分的メモです。 CSS3が使えるようになってからは、display: table-cell; で簡単に対応できるようになりましたよね。 例としては、こんな感じ。 HTML/CSSコードサンプル <div class="box"> <p class="image"><img src="image.png" alt="" width="200" heigh="200"><p> </div> .box { display: table; } .box .image { d

iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img

最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示

今月発売予定の「メタルギアライジング」をそわそわ楽しみにしているアクションゲー好き seki です。 今回もWebサービスのご紹介です！ 最近よくよく見かける、「Google map」のデザインをお洒落にカスタマイズして載せているサイト。皆さんも一度は目にしたことがあるかと思いますが、こちら、どうやって作っているか気になりますよね。 今回は、js無知な私でも簡単に作れる Google Maps API 「Styled Map Wizard」の使い方を、ざっくりと例を挙げてご紹介します。 【参考サイト】 今回はこちらの記事より、参考・引用して解説します。こちら、とても丁寧に解説されているので、jsが分らなくても出来るかと。 今回作成したもの 画像ですみませんがこちら。 アイコンは seki になっていますが場所はバシャログ。本陣です。 色をモノクロにして、交差点やコンビニ、銀行などのアイコン

足掛け2年、全ての関連作品を見てからアベンジャーズを見て最高に盛り上がったminamiです。 Webデザインの中でもサイトのUIデザインは近年重要性を増していると思いますが、デザインする際のインスピレーションを受けられるサイトをご紹介します。 UI Patterns UI Patterns User Interface Patter Libraryというサイト名通り、UIが体系的にまとめられ解説されています。「Design patterns」ではそれぞれのUIに対して、どういう問題を解決してくれるものなのかの詳細な解説があるので、普段なんとなく使っているUIを基礎から勉強し直せます。 ui parade. ui parade. UIを種類別に集めたサイト。なかなか洗練されたものが集まってますね。 PATTERN TAP PATTERN TAP 良さ気なUIのスクリーンショットが集まるサイト

サイトのプロトタイプをデザインするときに、ちょくちょく登場するのがフォームまわりのパーツたちです。ラジオボタン、チェックボックス、セレクトボックス、テキストボックスなどを配置して、初期値にはこんなテキストが入ってて、だけどこっちの初期値はこうで、幅は広めに、だけどこっちは狭めに、とパターンが複数登場したりするとどんどん面倒に。 そこでリッチシンボル化ですよ。 リッチシンボルとは、簡単に言うと、プロパティを編集できるシンボル機能です。 ここではセレクトボックスを例に説明してみます。 1.まずはシンボル化 シンボル化については以前記事を書かせていただいているのでそちらも参考にしていただきつつ、セレクトボックスをシンボル化します。 Fireworks CS3 のシンボル新機能に「9 スライス」というのがあります。9 スライスガイドをこんな感じに設定します。シンボル化できたら、崩れず拡大縮小ができ

モニターを見つめる目に優しいメガネがZoffからも出る！しかも度付きOK、フレームも選べる！気になってます。hakoishiです。 さて、今回は実は便利なcssのセレクタ指定方法をちょっとだけ掘り起こしてご紹介。 直下にある要素だけ、とかセレクタ名が部分一致したら、はたまたリンク先パスによって、とか実はかなり便利です！ 特定の要素の直下の要素だけに一括でマージンを設定 特定の文言を含むセレクタ、及びその位置で対象を絞り込み指定 リンク先のパス次第でスタイルを切り分ける 特定の要素・セレクタを例外とする 特定の要素の直下の要素だけに一括でマージンを設定 #container>* { margin: 0 10px; } IE7以上対応。 親>子で、直下要素のみを対象指定。 上記例ではid="container"の直下の要素すべてにマージンが設定されます。 ユニバーサルセレクタには正直不安を感じ

冬でも麦茶がうまい！どうもこんちには nakamura です。 今更感がハンパじゃないですが最近ようやっとまともに WordPress を触るようになりまして。もうね、あまりにプラグインが充実しすぎていて何度か気絶しかけましたよ。このまま CMS がどんどん便利になってくとホントにプログラマいらずな時代になっちゃいそうだな～。。。 てなわけで軽く触ってみた中で、WordPress の用途に関わらずこの辺りのプラグインはデフォルトで入れておいていいんじゃないかな～というのがいくつかあったのでご紹介したいと思います。 キャッシュとか最適化関連 W3 Total Cache W3 Total Cache ページキャッシュ、データベースキャッシュ、オブジェクトキャッシュなどなど・・・、片っぱしからキャッシュしてくれるプラグインです。memcached なんかと組み合わせると表側はかなり速くなった気

『哀しき獣』という韓国映画が面白すぎたので、もう一度観たいminamiです。 Fireworksの画像書き出しではもっぱらスライスの使用をプッシュしてきた当ブログですが、「レイヤーからファイルに書き出し」って便利じゃない・・・という衝撃を改めてお届けします。 「レイヤーからファイルに書き出し」使ってる？ Fireworksの書き出しメニューには幾つか項目がありますが、「レイヤーからファイルに書き出し」は今まで使ってきませんでした。 要因としては、 Photoshopと違いオブジェクトを直接編集できるので、パーツ毎のレイヤー分けを意識していなかった 画像書き出しはスライスが強力なので他の方法を気にしたことがなかった というのがあると思います。しかし、場合によってはスライスで管理するよりもこちらのほうが便利！ということで見なおしてみました。 同じレイアウトで大量に画像を作りたい 例えば以下のよ

キノコのガチャポン、数回ガチャったけど、ベニテングダケとサンコタケしか出ない… シイタケが欲しいのに！ 今回は、前回に続き、Fireworks のリソースを公開している海外のサイトをピックアップしてご紹介します。 Fireworks Zone Fireworks のことならここだけ見ておけばオッケー、というほど Fireworks の情報が大量に集約されたサイトです。 チュートリアルもあるし、拡張機能もスタイルもライブラリもダウンロードできます。 Webdesign tuts+ Web デザイン系の話題を幅広く取り上げているサイトです。Fireworks の動画チュートリアルがあります。 Fireworks Lab Fireworks で制作されたデザインパーツが公開されています。ちょっと数は少なめかも。 ソースファイルをダウンロードすることができるので、勉強になります。 webporti

暑い夏がやってきそうなので、久しぶりにツーブロック的な刈り上げにしてみましたishidaです。 今回は最近作業した案件で、これまであまり実践的に使わなかったCSSレイアウトを2サイト連続で使ってみたので、ご紹介。自分も忘れないようにメモ的エントリーです。 ページ下部に固定されるフッターを実現するためのCSSレイアウトです。 positionで実現する方法もありますが、コンテンツ量によっては表示が崩れるので今回は直球勝負です。 XHTML ソースはこんな感じになります。 <div id="container"> <div id="header"> ヘッダー <!-- /#header --></div> <div id="content"> <h1>フッターをブラウザ下部に固定するサンプル</h1> <p>本文が入ります。本文が入ります。本文が入ります。</p> <!-- /#content

今さらながら「ヱヴァンゲリヲン新劇場版：破」を DVD で見まして、 ヱヴァ：Q 見るまでこりゃ死ねないな、と思った sakai です。序破急だから急かと思いきや Q ってところが意味深ですよね… CSS で margin にマイナスの値を指定する、通称ネガティブマージンの使いどころについて、何回かにわけてご紹介します。（先日の CSS Nite でデモをした内容の再紹介です） 今回は「パンくずリスト」のコーディングでのネガティブマージンの使いどころです。 1. パンくずリストでネガティブマージンを使う まず HTML で普通にパンくずリストを組んでみます。 <div id="topiPath"> <ol> <li><a href="/">ホーム</a></li> <li><a href="/wear/">ウェア</a></li> <li><a href="/wear/tops/">トップ

愛車の Vespa がブチ壊れてとてもブルーな sakai です。国産に買い替え検討中… 今回は、ネガティブマージンの使いどころについてのご紹介（2回目）です。 今回は、以下のようなデザインを実現するのにネガティブマージンを使用します。 表組み風になっていて、罫線でブロックを区切っていますが、最初と最後には罫線がないという意外とよくあるパターンのデザインです。 2. 表組み風レイアウトでネガティブマージンを使う まず、HTML を普通に組んでみます。ここでは table ではなく dl を使っています。 <h1>ニュース</h1> <div class="news"> <dl> <dt>2010/08/11</dt> <dd>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</dd> <dt>2010/08/11</dt> <dd>テキス

第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。 本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる 線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条 承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<

こんにちは。今年は夏フェスにはいかない!と決めたのに、ラインナップが発表されるとソワソワしているminamiです。 Fireworksネタです。Fireworksには9スライスという便利な機能がありますが、 ちょっと応用してこんな風に使ってみました。 ※作成例はFireworks CS5を使用しています。 9スライスとは、おさらい 9スライスはFireworks CS3から導入された機能で、ベクターシンボルやビットマップシンボルの端の形状を保ったまま、中間だけを伸ばすことができます。 9スライスはシンボルを作成する際に、オプションにチェックを入れることで有効にすることができます。 よく使われると思われるのが、角丸のオブジェクトの拡大縮小です。 上のようなサイトのデザインを作った時、テキストの長さが変わると、角丸の背景部分も伸ばさないといけなくなります。普通に拡大してしまうと角丸の形状が崩れ