【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
iOS Simulatorのスクリーンショットを撮るのに便利な「iOS-Simulator Cropper」 | バシャログ。
そろそろHomeボタンが本格的に効かなくなってきてiPhone5が待ち遠しいiPhone 3GSユーザのtanakaです。Titanium Mobileユーザにとって今日(4/5)はニュースがありました。Titaniumアプリ開発用のIDEであるTitanium Studioプレビュー版がリリースされたことです。今年の1月にAptana買収が発表されたあとで、3月中にIDEをリリースするという話になっていましたので、待っていた方もいらっしゃると思います。僕もこれからさわるところです。基本操作はEclipseやAptanaですので、そちらに慣れている方にはすんなり操作できることと思います。まだインストールしたばかりなので紹介は後回しにして、今回は別のツールを紹介します。 iPhoneのスクリーンショットを撮る iOS SDK をインストールして、iOS Simlatorを使ってみた方はわかる
Google HTML/CSS Style Guide の推奨ガイドラインまとめ | バシャログ。
すっかり夏っぽくなり、ビアガーデンに毎日通いたいと常々感じる今日この頃、Latin です。 巷で流行っていると噂の Google HTML/CSS Style Guide についてまとめて下さっている REFLECT DESIGN さんのブログより、代表的なものをいくつか抜粋してみました。 全般的なスタイルルール 一般的な書式ルール 全般的なメタルール HTMLのスタイルルール HTMLの書式ルール CSSスタイルルール CSS書式ルール 全般的なスタイルルール プロトコルの記述 <!-- NG --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- OK --> <script src="//www.google.com/js/gweb/analytics/autotrac
Webデザインのツール、FireworksとPhotoshopは何が違うの？を考えてみた | バシャログ。
はじめましてバシャログメンバーにデザイナーとして 10月末から加わりましたkojimaです。 わたくし、こちらに所属して先日初めてFireworksCS5触りました！ CS3をちょいちょいお直しレベルでしか触ったことなかったので 新鮮！！を通り越してさっぱりわからん！ というわけでFireworksとPhotoshopどこがどう違うの？から考えてみました。 PhotoshopでWebデザイン もともとPhotoshopは名前の通り写真屋さん、写真/画像編集ツール。 その繊細な描画力が仇となり、Webのデザインをしようと思うと シェイプが滲みが気になったり、レイヤーが200枚を越えたり。 でもやっぱ絶妙な質感再現しちゃう画像処理すんばらしい！ FireworksでWebデザイン もともとMacromediaがWebデザインツールとして開発。 共通パーツ作る時に大助かりなシンボル化機能 1ファ
地味に便利なコーダーさん向けのジェネレーターまとめサイト「Web制作小物ツール」 | バシャログ。
ボジョレー・ヌーボー解禁日、今日は買って帰るけどワインはあまり飲めないishidaです。 Web制作に関連するジェネレーターサイトはいろいろありますが、個人的によく使っているサイトをご紹介します。特にコーダーさん向け。 http://webtools.dounokouno.com/ サイト名からあまり想像できないですが、地味に便利なジェネレーターが６個あります。 ダミーテキストジェネレータ システムなどで文字数制限する際のサンプルやデザインやワイヤーフレームなどに使えます。文章のパターンも、坊ちゃん・徒然草・英語など７種類から選択できます。 パスワードジェネレータ 4〜20桁のパスワードをランダムに生成。一度に20個まとめて作れます。 Basic認証コードジェネレータ 名前の通り。.htaccessと.htpasswdが作成できます。 HTMLエンティティ化 HTML内に掲載するメールアド
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
つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいです。マジで。 HTML5+CSS3への対応が目に付きますが、個人的にはjQuery MobileとPhoneGapフレームワークの導入に注目します。 アプリ開発はこれまで、Objective-Cやjavaが主流でしたがDreamweaverでアプリへの書き出しまで出来てしまうなんて…。今後、モバイルアプリケーションの統合開発環境のデファクトスタンダードになる予感が。 ってことで、まずはjQuery Mobileを理解せねば！ jQery Mobile についてはまだ書籍はあまりなく洋書しかありませんでしたので、参考になる記事を取り上げてみます。 http://jquerymobile.com/ 本家サイト jQuery Mobile Gallery http://w
サイト運営における「直帰率」と「離脱率」についてのメモ その2 | バシャログ。
たった 8 分のランニングでバテバテな kimoto です。 前回「直帰率」と「離脱率」についてのお話を書きましたが、今回はそこから実際に施策をうって効果が出た例をご紹介しようと思います。 PC サイトありきのモバイルサイトでの事例です。 前提：サイトの構成 まず前提として、サイトの構成をお話します。そのままの事例ではなく、一部を伏せてご紹介します。 そのサイトのモバイル版のトップページは、URL は「PCサイトのドメイン/m/」という形です。 そこにはカテゴリが沢山並んでおり、そこからそれぞれカテゴリのトップにいけます。 カテゴリのトップページでは、製品の詳細を検索できる、という作りです。 その検索結果より商品の詳細ページに行く、という流れです。 また、PC サイトに携帯からアクセスした場合にどうなるか？その場合、どのページにアクセスしても一律でトップページにリダイレクトする作りとなって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
