つまづきがちなiPhoneコーディングのTips（JS多め） | バシャログ。
来月はキャプテン・アメリカ見るし、気が付いたら年中アメコミ映画を見ているminamiです。 来月にはまた大きな発表がいろいろありそうなiPhone界隈ですが、iPhoneサイトのコーディングをする際につまづいてきたポイントを挙げてみました。 [HTML] input type="file"は使えない 画像をアップするコンテンツだからフォームに input type="file" を・・・と考えがちですが、iPhone版のSafariでは使用不可です。 [HTML] <meta name="viewport" content="user-scalable=no">が効かない 最近ハマったポイントです。ユーザーに画面の拡大をさせなくすることができるviewportのuser-scalableプロパティですが、本体のアクセシビリティ設定で「ズーム機能」をオンにしているとバッチリ拡大できてしまいま
hamashun me : HTML5のstyle要素が持つscoped属性について
HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます（フローコンテンツの中って意味じゃ無いです）。 フローコンテンツには、div要素やsection要素やtable要素などがあります（詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください）。 scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。 <p>example text</p> <!-- 赤くならない --> <section> <style scoped="scoped"> p { color: red; } </style> <h1>example title<
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
プロパティから CSS 仕様書へのリンク集を作ってみた - lucky bag
CSS プロパティの仕様が確認できる OS X の Dashboard 用ウィジェット「SeeSS」が便利そう。例えば、ある CSS のプロパティについて、仕様書ではどう定義されてるんだっけってな場合に、仕様書の目次から辿ってっつうのがちょっと面倒だったりする。そこで、各プロパティ名から W3C の CSS 仕様書の当該部分へのリンク集を作ってみた。まぁ、「Appendix F. Full property table」のシンプル版って感じ。 プロパティから CSS 仕様書へのリンク プロパティから CSS 仕様書（邦訳）へのリンク 一応、邦訳版へ勝手にリンクした物も作ってみたんだけど、不都合があった場合には削除するかもしんない。あと、リンク切れや漏れがあるかもしれないんで、なんか見つけたらコメントでご報告いただけたらありがたいっす。
)
CSS に関する互換性と Internet Explorer
Windows Internet Explorer の新しいリリースが発表されるたびに、カスケード スタイル シート (CSS) 標準のサポートは絶えず改善されてきました。 Internet Explorer 6 は、CSS レベル 1 に完全準拠した最初の Internet Explorer バージョンでした。 Windows Internet Explorer 8 は、CSS レベル 2 リビジョン 1 (CSS 2.1) の仕様に完全準拠し、CSS レベル 3 (CSS 3) の一部の機能をサポートします。 お客様の Web サイトが、以前のバージョンの Internet Explorer を含むブラウザーを対象にする場合、各バージョンの CSS 準拠レベルを確認する必要があります。 この記事では、Internet Explorer 8 でのサポート状況を含む、Internet Ex
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
CSS PANIC - jsdo.it - Share JavaScript, HTML5 and CSS
＼紹介されました／ http://snook.ca/archives/conferences/css-takes-over-the-world http://tv.adobe.com/watch/max-2011-envision/css-takes-over-the-world/ CSS PANIC - a game, noJS, only CSS and HTML - JavaScriptを使わない。 CSSプログラミング第二弾「CSS PANIC」 m9( ﾟдﾟ)説明！ 制限時間以内に10匹のワニを倒せ！ 10秒くらいでお終いだ！ chromeでしか確認してません 画像はdataURIです。 iPhone , iPadで見るときはhttp://jsrun.it/GeckoTang/4rXg/がおすすめ I ♥ datauriplayground2 http://jsdo.it/ts
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
Google Chrome11でサポートされた音声入力API - Webtech Walker
Google Chrome11の正式版がリリースされたわけですが、音声入力APIに対応したようです。 音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。 HTML Speech Input API Specification 使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっぽい。こんな感じ。 <input type="text" speech x-webkit-speech> 対応してるブラウザだったらテキストボックスにマイクのアイコンがでてると思うのでクリックすると音声で入力できます。 あと、言語をlang属性で指定できる模様。 <input type="text" speech x-webkit-speech lang="en"> ちなみにGoogle検索とかG
Next/Prev & Back to TopをまとめたナビゲーションのCSSデザインアイディア
『mlog』を作るときに、Next/PrevとBack to Topをまとめた、下の画像のようなナビゲーションを作ったんですが、これを応用すれば色々作れそうだと思って、5種類ほど作ってみました。 画像を使わなくてもそれなりに色々できるというデモです。 ただし、そのまま使えばもちろん非対応ブラウザでは表示が崩れますし、コードも長いです。 実用するなら素直に画像を使ったほうが早いし安心だと思います。 前置き終わり。 Google Chrome 12 devだと以下のように表示されます。 Next/Prev & Back to Top Navigation Design Idea デモファイルをダウンロード 各ブラウザの最新版なら、どれも同じように見えると思います。 IE 8は3番目と4番目以外は崩れますが、使えなくはない……と思います。 :before, :after擬似要素が使えないIE 7
IE9のサイトの固定をやってみた metaタグ編 | </gecko> ： げことじ。
IE9の固定サイトを使ってみたので、まずはmetaタグの指定方法をまとめておく。 固定するとどうなるの？ こんな風になります。 画像はjsdo.itで作ったサンプルです。 ホームボタンのアイコン画像 戻るボタンの色 進むボタンの色 ウィンドウサイズ などをカスタマズ可能です。 サイトの固定方法 Windows7でIE9をいれていること。 固定したいサイトを開いてタブをタスクバーにドラックアンドドロップする JavaScriptを使ってどうにかする。 実装方法 基本的な設定はmetaタグだけでできます。 ホームアイコンの指定 立ち上げたアプリケーションの戻る進むの横のホームアイコン icoファイルに32×32が含まれていればそれが採用される。 [html] [/html] アプリケーションの名前 タスクバーのアイコンを右クリックしたときに出るInPrivateブラウズを開始するの下にある文字
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
head要素に読み込むべき唯一のスクリプト「headjs」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
visibilityを入れ子にすると - jsdo.it - Share JavaScript, HTML5 and CSS
hiddenの中にvisibleがあると、visibleは表示されてしまうんですね。知らなかった。 IEのみ、inlineなものはvisibleでも出てこないみたいです。あとiframeは出なかったり出っ放しになったり、ちょっとおかしい？ hoverでhidden解除します。 <div class="hidden"> <span class="visible">ふわふわやん？</span> ふやふややん！ <p class="visible">うひょおおお</p> <p>ひゅわあああ</p> visible: <iframe class="visible" src="http://jsdo.it/" width="300" height="50" alt=""></iframe> <br> inherit: <iframe src="http://jsdo.it/" width="300"
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LESSTESTER - Less Sandbox
Ordering CSS3 Properties | CSS-Tricks
Remove unused CSS - CSS Optimizer
