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が設定されます。 ライブラリ化するのも大げさなので、ちょっとした修正の際にコピペして利用してください。 関連エントリ
Firefox5におけるnth-childセレクタのバグ
Firefox5におけるnth-childセレクタのバグ すごい勢いでアップデートを進めるFirefoxですが特定のバージョンにのみ含まれるバグなどもあってかなりの製作者泣かせです。 次のようなHTMLがあり、 <dl> <dt>リスト1</dt> <dd>リスト1の内容</dd> <dt>リスト2</dt> <dd>リスト2の内容</dd> <dt>リスト3</dt> <dd>リスト3の内容</dd> <dt>リスト4</dt> <dd>リスト4の内容</dd> </dl> 次のようなセレクタを指定した場合、 dt:nth-child(3){ color:red; } 通常は「<dt>リスト2</dt>」が赤色になるのですが、Firefox5だけ「<dt>リスト3</dt>」が赤色になります。nth-of-typeセレクタと同じ動きですね。Firefox4やFirefox6ではちゃんと「
MacのAndroid エミュレータでサイト制作
MacのAndroid エミュレータでサイト制作 Mac OS X へのAndroid エミュレータのインストール方法です。Windowsはこちらを参照(Android エミュレータでサイト制作)。 Android エミュレータのダウンロードサイトよりMac OS X (intel)の「android-sdk_r10-mac_x86.zip」をダウンロード。 ダウンロードしたファイルを解凍してアプリケーションフォルダに移動、「/tools/android」をクリックしてAndroid SDK and AVD Managerを開きます。 左メニューの「Available packages」を選択し、「Android Repository」をクリック。ダウンロードできるAPIが表示されます。 必要なAPIを選択して「Install Selected」ボタンを押します。 Choose Packe
Androidにおけるコンテンツフィットと「overflow:hidden」
Androidにおけるコンテンツフィットと「overflow:hidden」 ネタ元：スマホサイトの作り方で、あんまり書かれてないことを書いてみた - iPhone・Android・WEB・音楽制作｜Kaleidoscope ネタ元ではスマートフォン向けに「overflow:hidden」を指定して横スクロールが表示されないようにするテクニックが紹介されています。しかし、「Androidの場合は完全じゃありません。」の一言が！これはおそらくAndroidのコンテンツフィット機能に関する問題だと思うのでそこらえへんを詳しく解説してみたいと思います。 次のようなHTMLをAndroidとiPhoneで表示したとします。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横スクロール</title> <style> #cona
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
Movable Type で画像挿入をきれいにする「StylelessImage」
Movable Type で画像挿入をきれいにする「StylelessImage」 Movable Type4では画像挿入を使いFTPなどを使わずに画像をアップロードできるのですが、これがちょっと曲者です。 画像挿入に挿入されるHTMLソースは以下のような感じになります。 <form mt:asset-id="1" class="mt-enclosure mt-enclosure-image"> <img alt="画像挿入" src="http://blog.webcreativepark.net/img/20071023_01.jpg" width="500" height="361" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/> </form> デフォルトですとimg要素にclassが自動的に挿
絶対に公開してはいけないPHPプログラミング
絶対に公開してはいけないPHPプログラミング ネタ元：AjaxMail：Ajaxを活用したフリーPHPメールフォーム これはひどいのに誰もつっこみを入れていないので、ツッコミを入れておきます。 セキュリティーフィックスされたました。 AjaxMailを利用しているサイトはスパムメールの踏み台にされます。 送信プログラムであるsendmail.phpの 150行目でPOSTで受け取ったアドレスをそのまま変数に入れて、 $reto = $_POST['email']; 168行目で直接メール関数に利用している。 if($remail == 1) { mail($reto,$resbj,$rebody,$reheader); } ありえない。 mail関数の第一引数には送信先のメールアドレスを設定できるのですが、カンマ区切りで複数のメールアドレスが指定できます。 リターンメールの性質上、リファラ
[続]MovableType3.34から4.01へのアップデート
[続]MovableType3.34から4.01へのアップデート 前回のMovableType3.34から4.01へのアップデートでアップデートが成功していたら、よかったものの色々と不具合が多かったです。 システムテンプレートに関してはアップグレードされていない。 システムテンプレートの『検索結果』が消えている スタイルキャッチャーで作ってるサイトがグチャグチャ 2が致命的すぎました。 ググッて見ると同じような症状の方はチラホラいるようなんですが、解決方法は一切なしだったのでアナログな方法でリカバリをしました。 別ディレクトリにMovableType4.01をインストール(以下新MT)して、新規にブログを作成。 各テンプレートは元のMovableType(以下元MT)よりコピペで新MTに移行します。 元MTよりブログデータをエクスポートし、新MTにインポート。 MovableType3系が
テーブルをソートできるようにするjsライブラリ-table sorting
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
PHPでQRコード生成
PHPでQRコード生成 QRcode Perl CGI & PHP scripts ver. 0.50gを利用すると驚くくらい簡単にQRコードの作成が可能です。 PHP版について説明します。(Perl版でもほとんど同じですが) 使用方法 ダウンロードしたqr_img0.50g.zipを解凍してサーバーの適当な所にアップします。 qr_img.php?d=[QRコードに埋め込みたい文字列(要URLエンコード)] にアクセスすると生成されたQRコードが表示されます。 引数に&s=[イメージのサイズ]や&t=[画像タイプ]を追加することにより、ある程度汎用性がある形で生成することが可能です。 GDを使って生成されているので、毎回生成するのではなくキャッシュ化するなどの工夫は必要です。 キャッシュ化サンプル header("Content-type: image/png"); print make
ブロックレベル要素の高さを揃える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
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で画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
SEO対策ツールまとめ[to-R]
SEO対策ツールまとめ よく使うSEO対策ツールのまとめ。 他にもいっぱいあると思うけど個人的に愛用しているもののみピックアップ。 キーワードアドバイスツールプラス Yahoo!JAPANでキーワードが何回検索されたか調べるツール(2007年4月時点のデータ) キーワード出現頻度解析 そのページにおけるキーワードの比率を計算できるツール。 検索エンジンランキングチェッカー 検索エンジンでの順位をチェックできるツール。 何がすごいかって言うと検索結果が記録されていきます。 Google, YST キーワードチェックツール GoogleとYSTの辞書にキーワードがどのように登録されているかチェックするツール。 XML Sitemap Generator Google sitemapを自動で作ってくれるツール Statsaholic 今までのAlexaの順位遷移を比較できるツール robots.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
