HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET
こんにちは、@yoheiMuneです。 最近githubで人気になっているtobiasahlin/SpinKitというレポジトリ（Starが2,500個も！）では、 CSS3アニメーションを使った心地よいアニメーションのサンプルが公開されています。 今回はそのレポジトリの内容を拝借して、各アニメーションの実装内容を学んで、自分も書けるようになろうというためのブログです。 SpinKitで公開されているCSSアニメーション 公開されているものは執筆時には全部で８個あり、http://tobiasahlin.com/spinkit/でデモが確認出来ます。 綺麗なものがいっぱいあって、個人的には好きです。 以下ではそれぞれのアニメーション内容を拝借して、実装内容を学びたいと思います。 <style> .spinner1 { width: 30px; height: 30px; backgroun
![[CSS3] 心地よいCSS3アニメーションを実装する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/53d67670ab9a4d96908df62696837d176e920257/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F297.jpg)
CSS3で簡単アニメーション！画像や要素を動かせる！背景色が変化する！ | WEB-LABO
JavaScriptは分かんなーい！という方も、CSS3を使ったアニメーションはキーフレームでの指定なので簡単かも！？ まずはサンプルからどうぞ！ サンプル１「移動」 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル１「移動」</title> <style type="text/css"> @keyframes moveimg { 0% { left: 0px; top: 0px;} 50% { left: 100px; } 100% { left: 100px; top: 100px; } } #sample1{ animation: moveimg 5s infinite; position: relative; } </style> </head> <body> <img src="C
CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） フラップイズム
こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～