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
【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください2 | バシャログ。
こんにちは、シーブレインの toyama です。蒸し暑いよ！ サムネイル用の画像を大量に書き出す必要に迫られたときの記事を書かせていただきました。が、「他にも方法あるよ！」とおハガキいただきましたので、ご紹介させていただきます。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで（画像をすべて選択して「フレームに配分」を使うと簡単です）、1 フレーム 1 画像を配置します。 3.スライスをひとつ作成。スライスに名前をつけておきます。ここでは「test」としました。 4.画像を書き出すための「最適化」を設定したあと、「ファイル」→「HTMLの設定」→「ドキュメントの詳細」から、画像を書き出す際の命名規則を設定します。サムネイルは連番で書き出したりすることが多いと思われるので、以下のようにしました。 5.書き出しのダイヤログが出て
Dreamweaver のコードヒントをカスタマイズしてみる | バシャログ。
こんにちは！スカイツリーに行って参りました Latin です。 ボチボチ花火大会もやってるようですし、あの高さから見る花火ってメチャメチャ綺麗そうですね～！ さて今回は、Dreamweaver の機能拡張について全く別の事を調べていたのですが、少々脱線。 コーディングする際にタグやプロパティのプレビューを表示しアシストしてくれる機能、それが「コードヒント」と呼ばれる機能ですが、CSSを書く際に「" width: "と入力しようとしたつもりが" widows: "と入力された事はありませんか？」との見出しの記事に思わず「あるある！」と飛びついてしまい、実際にカスタマイズしてみました。 手順は予想以上にカンタンでした。 今回はCSSコードヒントのみ編集してみます。 Dreamweaver の設定ファイルの中にある「CodeHints.xml」というXMLファイル、この書き順をかえるだけでCSS
Dreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能5つ | バシャログ。
チーム内のももクロ旋風が留まるところを知りません。 まだメンバーの顔と名前覚えきってないんだけどそんなこと言えないhakoishiです。がんばります。 さて、本日はDreamweaverの使い勝手をちょこっとだけ底上げしてくれる拡張機能を5つほどご紹介します。 Zen Coding これはもう、いわずもがなですね。コーディング効率大幅アップ。 下記よりDreamweaver用のファイルを選択してDLしてください。 Downloads - zen-coding 閉じタグコメントを挿入 「コマンド」メニュー⇒「閉じタグコメントを挿入」で閉じタグコメントを自動で挿入してくれます。 ID・classも自動的に拾ってくれるので、構造のチェックにも便利。 コメントを生成して挿入するDreamweaver用の拡張機能を作成しました Dreamweaver CS5 Validator 「結果」パネル⇒「バ
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
サイトを公開する際に最低限抑えておきたい Apache の設定 | バシャログ。
こんにちは nakamura です。最近トルシエさんテレビ出すぎじゃありません？ウィイレヤロウヨ。オフサイドダヨ！ さてさて今回は意外と知られてないけど、サイトをインターネットに公開する際には知っておいた方が良い Apache の設定をいくつかご紹介します（一部 PHP の設定もありますが）。この設定をしていないからといって即危険にさらされるという訳でもありませんが、リスクの芽は摘んでおくに越した事はありませんよね。 無駄な HTTP ヘッダを返さない ディストリビューションにより異なるかもしれませんが、CentOS デフォルトの設定の場合 Apache が返してくる HTTP ヘッダは以下のようなものです。 HTTP/1.1 200 OK Date: Mon, 05 Jul 2010 01:01:14 GMT Server: Apache/2.2.3 (CentOS) X-Powered
【Fireworks】スライスに一括で連番をつけてくれるコマンド | バシャログ。
地元では BS が映らなくなったり停電したりするほど雪が降ったのに、馬車道にはまったく雪が残ってないのはどういうことでしょう。 toyama です。同じ横浜市なのに… スライス、してますか？ Fireworks のウリのひとつに「Web 制作に欠かせないスライス機能」があるわけですが、今日はそのスライス機能をさらに便利にしてくれるコマンドをご紹介します。 スライスに連番をつけてくれるコマンドです。 その便利さたるや、もっと早く出会いたかった！今までの自分がバカみたい！というレベルです。 1.コマンドをインストール PIXEL LAB さんから Fireworks 用オリジナルコマンド（jsf）をダウンロードしてインストールします。 2.スライスを設定 例として、こんな感じのサイトを作っているとしましょう。 グローバルナビや画像にスライスを設定します。 矩形スライスを使うと早いです。 3.コ
jQuery を使ったイメージギャラリー25コ | バシャログ。
大雨やら地震やら、天災が続きますね。取り急ぎ乾パンを買うべきか悩んでるkimotoです。最近の乾パンはうまいと言うし。 さて今回は、jQuery を使ったイメージギャラリーが25コ紹介されていたので便乗してご紹介。 説明文付きギャラリー Create an Image Rotator with Description (CSS/jQuery) デモページ 右側のサムネイルをクリックすると、説明文と共にイメージが表示されます。 「Hide」ボタンで説明文を隠す事もできます。 自動でスクロールするイメージギャラリー jQuery Image Gallery/News Slider with Caption デモページ 一定時間で、自動で画像がスクロールします。 下部のリンクにより、手動で動かす事もできます。 オンマウスで少し拡大するサムネイル Fancy Thumbnail Hover Eff
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
CSS 基準文字サイズ（px）ごとの相対フォントサイズまとめ | バシャログ。
こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px
重いFirefoxをなんとかして速くしたい | バシャログ。
その強力なアドオンで、とっても便利なFirefoxですが、毎日使っているとドンドン動きが重くなっていってしまいます。 うーん、どうにか軽くならないものかと色々やってみました。 起動を速くしたい まずはとにかく時間のかかる起動をなんとかしたいと思います。 Firefoxはブックマークやら履歴やらクッキーやらをSQLite DBで管理しています。 毎日使っていくうちにDBは大きくなり、起動や動作が重くなっていくとのこと。 そこでSQLite Optimizerというアドオンを使って、DBの最適化をしてしまいます。 手順は以下の通り。 1. SQLite Optimizerをインストール。 2. アドオンの管理画面でSQLite Optimizerの環境設定画面を開きます。 3. 『Firefox終了時にsqliteデータベースのREINDEXを実行する』にチェックを入れます。 以後、Firef
【Fireworks】Fireworksでボタン画像を作る8つのステップ | バシャログ。
ボタン画像を作る手順やテクニックは色々とありますが、そのうちのひとつをご紹介します。 使用したソフトは Fireworks8 です。今回は、たった 8 つのステップでそれなりに見栄えの良いボタンが作れるのが特長です。 Step 1 矩形の上にテキストを置いて、準備オッケー。 Step 2 矩形をほんの少し角丸にします。 アールをきつくすると素人っぽい画像になってしまうので注意。 Step 3 矩形の塗りをグラデーションにします。 Step 4 矩形とテキストの間に上記のようなパス（透過率50%）を置きます。 パスは矩形をコピーしてパスにし、ナイフツールでスパっとやると簡単に作れます。 Step 5 先ほど作ったパスのサイズ・位置を微調整して、塗りのエッジをぼかします。 Step 6 そのままだと立体感に欠けるので、最初に置いた矩形にフィルタ：シャドウ（内側）を適用します。 Step 7 テ
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
