y-103のブックマーク - はてなブックマーク

いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ

HTML5のマークアップ仕様で追加された「カスタムデータ属性」。でも何のためにあるのか、どう使うのか、説明できますか？この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。なぜカスタムデータ属性か？多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどう

y-103 2018/05/08

リンク

これは便利！CSS Gridのauto-fillとauto-fitの使い分けでRWDが捗る

CSS Gridで使えるrepeat()関数の「auto-fill」「auto-fit」の違いを理解すると、柔軟なレスポンシブ Webデザインが実現できます。わかりにくい両者の違いをデモで確認しましょう。 CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。r

y-103 2018/04/23

grid
CSS

リンク

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポートされています。 position: stickyの仕様ブラウザ・サポート状況（Can I use…）フィーチャー・クエリ（@supports）と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。まずは「こんなのが簡単にできちゃい

y-103 2018/04/23

リンク

Web担当者が知っておきたい、「読んでもらう」ための写真素材の選び方

よくある画像をアイキャッチやメインビジュアルで使うと、読んだことがある記事だと思われてしまいます。画像を選ぶ際覚えておくべきこと、画像の選び方、オススメのフリー素材サイトを紹介します。 Web担当者の皆様は、サイト掲載用の記事を作成する際、ちょっとした記事内画像を自身で作成する機会も多いのではないでしょうか。そんなときに便利なのが、フリー素材の画像です。今回はフリー素材を使用する上で知っておかなければならないロイヤリティフリーと、「またこの画像か」を極力なくすためのテクニック、厳選したフリー素材のサイトを紹介します。完全無料とは限らない。把握すべきロイヤリティフリーの言葉の意味フリー素材と聞くと、「無料」をイメージする方も多いのではないでしょうか。フリー素材といってもすべてが完全に無料の画像ではありません。サイトによっては、ロイヤリティフリーの有無で無料か有料かが分かれています。ロ

y-103 2018/01/29

リンク

SVG線画が美しいリッチアニメーションの作り方 (1/2)

ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成するアニメーションを作る前に、Illustratorを使って素