Instagramで使える写真効果をピュアCSSで再現
Instagram.css – Pure CSS Instagram filters Instagramで使える写真フィルターを、CSSのfilterやbox-shadowを使って表現！すごいねー。githu […]
Slimstat Analyticsのログに出てくる”SL”と”PS”の意味は？
WordPressのアクセス解析プラグインのSlimstat Analytics。アクセスログを見ているとSLとPSという謎のプロパティが表示されている。処理か何か、かかった時間を計測しているんだろうなーというのは何とな […]
共通ナビゲーションをインクルードする時の話
Webサイトのヘッダやナビゲーションで、現在表示しているページに対応する部分だけ色を変えたり画像を変えたりすることがある。たとえばこんな風にクラスを用いたり。 <nav> <ul> <li& […]
コンテンツの高さが足りないページでも、フッタをブラウザの一番下に固定する
Webサイトで、特定のページだけコンテンツ部分の高さが足りなくて、フッタの下に余白ができてしまうことがよくある。昔はwindow.onresizeにスクリプト書いて高さを調節して…ってやってたけど、calcを使えばCSS […]
paddingとcalcでブロックのセンタリング
セクションごとに横幅いっぱいの背景色がコロコロ変わるサイトを見てて、divの数が増えそうでやだなーと思ってたところでふと思いついたのでメモ。 margin: 0 auto;でセンタリング(よくある方法) .wrap { […]
Responsive.jsとremを使って、どの端末で見てもデザイン通りの比率のサイトを構築する方法
・Responsive.jsの紹介記事はこちらから CSS3の単位の一つ、remはすごく便利で、基準の大きさを決めてこれを使えば、全て相対的なサイズでサイトを構築できる。詳しい説明は以下から。 ・remってなに？  […]
mbstring.encoding_translationが切れない場合の最終手段
mbstring.encoding_translationという、HTTPクエリ($_GETとか$_POSTの中身)の文字エンコーディングを自動で変換する機能があるが、古いサーバでこれがOnになっていてEUC-JPが基準 […]
JSで使うパラパラ漫画用の画像を作るのにImageMagickが便利すぎる
GIFじゃ力不足で、動画にするようなものでもないアニメーションが必要な時、JavaScriptを使ってパラパラ漫画のようにアニメーションさせるような手法がある。ただ、画像を毎フレーム切り替えるような方法だと、フレームの数 […]
レスポンシブサイトで印刷用レイアウトを保つ
印刷時の「拡大・縮小」の解釈がいまいち分からず難儀したけど(ブラウザによっても違うし…)、要はbodyを固定幅にすれば崩れることはなくなる。そこから印刷用の縮小をしてもいいんだけど、そうではなくCSSのtransform […]
Trelloのススメ
TrelloのLightweightな使い勝手がかなり好み。付箋とかフォルダみたいなUI上の余計なメタファが存在しないのがいいのかな？一般的なタスク管理以外の使い道でも優秀なので、個人的な使い方をまとめてみた。全部無料で […]