Matsumoto.JS - iOS Webクリップでのスタートアップ画面
iOSのWebアプリ(Webクリップ)でのスタートアップ画面、いわゆるスプラッシュの表示を実際に試してみました。 前にブログに書いたように、 Appleの仕様「Specifying a Startup Image」でも ・apple-touch-startup-image をlink要素で指定。 ・サイズは幅320px高さ460pxとすること。 というふうになっています。 用意する画像は標準画面サイズより縦方向が20px小さいサイズで、これは時刻などが表示されるステータスバーを差し引いたものですね。 で、この画像サイズは厳密なものなのか気になったので実際に試してみました。 １．まず仕様通りのサイズ <link rel="apple-touch-startup-image" href="320x460.png"/> １秒くらいですがちゃんと表示されました。 ２．iPhone4以降の解像度(6
CSS3で実装されたボタンの総まとめ
利用も簡単にでき、スタイルシートの勉強にもなる、CSS3で実装されたボタンを紹介します。 ほとんどのものがclassを追加するだけで、簡単に利用できます。
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
CSS3 properties exposed | css3files.com
Enables to animate an element. Every animation consists of the animation properties, e.g. delay and duration, and the related keyframes, which define its appearance. Compatibility -webkit-animation Safari 5+, Chrome 10+ iOS 3.2+ Android 4+ Blackberry 7+ @-webkit-keyframes animation Firefox 16+ Internet Explorer 10+ Opera 12.1+ IE Mobile 10+ @keyframes Not supported by Firefox prior to version 5, I
CSS3でアクアボタン | Another Step.com
現在CSS3を勉強中でふと、グラーデーションと角丸を利用すればCSSだけで一昔前に流行った?アクアボタンを再現できるんじゃないかと思い調べてみました。 ※↓こういうやつ（下のは画像です） 調べてみた 自分ができると思ったくらいなんで、すでに作ってる方もいるだろうと思い調べると ホント素晴らしく見事に作成されてる方がいました。 CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited! 上記サイトではCSSのみでとてもキレイなアクアボタンを再現しています。 実践してみた ただ幅を固定していると使いづらいかなというのとinput要素でなくa要素のみで作成しようと思い、上記サイトを参考にして自分も実践してみました。 アクアボタンデモ HTMLソース <p class="aquaBtn"><a href="#">アクアボ
[CSS]今、そして近い将来に使用するであろうスタイルシートのテクニック集
CSS3のテクニックはさまざまなものがありますが、その中からまさに今、そして次のプロジェクトに使用したくなるテクニックを紹介します。 The Bright (Near) Future of CSS [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 はじめに Styling HTML5 Classing like HTML5 Media Queries Styling Occasional Children Styling Occasional Columns RGB Alpha Color HSL and HSL Alpha Color Shadowy Styles Multiple Backgrounds 2D Transforms はじめに ここでフォーカスするのは、今、そして近い将来に使用するであろうスタイリングのテクニックです。HTML5の要素のスタイリング
CSS3 関連情報・総まとめ
css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ
box-shadowを極めて「Mac風UI」を作る！ (1/6)
HugeDomains.com
菊池 崇の実践！CSS3道場