Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する
Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する Sass/Compassでは保存の際にminify圧縮するか圧縮しないかを選択できますが、両方出力したい場合、次のような方法で出力できます。 config.rbに以下のコードを追加します。 output_style = :expanded on_stylesheet_saved do |filename| if File.exists?(filename) minifyFile = filename.gsub('.css', '.min.css') FileUtils.cp filename, minifyFile file = File.read minifyFile colon = ':' semicolon = ';' comma = ',' open_brace = ' {' close_brace =
iOS6でtransitionアニメーションが少し遅れて開始する問題
iOS6でtransitionアニメーションが少し遅れて開始する問題 よくあるスワイプギャラリーを作成しているとiOS6でアニメーションが少し遅れて開始する問題にぶつかりました。 どういった感じかというとスワイプ終了時に以下のようにしてtransitionを利用して規定位置までアニメーションさせようとすると一拍あいてから動き出す。iOS5だとちゃんと動作します。 $("#carouselInner") .css("-webkit-transition","-webkit-transform 600ms ease") .css("-webkit-transform","translate3d("+x+"px,0,0)"); 色々調べていると以下のページに行き当たりました。 iOS6 html hardware acceleration changes and how to fix them
@keyframesとAndroid
@keyframesとAndroid CSS3の@keyframesでアニメーションを作成しているんですがAndroidでかなりバグがあるようです。 transformに複数の値を指定すると動かない @-webkit-keyframes hogeName{ 0% {-webkit-transform:scale(1,2)} 50% {-webkit-transform:scale(2,2) translateY(10px)} 100% {-webkit-transform:scale(1,1) translateY(0)} } サンプル というようにtransformに複数の値が不規則に入る場合Androidでは動作しなくなることがあります。（このサンプルだとscaleの指定が無視される） @-webkit-keyframes hogeName{ 0% {-webkit-transform
Androidの場合のみbodyにclassを追加するJavaScript
Androidの場合のみbodyにclassを追加するJavaScript ちょっとした修正でAndroidだけCSSを変更しなくてはいけないことがあったのでAndroidの場合のみbodyにclassを追加するJavaScriptを書いてみました。 <body> <script> if(/Android/.test(window.navigator.userAgent)){ document.getElementsByTagName("body")[0].setAttribute("class","android"); } </script> 上記のようなJavaScriptをbodyの後に書いておくとAndroidの場合のみbody要素に「android」というclassが設定されます。 ライブラリ化するのも大げさなので、ちょっとした修正の際にコピペして利用してください。 関連エントリ
スマートフォンとposition:fixedのバグ
スマートフォンとposition:fixedのバグ iPhoneではiOS5からAndroidでは2.2からposition:fixedに対応されてスマートフォンでも固定配置が利用できつつあります。と思いきや色々と落とし穴が多いのでまとめておきます。 Androidではuser-scalable=noが必須 <meta name="viewport" content="user-scalable=no" /> Androidではviewportにuser-scalable=noの指定がないとposition:fixedが動きません。iPhoneではuser-scalable=noの指定がなくてもposition:fixedが動きますがけっこう挙動が微妙なのでuser-scalable=noは指定しておいたほうが良いでしょう。 サンプル（user-scalable=noあり） サンプル（us
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでダブルタップをJavaScriptで実装する iPhone/iPadのJavaScriptでは「onclick≒タップ」なのに「ondblclick≠ダブルタップ」となるのでダブルタップを利用したい場合は独自に実装しなくてはいけない。 次のように記述するとjQueryで擬似的にダブルタップを実装することが出来ます。 $("p").data("dblTap",false).click(function(){ if($(this).data("dblTap")){ //ダブルタップ時の命令 console.log("ダブルタップ"); $(this).data("dblTap",false); }else{ $(this).data("dblTap",true); } setTimeout(function(){ $("p").data("dblTap",false);
Firebugで始めるCSSデバッグ
Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。 インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。 インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
MTでカスタムフィールドの表示順をベースネーム順に変更するプラグイン「CustomSort」
MTでカスタムフィールドの表示順をベースネーム順に変更するプラグイン「CustomSort」 MTの投稿画面でカスタムフィールドの表示順をベースネーム順に変更するプラグインを作成したので公開しておきます。 custumSort.zip MT5対応版はこちら 「CustomSort5」 利用方法は解凍した「custumSort.pl」をmtディレクトリ内のpluginsにアップしてください。 MTには標準でカスタムフィールドの並び順を制御する機能があるので、基本的にはこのプラグインが必要になることはありません。 表示オプションで、カスタムフィールドの項目をドラックすることにより並び順を変更することができます。 ただ、カスタムフィールドを作ったり消したり色々とゴニョゴニョしていると、この並び替え機能が動作しなくなります。 そうなった際にCustomSortを利用するとベースネーム順に並びかえる
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
[書評]検索にガンガンヒットさせるSEOの教科書
[書評]検索にガンガンヒットさせるSEOの教科書 アイレップの渡辺隆広さんの「検索にガンガンヒットさせるSEOの教科書」を読んだので感想を。 前作の「検索にガンガンヒットするホームページの作り方」も昔読んだのですが、内容量は100ページ増えて価格は80円増しの1680円なので非常にお得感がありますね。 内容としては、SEOの情報などをずっと追っている人にとっては目新しいものはありませんが、ベーシックなテクニックから、あまり知られていないテクニック、少しレガシーなテクニックまでの網羅度が非常によいので、SEOしている人には復習確認、これから始める人やSEOがあまりわからない人には知識の習得に、最適な一冊ではないかと思います。 SEOに関しては新しい知識が重要になりますので、新しい目の知識のほうがページをさいて重点的に説明してくれています。 特に、6章のSEOキャンペーンの戦略設計などは重要で
![[書評]検索にガンガンヒットさせるSEOの教科書](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c2292accb2bb9e7703282d29ae2866304a3a790/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4798114073.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
非常に美しいcoverflowスライドギャラリー『ImageFlow』
非常に美しいcoverflowスライドギャラリー『ImageFlow』 ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。 設置方法 配布サイトより関連ファイルをダウンロードし、サーバーにアップします。 スライドギャラリーを利用したいページのhead要素内で『screen.css』と『imageflow.js』を読み込みます。 <link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="imageflow.js"></script> スライドを利用したい箇所に以下のHTMLコードを記述しま
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
