こんにちは。mackyです。 CSS3で追加されたremという単位が便利な理由をpxやemと比較してまとめてみました。 IE8以下は非対応ですので、px指定を追加する必要がありますが、 スマートフォンやRWDにはとても便利です。 ちなみに、 remというのは、「root+em」（ルートエム）の略でhtmlのサイズを継承するemだと。 なるほど、とてもわかりやすいです。 そのまえにem（pxも）の継承をおさらい。 px(ピクセル) ピクセル単位の指定。 環境によって変化しない絶対単位です。 em(エム) 文字の高さを基準にした単位。1emは1文字分で、環境によって大きさが変化する相対単位。 bodyなどでfont-sizeの指定をしていない場合、あるいはfont-size:100%なら「1em=16px」が基準になります。 まずはpxとemをおさらい pxとemについてのわかりやすい説明はこ

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg

こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</

はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読

そうめんと水出しのお茶があれば生きていける気がしてきたhakoishiです。 さて、今回はjQueryで透過PNGのopacityアニメーションがバグるのを回避する方法です。 透過画像をアニメーションさせた時、IE8以下でフチが黒くなって困った経験をお持ちの方、いらっしゃるのではないでしょうか？ 発現条件 発現する条件は、この4点です。 画像は透過png。 画像自体にopacityアニメーションを設定している。 画像にフィルター（AlphaImageLoader）をかけている。 ブラウザはIE8以下。 回避するためのポイント 回避するためのポイントはこの2点。 画像にフィルター(AlphaImageLoader)をかける。 アニメーションの対象を、その画像を包括する要素にする。 移動やサイズ変更もしたい場合、包括要素も画像と同じサイズにしておくと扱い易いと思います。 サンプルを作りましたの

アームバンド型のジェスチャーコントローラMYOが気になる。hakoishiです。 筋肉の動きを感知するんですってよ？すっごい。 さて、黒い画面もそろそろ愛おしくなってきたデザイナー、コーダーのみなさん。 今いるフォルダをカレントにしてコマンドプロンプトやターミナルを立ち上げるTipsなどいかがでしょう。 Windows Windows 7、8で使えます。 カレントにしたいフォルダで 「Shift + 右クリック」→「コマンドウィンドウをここで開く」 を選びましょう。 ※フォルダにカーソルを乗せるか、あるいはフォルダの中の余白で実行します。 すると、このとおり。 実行した「C:¥Program Files¥iTunes」フォルダをカレントに、コマンドプロンプトが開きます。 「まずはcd」から開放されましたね。 さあ、早速 compass watch など。 Mac Mac OS X 10.7

娘が小学二年生になり、みまもりケータイ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

カーテンのない家には住めない事に気がついたminamiです。 jQueryにはjQuery.Deferred というオブジェクトがあります。jQuery 1.5 のころから実装されてだいぶ経っているのですが、今までなんとなくよくわからなくて苦手意識があったので改めて使ってみました。 jQuery.Deferred ってなに？ "deferred" の意味を調べると「延期された」「遅延された」などの意味があります。乱暴にまとめてしまうと、様々な処理が終わった後に呼ばれる（遅延された）処理を監視してくれるオブジェクトと言えます。 何を言っているのかわからん 文章で書くとまどろっこしいのでサンプルを作りました。1～4の処理が全て終わったら完了の表示を出します。 jQuery.Deferred を使った処理の管理 window.setTimeout() などのタイマー処理 jQuery.ajax

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

来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ

仮面ライダーウィザードのウィザードリングが5つ集まりました ishida です。 コレ以上あつめると嫁さんに怒られるので、リング集めはもう辞めます。でもベルトがほしいよぉー さてさて、本日はファイルも文字コードと改行コードチェックに便利なツールのご詳細です。 プロジェクトではそれぞれコーディングルールも異なります。 HTMLのバージョンだったり、文字コード、改行コード、対象ブラウザなど。 複数プロジェクトが同時進行の場合は、注意が必要です。 特に改行コードについては、目に見えるものではないので分かりにくいですよね。 Dreamweaverは環境設定で改行コードを変更できますが、プロジェクトごとに変更はできないので、改行コードをつい前回作業したままの状態になっていることも多いです。 そこで、便利なツールがこれ。 FileCode Checker ファイルの文字コードと改行コードを一覧表示して

足掛け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のスクリーンショットが集まるサイト

ダルビッシュが本日6勝目をあげましたね。 シーブレインのダルビッシュこと Latin です。 今回は Adobe から提供されているスマホサイト制作のサポートツール、 Adobe Shadow を導入してみました。 PC側のChromeで閲覧したサイトを、紐付けされたiPhoneやAndroid端末で自動的に表示してくれるというツールです。 スマホサイトは実機確認が大事ですし、かといって、一々QR生成してアクセスするのも面倒･･･面倒くさがりな私にとっては今後活躍しそうな予感！ [PC側]クライアントソフトをインストール http://labs.adobe.com/technologies/shadow/ 2番目の「Download Shadow Labs Release for Mac or Windows」から Windows、またはMac の任意のクライアントソフトをダウンロードして

この間の春の嵐はすごかったですね。いろいろ飛ばされないように必死だった kimoto です。帰りの電車は久々に足が浮くほどの超満員を経験しました。 さて、ちょっとモーダルウインドウを調べる機会があったのでまとめてみます。 基本的に、全て jQuery で動くものになっています。 最新の情報ってわけではないですが、場面ごとに選べるものを集めてみたのでお試しくださいませ。 超シンプルな軽量スクリプト leanModal leanModal leanModal はとにかく軽量です。デモを触ってみると、その軽さがわかると思います。 ただし、軽さを徹底的に追求した結果なのか、IE6 には対応していないとのこと。 また、イメージギャラリーなどとしては使えないとのことです。 ちょっとした文章を表示するだけの場合などはこれで十分ですね。 そこそこ軽量、そこそこ機能的 Simple Modal Simple

カーネーション 終わっちゃいましたね～。ここ最近の朝ドラは良作続きなので、梅ちゃん先生 も期待大です。というわけで新年度も張り切っていきましょう！nakamura です！ 弊社でも増えている Facebook ページ・アプリの開発ですが、作業する際にいつもお世話になっているサイトを今回はまとめてみました。Facebook は仕様もコロコロ変わるし API もやたらたくさんあるので基本的なドキュメントは抑えておいた方が良いですよ～。 Facebook開発者 Facebook 公式の開発者向けサイトです。各種ドキュメントや自分が管理している Facebook アプリの管理画面などが見れます。 ちなみに僕がよく見るのはこの辺りでしょうか。 Graph API - 各種 API のドキュメント JavaScript SDK - JavaScript SDK のドキュメント PHP SDK Over

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

最近ダイエットを始めて、ストイックな生活を送っている kimoto です。腹減った！ さて、そんな絶賛やせ細り中（※本人のイメージです）の kimoto のメインブラウザは、chrome の勢いが凄かろうと相変わらず Firefox ですが、未だに「へえ、こんなのあるのか」というアドオンがあったりします。 数が多いので、当然全てを把握しきれないですよね。 ということで、便利だけどまだ紹介してないアドオンを幾つか紹介しようと思います。 特に新しいものというわけではないので、知ってるものもあると思いますがその辺は広い心でご容赦いただければ。 複数ユーザで同時にログインできる！「Multifox」 Multifox 複数セッションを扱えるアドオン。 これを使えば、同一サービスで、同時に違うユーザでログインしたりすることができます。 会員制のサイトを開発している人などは、これを使えばデバッグがググ

こんにちは、hakoishiです。 最近の横浜は花粉飛んでる気がする…、と思ってたら雪っぽいものがちらつく日もあったり。 空を見上げては「今はいったいいつなんだろう」と思い馳せる日々です。 さて、今回はDreamweaverの検索・置換対象となるファイルの拡張子を増やす方法をご紹介。 サイト内検索したけど、目的のソース箇所が見つからない…と思ったら「.ctp」とか「.cgi」とかDWは検索対象として見ちゃいないのですねorz そんな時、他のソフトに作業の場を移すのも良いですが、Dreamweaverでも検索に引っかかるようカスタマイズできますのでご参考まで。 編集必要なファイルが2つ。 他、必要に応じて設定する項目が1つあります。 ※各ファイル編集前にはバックアップをお取りください。また、極力DW以外のエディタで編集することをおススメします。 【1】Extensions.txt 下記にあり

こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px

ボジョレー・ヌーボー解禁日、今日は買って帰るけどワインはあまり飲めないishidaです。 Web制作に関連するジェネレーターサイトはいろいろありますが、個人的によく使っているサイトをご紹介します。特にコーダーさん向け。 http://webtools.dounokouno.com/ サイト名からあまり想像できないですが、地味に便利なジェネレーターが６個あります。 ダミーテキストジェネレータ システムなどで文字数制限する際のサンプルやデザインやワイヤーフレームなどに使えます。文章のパターンも、坊ちゃん・徒然草・英語など７種類から選択できます。 パスワードジェネレータ 4〜20桁のパスワードをランダムに生成。一度に20個まとめて作れます。 Basic認証コードジェネレータ 名前の通り。.htaccessと.htpasswdが作成できます。 HTMLエンティティ化 HTML内に掲載するメールアド