以前であればアニメーションGIFを用いることが多かったローディングアニメーション(プリローダー)も最近ではSVGを使ったり見栄えだけでなく動きも含めてCSSのみで実装するということも大分増えてきたので、過去に参考にさせてもらったものや覚えておきたいと思った実装方法のまとめです。 また、サンプルやチュートリアル以外に簡単にCSSやSVGを使用したローディングアニメーションを作成できるジェネレータも併せて紹介します。
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
HTML5やCSS3の対応状況を調べるには「findmebyip」がよく使われますが、こちらではCSS3のベンダープレフィックスの有無やiOS・Androidについてまでは調べられないようです。 そこで更に詳しく調べられるサービスを見つけたのでご紹介します。 When Can I use… HTMl5、CSS3、SVG、JS APIなどの対応状況を、主要ブラウザおよびiOS Safari、Androidブラウザ、Opera Mini/Mobileの3バージョン前から最新のテストバージョンまで確認できます。 また、CSS3であればベンダープレフィックスの有無も表示されます。 When Can I Use… 簡単な利用方法 CSSの対応状況を調べる ページ上部のIndexタブから下の方のAll CSS features 各CSSプロパティの対応状況が表示されます。 ベンダープレフィックス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く