レスポンシブWebデザインを実装するためのTips

何種類あるかわからない端末に毎年増える解像度、そんなカオスな表示環境にどうやって対応するのよ!?いざ作ろうとしたとき困りがちな「レスポンシブデザイン」について、これまでに調べたり使ったりした方法を総ざらいしました。フロントエンド向けですが、デザイナーが決めておくと良い事もまとめてあります。

[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい

スマートフォンのブラウザアプリで画面の高さにきっちり収まる仕様で作っていると 高さが足りないのでwindow.scrollToしてもアドレスバーが隠せない。 でも隠した方が表示領域が増えるので何とかしたい。 単純に考えれ … “[js,iPhone,Android] コンテンツがwindow.innerHeightより小さい時にもアドレスバーを隠したい”の続きを読む

[HTML5] アプリケーションキャッシュの使い方

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、 表示の高速化やオフラインでの動作を可能にするものです。 ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。 特 … “[HTML5] アプリケーションキャッシュの使い方”の続きを読む

[js] iframeからのアクセスかブラウザでの直アクセスか判別する

同タイトルの質問より。 もうちょっと具体的にソースを書いてみる。 index.html(フレームを呼び出すページ) iframeのsrc属性で、ファイル名に続けて適当にパラメーターをつける。 inner.html(フレー … “[js] iframeからのアクセスかブラウザでの直アクセスか判別する”の続きを読む

[CSS] contentプロパティで挿入できるコンテンツ

clearFixでお馴染みなCSSの擬似セレクタ:beforeと:afterではcontentプロパティというものが使えるわけですが、:beforeと:afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

[PHP] ページング機能の仕組みとか作り方とか

初心者向けのページング(ページネーション)機能の作り方解説です。前後ページだけのリンクを表示する簡単なものと、ページ番号を表示する標準的なものの2タイプ紹介しています。サンプルソースと動作デモもあります。

[mootools]slideBox ver1.0をマウスホイールに対応させる

スクロールバーをカスタマイズ出来るmootools依存のライブラリslideBoxを、マウスホイールでも動くよう適当に変更してみた。 デフォルトだと矢印のクリックでスクロールするんだけど、 基本的なスクロール量は表示エリ … “[mootools]slideBox ver1.0をマウスホイールに対応させる”の続きを読む

[jQuery]サムネイルクリックで画像変更(+effect)

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。 このスクリプトは画像切り替えだけです。 動作にはjQuery1.2.6が必要です。 WTN*jQuery sample:: Image … “[jQuery]サムネイルクリックで画像変更(+effect)”の続きを読む

[WP]AutoExternalLinkプラグイン修正

inoccoさんが作成されたリンクに新しいウィンドウを開くアイコンを自動で追加するプラグイン AutoExternalLinkをVicuna用に修正してみた話。 プラグイン添付のjsファイルはLogJETさんが作成された … “[WP]AutoExternalLinkプラグイン修正”の続きを読む

[JS]Table内セルを自動的にストライプにする

1行間隔でストライプとか、何行おきかで線が引いてあるTableをたまに見ますが、 いちいちclass追加してると面倒なのでjavacript使った方が早いよね。 っていうことでそういう感じのことをするスクリプトのサンプル … “[JS]Table内セルを自動的にストライプにする”の続きを読む

[js]メールアドレスを自動収集されないように表示する

mailtoリンクつきのメールアドレスをスタイリッシュにjavascriptで表示するサンプル。document.writeではなく、aタグ作って挿入すればソースにはテキストが出ない。気になるのは外部jsも自動収集されるのか、ということでしょうか。