ページ上のさまざまな要素やコンポーネントにclassを加えるだけで、CSS3アニメーションを適用できるスタイルシートを紹介します。 既存のナビゲーションやボタンにちょっとアニメーションを与えたい時にも最適です。 HTMLにclassを加えて汚したくない人は、jQueryやスクリプトでclassを加えて、クリーンな実装もできます。
![今使用しているナビゲーションやタブやボタンにHTMLを汚さずにさまざまなアニメーションを適用できる -All Animation](https://cdn-ak-scissors.b.st-hatena.com/image/square/26b9bcfdd7a4a2447386de6a75bae7fa759aa7cc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016022501.png)
iPhone など向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう!」と困った経験があるかもしれませんが、 CSS の -webkit-text-size-adjust:100% を使って端末横回転時の文字拡大表示を防ぎます。 -webkit-text-size-adjust を指定しない場合 -webkit-text-size-adjust を指定しない場合は、端末を横にすると文字が拡大表示されます。 -webkit-text-size-adjust:100% を指定 CSSファイルで、以下のように-webkit-text-size-adjust:100% を記述します。 body { -webkit-text-size-adjust: 100%; } 拡大表示は免れました。
レスポンシブWEBデザインへの対応で頻繁に使うCSS の Media Queries ですが、条件分岐のやり方をよく忘れるので整理しました。 「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。 横向き、縦向き横向き@media only screen and (orientation:landscape) { } 縦向き@media only screen and (orientation:portrait) { } 端末別(iPad、iPhone)iPad 横向き/*1024px*/ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) { } iPad 縦向き/*768p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く