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
【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。
未だに9月くらいの気がしているhakoishiです。 おかしい...街がクリスマスとか、正月とか、なんか浮き足立った事言ってる。 さて、今回はSassでスプライト対応する時にCompassを使わないサンプルをご紹介。 Compassのスプライト、すっごく便利なんですよね。 けれど、実案件では使えない場合もあるのではないでしょうか。 画像名を決まったものにしたい、とか。 画像の並びをソースと同じ順にしたい、とか。 納品後、お客さまが更新していく案件では少なくなさそうです。 そんなときの為に、@forを使う方法をば。 サンプル サンプル 恐ろしくざっくりしたサンプルですが...。hoverでの画像切り替え有りです。 使っている画像がこちら。 上に8pxの余白を設けています。理由は後ほど。 HTML 画像置換の為、li>a>spanの入れ子にしています。 <ul class="sprite-li
[Apache] スパムっぽいアクセスをなるべく拒否したい | バシャログ。
どうもこんにちは、nakamura です。最近、我が家の風呂場にやたらとヤモリが出現して困ります。だって目が悪いからぱっと見、やたら動きの早いナメクジに見えるんだもの。 なかなか実感はわかないかもしれませんが、インターネットの世界には全くもって訳の分からないパケットが溢れ返っています。明らかに悪意のあるパケットもあれば、目的のさっぱり分からないものまで多種多様、今日はそんな中でも HTTP のあやしげなリクエストを Apache のちょっとした設定で拒否する方法をご紹介します。（そもそもこういうアクセスのことをスパムと呼ぶのかどうか怪しいですが） 実際にはスパムっぽいアクセスを 100% 防ぐことは不可能ですが、今回ご紹介するのは割と手軽な設定でまぁまぁそれなりに効果がある（と僕が思っている）ものですので、こういうの気になる！っていう人はぜひ一度試してみてください。 環境は CentOS-
![[Apache] スパムっぽいアクセスをなるべく拒否したい | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/20c0b0df62783283e7ba333774006e31f6235c74/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fdb01.jpg)
【Fireworks】角丸の崩れを直してくれるコマンド | バシャログ。
社内が激しく暑いです、toyama です。ビルが日当たりのいい場所にあるためか、熱を吸収する素材でできているのか、PC の熱のせいか、お昼過ぎになると冷房を入れたくなる温度になります。夏暑く、冬暑いです。顔がテカテカ！ Fireworks で角丸矩形を作って無造作に拡大したりすると、角丸のアールが崩れて間延びしてしまいます。角丸は便利で使い勝手のいい図形ですが、下手に扱うと間抜けな感じになってしまいます。 対処法としては、 あらかじめ狙った大きさにぴったり矩形を作る→角丸に変更 ダイレクト選択ツールで一辺のアンカーのみ選択→角丸を維持したまま変形 シンボルに登録して、9スライスの拡大・縮小ガイドを有効にする 等が上げられますが、崩れた角丸を直すコマンドを公開されていたのでご紹介します。 まず、きんくまデザインさんの公開コードをコピーして、指定のファイル名で保存します。 崩れてしまった角丸矩
PHP での携帯開発に使える絵文字変換ライブラリ | バシャログ。
ぼちぼち 11 月も終わりですね。焼き芋たべたい！nakamura です。 ここ最近、なぜか立て続けに携帯サイトの案件が舞い込んできたため、絵文字の自動変換ライブラリを探していくつか見つけました。ただ、どれが一番優れている、というよりはサイトの規模や特性に応じてうまく使い分けるのが良いように感じました。というわけで、今回見つけたライブラリを簡単な解説を交えながらご紹介していきます。 らくらくケータイ3キャリアコンバーター（仮名） PHPを使って3分で作る3キャリア対応ケータイサイト ke-tai.org の matsui さんが自作した絵文字変換ライブラリで、ソフト名も今現在募集中というできたてホヤホヤのものです。特徴はなんと言ってもそのシンプルさと、導入がヒジョーーーーに簡単な事です。 ライブラリとは呼べないかな、とも思ってしまうシンプルさで必要なファイルは viewer.php と .
（初心者向け）Smarty 勉強会の資料が出てきたので公開してみる | バシャログ。
以前（と言ってもかなり前ですが）、社内で Smarty の勉強会をしました。 デザイナ、コーダ向けの勉強会で、Smarty でこんなタグで書かれてる場合、こういう表示をしようとしてるんですよーっていう、まあ勉強会って言うほどでもなく、「紹介」みたいなものですが。 良く使いがちなタグを噛み砕いて紹介しました。 サーバの整理をしていたところ、その時の資料が出てきました。 どのくらい需要があるかわかりませんが、「Smarty をプログラマじゃない人に周知したい！」という人がいるかもしれないと思い、公開しますね。 こんな感じの超シンプルな資料です。 そしてソースはこちらです。（zipファイル・28k） これをそのまま展開して、PHP の動く場所に置いてください。 そして、それぞれ動いてるところとソースを比較したりすると、基本的なタグの使い方が分かったりするかもしれません。 中身は以下です。 Sma
私がATOKを5年以上使い続ける理由 | バシャログ。
最近、日本語を変換するソフトのATOK2009 for Macの予約受付が始まりました。いま使っているATOKが2006年のものなので、迷わず予約しました。私は毎年購入するほどのヘビーユーザーではありませんが、ここ5年ほどは、2年に1つ以上はATOK製品を購入して利用しています。ちなみに今まで利用した製品は、 ATOK 10(PCプリインストール) ATOK 16 ATOK 2005(一太郎2005に同梱) ATOK for Linux ATOK 2006 for Mac(プレミアム) ATOK 2008 for Windows(プレミアム) 以上です。毎年買うわけではありませんが、なぜアップグレードしながら使っているのか理由を考えてみました。 Mac でも Windows でもほぼ同じ操作方法で使える WindowsにはMS-IME、MacにはことえりというIMEが標準で搭載されています
レキシカル変数を意識した jQuery プログラミング | バシャログ。
こんにちは、ktanakaです。今日はjQueryを利用したら無意識に使っているかもしれないレキシカル変数についてとりあげます。まず、jQueryを利用したコードを示し、それをレキシカル変数を利用したコードに書き直します。 jQuery で click して toggle するコード とりあえず、レキシカル変数とは何か？という話は置いて、 jQuery を利用したコードを示します。 index.html <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="program.js"></script> </head> <body> <p><input type="button" id="trigger" value
フリップが回転するjQuery Plugin用プラグイン QuickFlip | バシャログ。
QuickFlipは、フリップが回転するような感じで表示するコンテンツを切り替えるプラグインです。 設置方法 配布ページよりデータ一式をダウンロードし、QuickFlipを利用したいhtmlのhead要素などで以下のファイルを読み込みます。 <script src="jquery-1.2.6.min.js" type="text/javascript"></script> <script src="quickflip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="quickflip.css" /> 表示する部分は以下です。 <div class="quickFlip"> <div class="quickFlipPanel"> <p> Front content here
[使えるCSSテクニックVol.2] CSS を使った見栄えのいい引用文 | バシャログ。
第 7 回目は「CSS を使った見栄えのいい引用文」です。 他の記事を引用したり、出典の一文を掲載したり、というところに使用する「引用文」を CSS できれいにしてみようじゃないかという試みです。 01. シンプルに見栄えよくしてみる [サンプル] あ…ありのまま 今 起こった事を話すぜ！ 『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』 な…何を言ってるのかわからねーと思うがおれも何をされたのかわからなかった… 頭がどうにかなりそうだった… 催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ もっと恐ろしいものの片鱗を味わったぜ… [HTML] <blockquote id="simple01"> <p>あ…ありのまま 今 起こった事を話すぜ！<br /> 『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』<br /> な…何を言ってるのか
![[使えるCSSテクニックVol.2] CSS を使った見栄えのいい引用文 | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
便利なCSSデバッグツール「XRAY」 | バシャログ。
ブラウザで表示を確認しながらCSSを組む際に、一番便利なツールはやっぱり「Firebug」なのですが、どうもFirebugは高機能すぎて動作が重い気がします。 ただCSSの各プロパティを画面上で見たいだけなんだケドなぁ、という時にちょっと便利なCSSデバッグツール「XRAY」です。 XRAY ブックマークレットタイプなので、準備はコチラのサイトからツールバーなどに登録するダケ。 以降はクリックひとつで起動します。 確認したい箇所をクリックすれば、各プロパティの値やID/クラス名が表示されます。 HTMLの構造を追いながら確認することもできます。 とても気軽で便利です。 都合のいいコトにIEもSafariもイケます。 あと、Flashのデバッグツール「Xray」もas3に対応して大変便利。
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いフォーム パート 2 | バシャログ。
第 5 回「CSS を使った見栄えの良いフォーム パート2」です。 各ブラウザ毎の差異でなかなか扱いにくいフォームまわりですが、今回は CSS だけで工夫する例をいくつかご紹介します。 ■背景画像を使った例 まずは背景に画像を使用した例です。 CSS の指定は単純に input タグのワクを消して背景に乗っけただけ。画像を入れ替えれば簡単にガラリと印象の違うフォームを作れます。 XHTML <form> <ul> <li><input type="text"/></li> <li><input type="text" /></li> <li><input type="text" /></li> </ul> <p><button><img src="ex01_btn.gif" alt="" width="63" height="17" /></button></p> </form> CSS
【Fireworks】Fireworksでボタン画像を作る8つのステップ | バシャログ。
ボタン画像を作る手順やテクニックは色々とありますが、そのうちのひとつをご紹介します。 使用したソフトは Fireworks8 です。今回は、たった 8 つのステップでそれなりに見栄えの良いボタンが作れるのが特長です。 Step 1 矩形の上にテキストを置いて、準備オッケー。 Step 2 矩形をほんの少し角丸にします。 アールをきつくすると素人っぽい画像になってしまうので注意。 Step 3 矩形の塗りをグラデーションにします。 Step 4 矩形とテキストの間に上記のようなパス（透過率50%）を置きます。 パスは矩形をコピーしてパスにし、ナイフツールでスパっとやると簡単に作れます。 Step 5 先ほど作ったパスのサイズ・位置を微調整して、塗りのエッジをぼかします。 Step 6 そのままだと立体感に欠けるので、最初に置いた矩形にフィルタ：シャドウ（内側）を適用します。 Step 7 テ
PHP を書く時に便利な秀丸のマクロやら強調表示やら | バシャログ。
PHP を書く人の事ってなんていうんでしょう。 前は（今も？）「ペチパー」とか言われたりしてましたが、 これが結構好きでした。なんか気が抜けた感じが好きです。 今ふと「ペチピスト」ってのを思いつきましたが、これまた良いなあ。 すごく頼りない感じが。 さて、そんなペチピスト（気に入った）な僕ですが、 以前の書いたように、エディターは秀丸を使用しています。 ただし、効率良く作業するためには強調表示やマクロは必須ですよね。 そこで、普段使用している PHP 用の秀丸の強調表示やマクロをご紹介します。 PHPまるごと強調表示 Ver1.0 関数や定数をハイライトしてくれる、PHP用の強調表示ライブラリです。 これが無いと始まりません。 ちょっと古いですが、今のところ問題なく便利に使用させてもらってます。 PHPマニュアル検索マクロ 関数のマニュアルを一発で開いてくれるマクロです。 関数をなぞってマ
Smarty研究（4） URL らしき文字列に自動でリンクをはる修飾子 | バシャログ。
久々に Smarty のお話。 今回は、URL と思しき文字列を自動でリンクする修正子を作る、です。 とあるプロジェクトで、URL を自動でリンクする必要性が出てきた時に、 相変わらず面倒くさがりS級ライセンス保持者の僕は、 「自前で作るのめんどくさいーなんかいいもんないかー」とブツブツ言いながら 以前のプロジェクトの Smarty のプラグインディレクトリを覗いていたら、 ありました！その名も「auto_link」！なあんだ、便利なもんあるじゃん。 と思ってソースをよく見てみたら、 「 * @author Kimoto」 俺じゃん！作ったの！全然おぼえてねぇー！ はい。という事で、ソースです。 function smarty_modifier_auto_link($string, $type = 'url', $text = 'URL') { // URL形式のチェック用文字列（正規表現
すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
[使える CSS テクニック] ブラウザのデフォルトスタイルをリセットする | バシャログ。
現場でバリバリコーディングをしている当ブログの執筆陣が、ちょっと使える CSS のテクニックをご紹介する短期集中連載企画。全 10 回の予定でお送りします。 第 1 回目は「ブラウザのデフォルトスタイルをリセットする」です。 ほんの 1～2 年前までは「*（ユニバーサルセレクタ）」を使って以下のようにブラウザのデフォルトスタイルをリセットするのが主流でした。 * { margin: 0; padding: 0; border: none; list-style-type: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; } ただ、全要素のスタイルを無条件でリセットしてしまうと、input 要素や button 要素などフォーム周りの要素の表示にまで影響が及ぶ事から、既にユニバ
[使えるCSSテクニックVol.2] CSSで実現するエラスティックレイアウト | バシャログ。
前回ご好評をいただいた「使えるCSSテクニック」ですが、 今回は「使えるCSSテクニック Vol.2」として弊社デザイナーから前回同様、WEB制作で使えるCSSテクニックをご紹介していきます。 第1回は、エラスティックレイアウトについてです。 WEBサイトレイアウトでは以下のレイアウトが基本となっています。 固定（ソリッド）レイアウト 名前のとおり、横幅固定のレイアウトです。特に説明する必要もありませんね。 可変（リキッド）レイアウト ブラウザのウィンドウサイズに合わせて、伸縮するレイアウト手法です。エラスティックレイアウトも、可変レイアウトの一種になります。 前置きはこの辺で。 エラスティックレイアウトについて エラスティック【 elastic 】には、ゴムひも・しなやかな・伸び縮みするという意味があります。 ここで言うエラスティックは「伸び縮みする」という表現が一番近く、文字サイズの変
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いテーブル パート2 | バシャログ。
[HTML] <table id="table-01"> <tr> <th>MS 名</th> <th>パイロット</th> <th class="speech">台詞</th> </tr> <tr> <td>ザク II</td> <td>ジーン</td> <td>シャア少佐だって、戦場で勝って出世したんだ！</td> </tr> <tr class="even"> <td>グフ</td> <td>ラル</td> <td>ザクとは違うのだよ、ザクとは！</td> </tr> <tr> <td>アッガイ</td> <td>アカハナ</td> <td>大佐、イワノフのアッガイがやられました</td> </tr> <tr class="even"> <td>ゲルググ</td> <td>シャア</td> <td>ララァ、私を導いてくれ</td> </tr> </table> [CSS] 要所のみ掲
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
