MacBookのSafari 5で見たら問題ないのに、iPadで見ると背景画像が縮小されて表示されてしまう。どうしてだろうと思って調べてみたら、どうやらMobile Safariの制限によるものらしい。 iPadでの表示 MacBookでの表示 画像の最大デコードサイズ（縦 x 横のピクセルサイズ）が2メガピクセルだとのことで、結局、背景画像のディメンションを1800 x 1600px から1800 x 1000px にしたら正常に表示されるようになりました。 2010年8月29日に公開され、2012年4月28日に更新された記事です。 About the author 「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に

2012年5月12日に青山ブックセンター本店で開催された欧文書体セミナーTypeTalks第10回「もっと知りたい！Webフォント」のスライドです。 ・・・ 【追記1】スライド10の「Arialは何と呼ぶ？」は、日本においてArialは色々な呼び方が流通しているという蛇足話で、正しい読み方を追求する意図はありません。統計データは当ブログのFacebookページで皆さんに行ったアンケート結果です。スライドのペラ1画像がひとり歩きしてしまっているため、この場で補足いたします。 【追記2】スライド62の「OpenTypeフォント機能に対応するブラウザ」は、現在Chromeも対応しています。 ・・・ 1. Webフォントとは？ 1-1. Webで使えるフォント 1-2. Webフォントサービス 1-3. 利用者にとってのメリット 1-4. 制作者にとってのメリット 2. Webフォントの今 2-1

とても楽そうだったのでメモです。画面 のサイズに合わせて自動で背景画像 をリサイズしてくれるので背景画像を 固定できる、というもの。jQueryのプラ グインなので手軽でいいですね。ユー ザーがどんなモニタサイズでも同じ 背景画像を表示させることが出来ます。 以前、同じ機能のjQueryプラグインがPHPSPOTさんでも紹介されていましたが、複数覚えておいて損はないのでご紹介します。 ↑ これがデフォルト。 ↑ ご覧のようにサイズを変更しても背景画像は変わりません。 自動で背景画像をストレッチさせるので、環境の違いによる背景画像の表示の差が生じることも無い、というもの。 使い方は非常に単純で、jQuery Backstretchを読み込んでから画像を指定すればおｋです。 <script type="text/javascript" src="/js/jquery.backstretch-1

文字列を分割する(split) String オブジェクトの split メソッドは、対象の文字列を指定した区切り文字で分割し、分割された文字列をそれぞれ要素として格納した配列を返します。書式は次のとおりです。 引数の区切り文字には文字列または正規表現オブジェクトを指定してください。 1 文字だけでなく複数の文字の並びを指定することもできます。分割された部分文字列がそれぞれ要素として格納された配列が返されます。区切り文字が省略された場合は、文字列全体が要素として格納された配列が返されます。 最大分割回数を指定した場合、指定した回数だけ区切り文字が現れた時点で分割を終了します。ご注意いただきたいのは最後に分割された部分文字列は戻り値の配列に格納されますが、最後の区切り文字以降の文字列は戻り値には含まれません。 次のサンプルをみてください。 let months = 'Jan..Feb..Ma

JavaScript のグローバル関数のひとつである parseFloat は文字列を浮動小数点数に変換した値を返します。対象の値が文字列でない場合は文字列に変換したあとで浮動小数点数に変換されます。ここでは parseFloat 関数の使い方について解説します。 ※ Number オブジェクトにグローバル関数の parseFloat 関数と同じ動作をする Number.parseFloat メソッドが用意されています。 Number.parseFloat メソッドについては「文字列を浮動小数点数に変換する(Number.parseFloat)」を参照されてください。

クロスブラウザー＆透過PNG対応のロールオーバー IE6を含むクロスオーバー対応の透過PNGロールオーバーは、ブラウザーによって処理を分岐させ、IE6の場合はAlphaImageLoaderのsrc属性を、それ以外のモダンブラウザーではimg要素のsrc属性をjQueryで操作することで実現できます。用意するHTMLとCSSはサンプル01とまったく同じです。 ▼サンプル03（HTML部分） <ul> <li><a href="#"><img src="images/jquery.png" alt="jQuery" class="rollover" /></a></li> <li><a href="#"><img src="images/javascript.png" alt="javascript" class="rollover" /></a></li> <li><a href="#">

IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま

あぁ、NASAが撮影したなかでこれが1番だわ...夜の地球美しいわ...（動画）2012.07.24 23:00 そうこ 新しい宇宙動画見る度に毎回これが1番って言ってますが、今回は本当に1番です。 再生した瞬間からめちゃくちゃかっこいいんだもん。国際宇宙ステーションから撮影された地球の夜の様子。どこのSF超大作かと思う出来映えです。現実は映画よりもっと美しくもっとダイナミックなんだなぁ。 製作は、ネイト・マイヤーズ（Knate Myers）さん。ISSから撮影された画像を元に、ノイズを取り除きPhotoshopで加工して作りました。動画編集は、ソニーのVegasを使用ですって。 フルスクリーンで見るのをオススメします。 [Twitter] そうこ（Jesus Diaz 米版）

とある案件で text-indet: -9999px で背景を表示させるテクニックを使用したところ、text-indent が効かない現象が起こったため、発生条件・原因・対処法をまとめます。 ※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。 ユーザに見えている画像の文字と全く関係のないテキストをtext-indentで非表示にすることはスパムに当たる可能性が強いので行わないようにしましょう。 発生条件 text-indet が指定されている親要素に text-align: right が指定されていると発生します。 恐らくtext-alignが効くブラウザすべてで発生するものと思います。 ◆サンプル 原因 text-align: right で右