CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
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
【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
jQuery 1.9 で変わったところを調べてみる。 | バシャログ。
引越しの準備がままならないminamiです。 jQuery1.9 が正式にリリースされました。すでにベータ版として発表されているjQuery 2.0 はIE6/7/8に対応しないことを謳っているため、これらのブラウザ対応をする場合は1.9 を使っていくことになりますね。 jQuery1.9 で変更があった機能を見ていきたいと思います。 どう変わったの？ jQuery 1.9でアップグレードされた機能は下記ページにまとまっています。 jQuery Core 1.9 Upgrade Guide 主要なところを抜粋してみます。 toggle(function,function,...) の廃止 間違えそうですが、表示/非表示のtoggle()は使えます。 jQuery.browser() の廃止 だいぶ前からなくなるよ、と言われていましたが、とうとう廃止に。jQuery.supportや、Mod
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
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
便利なCSSデバッグツール「XRAY」 | バシャログ。
ブラウザで表示を確認しながらCSSを組む際に、一番便利なツールはやっぱり「Firebug」なのですが、どうもFirebugは高機能すぎて動作が重い気がします。 ただCSSの各プロパティを画面上で見たいだけなんだケドなぁ、という時にちょっと便利なCSSデバッグツール「XRAY」です。 XRAY ブックマークレットタイプなので、準備はコチラのサイトからツールバーなどに登録するダケ。 以降はクリックひとつで起動します。 確認したい箇所をクリックすれば、各プロパティの値やID/クラス名が表示されます。 HTMLの構造を追いながら確認することもできます。 とても気軽で便利です。 都合のいいコトにIEもSafariもイケます。 あと、Flashのデバッグツール「Xray」もas3に対応して大変便利。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
