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

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

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

きゃりーぱみゅぱみゅってうまく言えない・・・。みなさんこんにちは nakamura です。 ユーザにファイルをアップロードさせるような処理、あんまりないとは言いつつもやっぱり何気によく作りますよね。でも、作る度に毎回引っ掛かるのがファイルアップロードに関連する php.ini ディレクティブの設定です。upload_max_filesize さえ上げときゃ動くだろう、と思って上げてみると動いたり動かなかったり・・・。毎度毎度調べるのも面倒なので、今回は自分への備忘録的にその辺りをまとめてみたいと思います。 upload_max_filesize upload_max_filesize とりあえず upload_max_filesize 。もう名前からしてモロ。これを変えないで何を変えるの。でもこれを変えただけだと動かない事が割りとよくあるのでご注意を。デフォルトは 2M です。 post_

最近朝が寒すぎて、毎朝「死んだらどうしてくれんだ」とかブツブツいいながら歩いてる kimoto です。 え！？明日雪降るの！？ さて、以前書いた「Facebook のソーシャルプラグインを導入しよう」という記事が好評をいただいてます。 ということで、今回はその時紹介しなかったプラグインを紹介していこうと思います。 Facebook のソーシャルプラグインのページはこちら。 それではどうぞ。 Subscribe Button まずは、前回の記事の時にはまだ無かったプラグイン、「購読ボタン」です。 友達になりたいわけじゃないけど発言は常にフォローしたい。そんな時に「購読」という行動を取れるようになりましたが、それをワンクリックで行うことのできるボタンを外部サイトに置けるプラグインです。 このページに行くと、以下のような入力フォームが現れます。 「Profile URL」に、誰のフィードなのか、

正月気分が抜けねぇぜ〜・・・。2012 年初投稿！今年もよろしくお願いします。nakamura です。 今年の一発目は Apache のちょいネタ。Movable Type などの CGI プログラムを Apache で動かす際に設定しておくとちょっといい感じになる suEXEC について解説してみます。Apache をよくさわる人なら何を今更なエントリーだと思いますので、華麗にスルーしちゃってください。 suEXEC ってなんなの su して exec するんです。要は CGI の実行ユーザを任意のものに指定する為の仕組みです。デフォルトでは Apache の起動ユーザになります。 詳細はマニュアルを参照してください。 suEXEC サポート - Apache HTTP サーバ suEXEC を使わない場合の問題点 CentOS のデフォルトでは Apache の起動ユーザである apa

最近「当番くん」にブログ当番としてバンバン指名されてる kimoto です。 どっかで見たことあるような顔のくせに…！ さて、今回もまた facebook の話を。 最近ますます勢いがついてきていると感じる Facebook ですが、Facebook ページを作成しこれから運用していこう、というお店や企業も多いと思います。 ということで、これから始める人向けに、ちょっとした tips をご紹介します。 すでにガンガン運用してる人には必要ない記事だと思いますがご了承くださいませ。 説明は全て、Facebook ページの修正画面についてです。 編集ページにはページ右上にある「Facebookページを編集」から行くことができます。 権限の管理：Facebook ページ作成！まずは非公開！ Facebook ページを作成して、作り終えた時点でコンテンツも特に無いけどまずは公開！という方もいるとは思

みなさん、今年も残り40日くらいだそうですよ。 年末の大掃除が終わるか今から心配なhakoishiです。 さて、今回は前回に引き続き、ソーシャルボタン設置のソースサンプルをご紹介。 今回は、「google+」「mixiチェック」「mixiイイネ！」「evernote」の4つです。 ※前回のエントリーはこちらから。「はてなブックマーク」「twitter」「facebook」「addthis」を取り上げています。 ソーシャルボタン設置のソースコードサンプルあれこれ。 google+ <g:plusone href="http://c-brains.jp/blog/wsg/"></g:plusone> sizeでサイズ、countでカウンターの有無を指定します。特に指定しない場合はカウンター有り、サイズは標準になります。 以下、サンプル。（※識別キーがダミーだと表示されないので、ボタンは画像にし

新しいチャリを手に入れたら歯車や金属のバーを眺めてニヤニヤするようになったminamiです。 11/3にjQueryの最新バージョン1.7がリリースされました。大小さまざまな機能追加がされましたが、その中でもかなり大きな「.on()」「.off()」というイベントAPIが追加されましたが、今までのイベントAPIとどう違うのかいまいちわからなかったので調べてみました。 「.on()」「.off()」の使いどころ jQueryには今までのバージョンにも、「.bind()」「.live()」「.delegate()」といったイベントAPIがありました。今回追加された「.on()」「.off()」はそれら3つの機能をカバーしたメソッドになります。 「.bind()」「.live()」「.delegate()」については今後も利用できますが、「.on()」「.off()」の使用が推奨されていくようで

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

はじめまして、8月よりバシャログメンバーとなりました、hakoishiです。 生粋のコーダーとしてコーディングネタを更新してきますのでよろしくお願いいたします。 さて、本日は定型文の入力に便利なツール「ペースター」のご紹介など。 ペースター（オータムソフト様） http://homepage2.nifty.com/autumn-soft/paster.htm Shiftキー2回で定型文を呼び出したり、 Ctrlキー2回でコピー履歴を何十件と呼び出せたり、というツールなのですが 定型文をカテゴリ分けして登録できたり、定型文で囲めたり、正規表現使えちゃったり、と何かと多機能で便利！ で、具体的にどう使うの？ってことで、コーディングに使用する際の具体例をいくつか。 cssのフォントサイズ相対指定を選択式で便利に フォントサイズの相対指定。都度調べるのってちょっと面倒ですよね。これをペースターに登

こんばんは、最近「ももいろクローバーZ」にハマってしまいましたishidaです。 先月発売された1stアルバムを買うか否か迷ってます。 今週末土曜日に、読売ランドでライブもあるんだよなぁ～。 さてさて、今回はちょろっとFireworksの拡張機能のご紹介です。 拡張機能にもいろいろありますが、 汎用的に使えそうな144種類がセットになった拡張機能です。 mxp形式で配布されているので、 インストールするとFireworksプロパティパネルの［テクスチャ］にドーンと表示されるようになり簡単に使えます。 テクスチャ画像を配布しているサイトはよくありますが、拡張機能として配布しているのは珍しいですね。 配布元サイト Texture Collection 144 - Fireworks Zone

Arai の新しいオープンフェイスヘルメット、欲しいんだけど XXL がラインナップされてない… 頭のサイズが XXL ですみません。sakai です。 今回は、複雑なカラムレイアウトを簡単に実現することができる ｊQuery プラグインのご紹介です。 jQuery Masonry jQuery Masonry は CSS だけでは実現が難しい、可変かつ複雑なカラムレイアウトを実現することができるプラグインです。 説明が難しいのですが、上記のサイトに行って、ブラウザのサイズをグリグリ入れ替えてみていただくと、このプラグインの機能をわかっていただけるかと思います。 ちょっと前（去年？）に話題になったみたいなのですが、完全に見逃していました。 デモを見て「おおぉー！」と思わず声を上げてしまいました。これ凄いですよね。

AUのスマートフォンラインナップが発表されましたね。 今まで食指が動かなかったけどやっぱりINFOBARにキュンときたminamiです。 さて、今回も前回に引き続きfacebookの話です。 iframeで自由にページを作ることができるようになったとはいえ、 実際に制作する際には気をつけなければいけないポイントがいくつかあります。 今回はそのあたりを挙げてみました。 スクロールバーを出さないようにする facebookページの表示領域は通常で横幅520px、縦幅800pxとなっていますが、コンテンツのサイズがそれより大きくなると問答無用で横方向のスクロールバーが表示されてしまいます。アプリの設定で「iFrameサイズ」を設定しても変わりません。スクロールバーをページ内に出したくない場合は下記のようなCSSを記述して、万が一コンテンツが大きくなったとしても表示領域が変わらないようにしましょう

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

たった 8 分のランニングでバテバテな kimoto です。 前回「直帰率」と「離脱率」についてのお話を書きましたが、今回はそこから実際に施策をうって効果が出た例をご紹介しようと思います。 PC サイトありきのモバイルサイトでの事例です。 前提：サイトの構成 まず前提として、サイトの構成をお話します。そのままの事例ではなく、一部を伏せてご紹介します。 そのサイトのモバイル版のトップページは、URL は「PCサイトのドメイン/m/」という形です。 そこにはカテゴリが沢山並んでおり、そこからそれぞれカテゴリのトップにいけます。 カテゴリのトップページでは、製品の詳細を検索できる、という作りです。 その検索結果より商品の詳細ページに行く、という流れです。 また、PC サイトに携帯からアクセスした場合にどうなるか？その場合、どのページにアクセスしても一律でトップページにリダイレクトする作りとなって

こんにちは。さすがに見ないだろうと昔撮ったVHSビデオを、捨てるにあたってじっくり見てしまったminamiです。 小ネタです。HTMLファイルにちょっとした文言を読み込みたいときに重宝するjQuery.load()ですが、Chromeでうまく動かない場合があります。ちょっと引っ掛かってしまったので回避方法を調べました。 サンプルを作ってみた ものすごく簡単に以下のようなスクリプトを書きました。data.txtから読み込んだテキストを、div#txtPlaceに読み込みます。これをローカルでチェックしてみます。 function loadText() { var dataPath = "data.txt"; $("#txtPlace").load(dataPath); } firefox IE8 出ました。 出ません。なぜ！？参考ページを見ると、 Chrome: ローカルWebページからのア

週末にソーシャル・ネットワークを観てきました。全編にわたって早口で物語が展開し、前提知識なしで観たので、途中まで起きていることがつかめませんでした。あらすじは調べてから行かれることをオススメします。個人的にところどころに挟んでくる技術トーク(Emacs使いなところや、講義シーンで出るコンピュータの歴史など)が本筋とは関係ない見所です。 今日もjQuery内部の話をちょっとします。最近、jQuery1.2.xを使っているWebページでjQueryのバージョンを最新にしたら動かなくなることがありました。 調査してみたところ、セレクタの記述が間違っていたが、動作していたこと、(憶測になりますが)1.3でセレクタエンジンSizzleが導入され、挙動が変化したこと、jQueryのエラー処理に変更があったことで不具合が起きてしまったようです。 1.4.1からのエラー処理 jQuery1.4.1から j

禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます