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
printデバッグ離れできるようになるために試してほしいPhpStorm+Xdebug用例集(1) | バシャログ。
TimeCapsuleのハードディスクが故障したので、ゴールデンウィーク中に交換してました、tanakaです。 以前、PhpStorm で、Xdebugのリモートデバッグ環境を作るで、PhpStormでXdebugと連携させるための設定について解説しました。あれからいくつか便利な用法を覚えて、printデバッグ離れできるようになってきました。今回は、printデバッグをやめられるまでに至った便利な用法をいくつか紹介します！ 準備 以前の記事でデバッグ環境を作成しておきます。また、ブラウザから簡単にデバッグの有効/無効を切り替えられるように、Zend Debugger & Xdebug bookmarklets generator for PhpStormでブックマークレットを作っておきます。(右側のGenerateボタンを押して、表示された"Start debugger", "Stop d
Ajaxコンテンツでも手軽に「進む」「戻る」を実装できるjQuery hashchange event | バシャログ。
「iPadが薄くて軽くなったら買うね」と言っておきながらiPad2を傍観しているminamiです。 今回は便利なjQueryのプラグインの紹介です。 Ajaxでも「進む」「戻る」ボタンを使いたい Ajaxを利用して、ページ遷移することなくコンテンツを展開するWebページも増えてきていると思いますが、URLが遷移しないので、ブラウザの「進む」「戻る」ボタンを使ってさかのぼることができないのがネックです。 そこで最近よく見かける手法が、URL中の"#"以下の文字列を元にページの情報を表示する方法です。TwitterのPCページなどでも取り入れられています。ちなみにこの方法の是非についてもいろいろと議論があるようですが（主に検索エンジン対策）、そこは割愛します・・・ jQuery hashchange eventを使う jQuery hashchange eventは、jQueryのプラグインと
Web 開発におけるディレクトリ構成 | バシャログ。
Web サイトを開発する際、みなさんはどのようなディレクトリ構成で進めてますか？ 今日は、シーブレインはこんな感じでやってます、というディレクトリ構成をご紹介してみようと思います。 なお、名称などは実際と少々異なる部分もありますし、この形式が全てというわけではありません。 ┬ [app] ────┬ [functions] ├ [bin] └ [classes] ├ [config] ├ [cgi-bin] ├ [documents] ├ [html] ├ [lib] ├ [smarty]───┬ [templates] └ [tmp] └ [templates_c] ■ app 実際に動く部分です。「functions」に関数群を、「classes」にクラス群を格納しています。ちなみに、MVC で言うところの M の部分、すなわち「モデル」に相当するものも、ここに置いています。 ■ bi
プログラムのコード量を減らす MySQL 関数 | バシャログ。
みなさん琉球朝顔ってご存知ですか？朝顔の中でもとてもたくましい事で有名な種類ですが今年の夏から我が家の庭に植えた所、未だに花が咲き誇っていて季節外れな事この上ありません、、、なんか雑草化すると駆除は困難だとか、、、 さて今日は知っておくと何かと便利な MySQL 組み込みの関数たちをご紹介しようと思います。プログラムサイドに記述すると数行に及ぶ処理が、SQL ベースで行うとほんの数文字で済んでしまいます。 DATE, DATE_FORMAT 日付や時刻関連の関数はとても充実していますが、中でもよく使うのはこの辺りでしょうか。こんなレコードがある時、、、 mysql> SELECT created FROM users; +---------------------+ | created | +---------------------+ | 2009-06-05 13:33:26 | |
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
