【CSS】画像を上下中央に表示する（IE7以下にも対応させる） | バシャログ。
娘が小学二年生になり、みまもりケータイ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
[CSS3]面倒なCSS3、linear-gradientを使いやすくまとめてみた | バシャログ。
こんにちはLatinです。 今年も残す所、あと11ヶ月となってしまいましたが、やり残しのないよう頑張ろうと思っております。 今回はCSS3のグラデーションにまつわるエントリーです。 ハッキリ言って面倒くさい！ さてCSS3のグラデーション「linear-gradient」なんですが、はっきり言って面倒です･･･。 今はCSS3のジェネレータもたくさんあるので、それらを使うのもいいのですが、足りない分のベンダープレフィックスを探したり、filter やら毎回ググるのが非常に面倒！ 且つ、ボタンなどに、gradient と border-radius を併記した場合、IE9 での表示が若干おかしくなってしまいます。 詳細は下記に記載しますが、今後サクッと使えるように備忘録がてら、簡単にまとめておこうと思います。 CSS スニペット（修正前） .btn { border-radius: 4px;
定番機能をまとめて提供してくれるjQueryプラグインまとめ | バシャログ。
ゲームボーイアドバンスの名作「カルチョビット」が3DSで出ると聞いてテンションあがってきたminamiです。 jQuery便利ですよね。さらにその便利なjQueryを使ってコーディング時の定番機能を提供してくれているライブラリがたくさんあるので集めてみました。 Laquu.js http://laquu.com/ 注目の最新プラグインです。「HTMLコーディング作業量を極力減らすためのjQueryプラグイン」ということで、 基本的な機能もさることながら、ピックメニュー、タブ、ツールチップ、ティッカーといった、よく使うけど意外と手間のかかるUIが一つのプラグインでまかなえてしまうのがポイント高いです。個人的にはコナミコマンドが実装されてるのが熱いです！ 対応するjQueryのバージョンは1.5以上です。 simplelib.js http://lab.starryworks.jp/js/si
商用可！アイコン,イラスト素材検索・配布サイトまとめ【海外編】 | バシャログ。
お布団から出るのがだんだん辛くなって来ました seki です。 今回は私が普段利用している、無料＆商用でも使える、素材を配布、または検索できるサイトをご紹介します。ブックマークしておくと、いざという時大変便利。かなり有名所なので、これ知ってる！というのも多々あるかと思いますが、お付き合いくださいね。 引出しに入れておきたい海外の無料素材検索サイト 商用利用可である事がサイト内で判断しやすいサイトのみを集めてみました。 ※念のため、ご利用の前に各サイトの素材ページにあるライセンスを確認の上、ご利用下さい。 【all-silhouettes】 商用可のシルエットベクターデータを配布しています。 有料サイトも顔負けな種類と量、質の良さ。欲しい素材を見つけたら、広告ゾーンをスクロールで抜けた所にある[Download free …]の地味なボタンからダウンロードできます。 http://all-s
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
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
様々なイケてるUIを参考にできるサイト | バシャログ。
足掛け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のスクリーンショットが集まるサイト
JavaScriptからActionScript3.0を呼び出す際のメモ | バシャログ。
もう暑いとか言う気力も失せたminamiです。 ページのJavascriptからFlashのActionScriptを呼び出す方法を最近まで知らなかったので備忘録的に書きます。 ExternalInterface.addCallback()を使う ActionScriptからJavascriptを呼び出すにはExternalInterface.call()という関数を使いますが、 JavaScriptからActionScriptを呼ぶ際にも同じクラスのExternalInterface.addCallback()という関数を使います。 ExternalInterface.addCallback()はActionScript メソッドをコンテナから呼び出し可能なものとして登録することができます。 記述のサンプル AS側の記述 // flash.external.ExternalInterfa
FacebookページにiFrameを使ったタブを追加する手順 | バシャログ。
急に湿度が上がってパーマが強調されているminamiです。 今回はFacebookです。最近ちょっとご無沙汰していたら、いろいろと機能が追加され、さらにFacebookページの作り方まで変わっていたのでちょっとまとめてみました。 FacebookページにiFrameを使った独自のタブを追加する 以前はFacebookページ（旧ファンページ）では、FBMLというFacebook独自の言語を使用してオリジナルのタブを追加することができました。 しかし、2011/3/11にFacebookではそれ以後のFBMLを使ったコンテンツを非推奨とし、iFrameとHTML、Javascript、CSSで作成できるように仕様が変更されました。 まず下準備 というわけで、iFrameを使ってFacebookページのタブを作っていくわけですが、iFrameですのでもちろんその中に読み込むhtmlファイルおよび
TortoiseSVN をインストールすると PC が重くなる件 | バシャログ。
最近、携帯電話を換えました。こんにちは、 nakamura です。トイレに水没しても死ななかったタフガイにもついに寿命が訪れたようです。なぜか普通に閉じようとしただけでボキっと逝ってしまいました、、、かなすぃ、、、 さてさて、Windows のエクスプローラ上で手軽に使える Subversion クライアントとして人気な TortoiseSVN ですが、デフォルトの設定のままだと PC 全体を重たくしてしまう曲者です。スペックがそんなに悪いわけではないのにどうにも全体的に重たいなぁ、とかれこれ半年ほど悩んでいたのですが（半年は大袈裟か）ようやく原因が分かったので、その辺りの設定をご紹介しようと思います。 なんで重たくなるの？ そもそも TortoiseSVN をインストールするとなぜ PC 全体が重たくなるのでしょう。原因は TortoiseSVN 自身ではなく一緒にくっついてくる TSV
jQueryのためのテストツール QUnit でテスト駆動開発入門を写経する | バシャログ。
こんにちは！まだまだ開発者テスト修行中のktanakaです。 今日は、jQueryについてくるユニットテストツールのQUnitで遊んでみます。 QUnitの概要 QUnitはjQueryプロジェクトの為のユニットテストツールです。(QUnit - ABOUTより)有名な各種xUnitフレームワークよりチェックのための関数も少なく、シンプルに書けそうな感じです。そしてなによりブラウザ上でテストが走ります。 Using QUnitを見るとテストに必要なものがわかりますが、必要なファイルは、jquery.js, QUnitのテストランナー(testrunner.js)とスタイルシート, テスト対象のコードとテストコードです。 Moneyオブジェクトの例を写経 いきなりjQueryプラグインのテストとか心臓に悪そうなので、普通のテストをやってみます。(dollar.test.js) ちなみにこのエ
【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。
例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された（というか Web サイトからコピーした）ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
