Perfect horizontal AND vertical centering in CSS, at any width or height! Works with percentage based width/height, min-/max- width, images, position...
Lots of us frontend developers seem to be increasingly concerned with interacting with the DOM lately, during a time when JavaScript engines and browser rendering performance has been faster than ever! In this article I will try to douse a few myths about DOM interaction in foam, whilst giving a few little performance tips to make sure your apps run super fast when you're interacting with the DOM.
ブログにて 6日間に渡り、WordPress 拡張機能の実装例を紹介しながら、フックの動作や内部 API、そしてそれらを骨組みする方法を解説してきました。 このページは最後のまとめと目次となります。 連載はブログ記事としてひといきで書いたもので、本来であればここから沢山のリライトをしたいところですが、まずは一度パブリッシュしております。 書き足りない部分、不要なギャグ(!)、言葉やソースコードの揺れが見られますが、推敲は別な機会にということでどうかお許しください。 はじめに WordPress を使ったサイト構築の手法の中で必要となってくる、フックや内部 API などを用いた機能の拡張方法と、そのプログラムの構成方法を解説します。 紹介しているサンプルソースコードは WordPress のプラグイン形式、もしくはテーマの functions.php の双方で使うことができます。つまり内容は
テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 Replacing the -9999px hack (new image replacement) [ad#ad-2] 画像置換:-9999px 改善したテクニック 画像置換:-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「text-indent:-9999px;」でテキストを見えない位置にし、見出しとなる画像を背景画像として表示します。 #sample06{ width:300px; height:50px; background:url('bg-01.gif') no-repeat 0 -250p
Mac OS X Lionでabを実行する際にエラー:Connection reset by peerが発生する際の対処方法 本日、ベンチマークを取ろうとabを実行したら、Apache Benchが動いていませんでした。 これは、ライオンに同梱されているApacheソフトウェアのバグのようです。 abをアップデートすると無事に実行できるようになりましたので、対処方法をメモしておきます。 普通にabを実行すると以下のエラーが出て来ます。 apr_socket_recv: Connection reset by peer (54) うーん。謎のエラーです。abをアップデートしてみましょう。 対応方法 1.Apacheの最新バージョンをダウンロード $ wget http://apache.mirrors.pair.com/httpd/httpd-2.4.2.tar.bz2 ※2.4.2が利用で
必要ならどうぞ。 デモ jQueryでフォームの値を取得する方法をまとめ – jsdo.it – Share JavaScript, HTML5 and CSS jQueryでフォームの値を取得する方法をまとめ – jsdo.it – share JavaScript, HTML5 and CSS 共通:要素の探し方 input要素なんかにid振っちゃうのが一番なんだけど、属性セレクターを使うと楽な場合があります。つまり[name=xxx]で検索するやり方。 <form id="my-form"> <input type="text" name="my-text" value="This is text." /> </form>
通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。 Demo: ul after floated element デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。 これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。 The bor
2011年07月23日13:15 カテゴリTipsiTech tips - Lion - Recovery HD とその影響 なぜハノイまできてこういう記事を書いているのかさておき、忘れないうちに書いておきたいので。 Lionがリカバリーパーティションを連れてきた OS X v10.7 Lion で加わった新機能の一つが、リカバリーパーティション。わずか650MBだが、OSの再インストールにとどまらず、Time Machineからの復旧など、今までのリストアDVD/USBメモリーに出来ることがすべて出来る上にSafariまでついているので、復旧方法を調べたり人に尋ねたりすることも出来る優れもの。よくWintel Notebook についている「リカバリーしか出来ない」パーティションとは天と地の差がある。 とはいえ、完璧に「今までと同じ」というわけには行かないので、これまで見つけた注意点をい
WordPress で使用可能なショートコードは、グローバル変数 $shortcode_tags に保存されてる。 $shortcode_tags は、キーがショートコード名、バリューがショートコードが記載された時に呼び出されるコールバック関数。 一覧は、以下のコードで取得可能。 global $shortcode_tags; $tagnames = array_keys($shortcode_tags);
WordPress をマルチサイト化しようとしてハマったのでメモ。 以下の状態と同じになってしまった。 マルチサイトの設定を行った後に、データベースのチェックと復元を要求され、 実行すると、以下のテーブルがないと言われてしまう。 wp_1_posts: Table ‘wordpress_db.wp_1_posts’ doesn’t exist wp_1_comments: Table ‘wordpress_db.wp_1_comments’ doesn’t exist wp_1_links: Table ‘wordpress_db.wp_1_links’ doesn’t exist wp_1_options: Table ‘wordpress_db.wp_1_options’ doesn’t exist wp_1_postmeta: Table ‘wordpress_db.wp_1_pos
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー&カルーセルプラグイン、チャート&グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
え?空き容量7.66Gとか… マジでぇ〜、こんだけぇ~?なんで~??? こりゃあネコ科最強のライオンさんの動きも悪くなるでしょ。 ってことでMacBook Airのダイエット開始! 以下のAGENDAの順番で調べながらやっていきますよ。 AGENDA 写真や動画、音楽ファイルを外付けHDDに移動 未使用アプリの削除 削除アプリの残骸ファイルの削除 不要なフォントの削除 iPhoneなどのアプリを外付けHDDへ iPhoneなどのBackupFileも外付けHDDへ もっと容量が必要な人は追加しよう ※必ずMacのバックアップを取ってから自己責任で行いましょう 1. 写真、動画、音楽ファイルを外付けHDDへ やっぱり写真や動画、音楽って容量が大きい。 ってことでこれらは外付けHDDへ。 MBAを購入して真っ先に行ったことだったのでこの時点では容量の変化はなし。 以下の記事で詳しく説明されて
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
皆さん、Skypeの画面共有機能使ってますか。ある日、僕のSkypeで画面共有が出来なくなりました。それどころかビデオ通話すら出来ません。困った。 でね、タイトルで答え全部言っちゃってますが、最終的にはSkypeのプロファイルディレクトリにあるshared.xmlを消したら直ったわけですよ。 shared.xmlについて調べてみると、他の不具合の場合でもコレが原因であることが多いみたいなので、お手元のSkypeがおかしくなった場合は是非一度試して見て下さい。 以下、shared.xmlの消し方をWindows・Macそれぞれ簡単に書いてみます。 Windowsの場合 Skypeを終了する Windowsキー + Rキーを押す %APPDATA%\Skypeと入力しEnterを押す shared.xmlをリネームまたは削除する Skypeを起動する 不具合直ってるやったー Macの場合 Sk
2011年07月21日23:30 カテゴリTipsiTech tips - Lionの唸り声がしばらくやかましい理由 獅子来る。 アップル - OS X Lion - Lionを手に入れよう。Mac App Storeだけで購入できます。 MacをOS X Lionにアップグレードする方法は極めてシンプル。Mac App Storeアイコンをクリックして、Lionを購入するだけです。価格は2,600円。あとはMacにまかせましょう。Lionをダウンロードするために必要なものがそろっているか、確認しておくのをお忘れなく。 というわけで私も(今や旧式の)Mac Book Air 3,2 と(もっと旧式の)iMac 11,1 を獅子化したのだけど、一つ引っかかったことがある。 なぜか、冷却ファンがまわりっぱなしなのである。 特にMacBook Air。そもそも回ることさえ滅多にないのにフル回転。
こんばんは傍島です。 なんとなく浮かれ気分になる夏ですが、Macユーザーは、さらに浮かれ気分のはずです。何のことかと言えば、『Mac OS X Lion』がリリースされたから。『Snow Leopard』のリリースが、2009年8月28日だったので、Lionは約2年ぶりのメジャーアップデートです。 iPhoneやiPadだと、例え騒いでも仕事の道具としてMacがないと、ことが進まないことが多く、Lionの登場を待ちわびていた方も多いはずです。そんな期待のMac OS X Lionですが、期待に胸膨らませて使ってみると、操作性に違和感を感じる部分がないでしょうか? その違和感は、設定を変更することでスッキリ解消できるので、事例と対象方法をご紹介します。 スッキリしたい方は、以下で。
Finder等の設定に関しては既に情報があった上に、10.6の隠し設定コマンドがそのまま使えたので直ぐ終わったのですが、Magic Mouse と Mission Control の設定で苦戦しました。デフォルト機能だけでは使い辛いので、Better Touch Tool(以後BTT)を入れ、機能を拡張しての設定です。後で見返せるように、設定したことをまとめて書いておきます。 マウス ポイントとクリック 逆スクロールを旧仕様に。 ページ間をスワイプ 「1本指または2本指」にして、プレビュー.app等でページをめくる動作を1本指で。Finderやブラウザ等の、「進む」「戻る」を2本指で操作できるように設定。 ここの設定で2本指を有効にしたら、元々2本指スワイプが使われているサードパーティ製アプリ(Reederとか)のスワイプ機能が使えるようになりました。 フルスクリーンアプリケーション間をス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ:CSSオフの表示 こういったエ
日本語でのMac,iPhone,iPad,iPodなどApple関連の情報サイト。MACお宝鑑定団のBlog。 Macに捉われず、様々な情報を掲載しています。 OS X LionのTipsをまとめました。 Appleのサポート情報へのリンクも掲載しています。 関連エントリー:各メーカーの OS X Lion 対応情報のまとめ、およびリンク集 ・OS X Lion 10.7.3から、iOS 5と同じ絵文字デザインに変更される ・OS X LionでiCloudをDropboxのようにクラウド同期フォルダとして使用する方法 ・iCloudカレンダーの利用を停止して、OS X LionのiCalで単独利用する方法 ・Appleの「MobileMe」から「iCloud」への移行でMobileMeサービス終了まで継続利用出来るものと出来ないもの ・OS X LionでMacのインターネット共有を内蔵
Firefoxや、Google Chrome、Safari辺りでいつの間にやら実装された、textarea のリサイズ機能はとても便利で良いなーとは思ってますが、止めたい時も有りますよね。 なので、止める方法を。 CSS3にそれっぽいプロパティが有るので、1行書くだけです。 textarea { resize: none; } こんな感じですね。 これは、ユーザー側で要素のリサイズ機能を許可するかしないかってプロパティなので、別にtextareaに限らず、overflowプロパティの値がvisible以外の指定が有る場合に使っていける感じです。 これだけだと、寂しいのでエントリーっぽくするために。 textarea以外に使うとしたら、トップページの新着情報みたいなので時々見る、高さ固定して overflow: auto; とかでスクロールバー出してる場合とかに使っていけばユーザー側でリサイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く