ul・ol・li要素の備忘録 - NxWorld
かなり今さら感はありますけど、ul・ol・li要素関連の備忘録です。 対応ブラウザ（特に一部のIEで未対応）とかそもそも使う場面がそんなにないとかの理由で使用頻度がかなり低いと思うのもありますが、低いからこそ使おうと思ったときにパッと思い浮かばなそうなので書き残しておきます。 list-style-type リストマーカーの種類を指定するプロパティlist-style-typeのメモです。 使用頻度が高いと思うのはulやolにデフォルトで設定されているdiscやdecimal辺りかと思いますが、他にもいろいろあるのと一部のブラウザでは未対応などあるので、パッと確認したいときのために一覧にしました。 画像はWin7 Chromeでの表示をキャプチャしたもの。 ChromeやFirefoxといったブラウザでは上記のように問題なく表示されますが、IEでは一部のマーカーが対応していない場合がありま
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA
HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。 スプライトシートを使う方法 ベクターアニメーションを使う方法 スプライトシートビルダーを使う方法 おまけ：GIFアニメーションを使う方法 おまけ：Flashアニメーションを使う方法 スプライトシートを使う スプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。 表現の再現性が高いう
デバイス別、クロスブラウザ別対応 – not useragent - シンプルシンプルデザイン JavaScript
もはや他ブラウザでも問題ないようにクロスブラザ対応だけでなく、スマートフォンやタブレット端末などマルチデバイスに対応できるようになっておかなければ、という時代になって1,2年が経ちました。 「プログレッシブエンハンスメント」や「グレイスフルデグラデーション」、「メディアクエリ」、「CSSスプライト」、「モバイルファースト」というキーワードも聞かれるようになりました。 あ、最大のキーワードは「html5」。これは広義にも狭義にも使われてますね。 このような流れを受けてか、ビジュアルデザインは大きく、フォントも大きくなったサイトを見かけることが多くなった気がします。 結果見やすく、アクセシビリティにも良い印象。個人的にも素材を大きくダイナミックな表現は好みなので見てて楽しいです。 っとデザインの話しではなく、クロスブラウザ、マルチデバイスにどう対応するか。 そのコンテンツのユーザーは誰か？をデ
ファイルの文字コードと改行コードをチェック « コーディングの牧野工房 スタッフブログ ぜんぶのせ
FileCode Checker ver1.0.0 http://www.vector.co.jp/soft/winnt/util/se478635.html FileCode Checkerはファイルの文字コードと改行コードをチェックするソフトだ。 コーダーならお客さんからもらったhtmlデータをもとに作業を行う場合、開始前に文字コードと改行コードを調べた経験は誰にでもあるだろう。 また、実際にどのような設定でされているか知りたい場合だけでなく、自社内で作業した後に間違いなくサイト全体で統一されているか確認したいこともある。 特に、複数人で作業している場合や、改行コードの違う案件が複数進行しているときなど、気になりだすと大変だ。 調べたくても文字コードは通常html上に宣言されているので判断がつきDreamweaverはそれに準じて記述できるので概ね問題ないが、改行コードについては
search 型 input 要素 のスタイルをリセット - terkel.jp
HTML5 では、input 要素の type 属性に search という検索フィールドのための値が使えます。現時点ではこの search タイプをサポートしているのは Safari と Chrome のみなのですが、これらの対応ブラウザでは、入力したテキストをキャンセルするボタンが表示され、Mac ではフィールドが角丸になります。 しかし、Safari と Chrome でこの search タイプの input を CSS でスタイリングしようとしてもほとんどコントロールできず、ブラウザのデフォルトでレンダリングされてしまいます。font、padding、border、background といったごく基本的なプロパティがことごとく無効。これをなんとかリセットし、text タイプと同様にスタイリングできるようにもっていくのはけっこう面倒で、以下のようなコードが必要です: /* Res
Stitches - An HTML5 sprite sheet generator
Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: <link rel="stylesheet"
HTML5によるアニメーション作成を容易にする「Adobe Edge」 - builder by ZDNet Japan
Adobe Edgeとは 「Adobe Edge」（以下、Edge）は、Adobe Systemsが開発中のHTML5アニメーション作成ツールである。Edgeでは、HTML5、CSS3、JavaScriptを利用したアニメーションを、コードをほとんど記述することなく作成することができる。 HTML5を使えばWeb標準の技術だけでインタラクティブなコンテンツを実現できるが、Flashなどの既存技術に比べると完成されたオーサリングツールがない点が課題とされていた。それに対して、デザインツールベンダーの雄ともいえるAdobeが送り出したのがEdgeだ。 Edgeで提供される主な機能としては、次のようなものが挙げられている。 シンプルで直感的に使いやすい描画ツール 既存のWebページにEdgeで作成したアニメーションを埋め込むことが可能 WebKitベースのプレビュー画面 スニペットを有したJav
MdN Design｜総合情報サイト
スマートフォン向けのサイトを構築する上で検討しなくてはならないのがHTML5＋CSS3である。 HTML5に関してはこれからのPC向けWebサイトの構築においても必須となる技術であり、PC、スマートフォンともにここ数年間、一番のトレンド技術になることは間違いないだろう。ここではHTML5＋CSS3でどのようなことがスマートフォンでできるか、どのような問題があるかを見ていこう。 スマートフォン対応サイトでHTML5＋CSS3がここまで普及しているのは、ブラウザに搭載されているエンジンが重要な役割を担っている。 現在、スマートフォンの主流となりつつあるiPhone、Android、そして最近のBlackBerry に搭載されているブラウザのエンジンにはWebkitが採用されている。 Webkitは元々KHTMLと呼ばれるWebエンジンを元に、Appleが整備してきたWebブラウザ用エンジンであ
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
Modernizr: the feature detection library for HTML5/CSS3
MENURespond to your user’s browser features.Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.Add your detects Development build What is Modernizr?It’s a collection of superfast tests – or “detects” as we like to call them – which run as your web page loads, then you can use the results to tailor the experience to the user. Why do I need it?All web develope
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontend Focus
API Usage
Normalize.css: Make browsers render all elements more consistently.
502 Bad Gateway nginx openresty 133.242.243.6
http://plus.appgiga.jp/masatolan/2012/01/15/11763/
HTML5 Readiness
http://jp.droidget.com/mobile-5/html5
html5resetcss - Project Hosting on Google Code
html5shiv - Project Hosting on Google Code
