タグ デスクトップ・スマホ
人気順 10 users 50 users 100 users 500 users 1000 usersCSSでdisplay:none;からアニメーションができる! @starting-styleがすべてのブラウザにサポートされました
CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: an... 続きを読む
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数(カスタムプロパティ)の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 ... 続きを読む
CSSのブレンドモードを美しいデモでインタラクティブに学べる -Brad Woods' Digital Garden
CSSのブランドモードは、知っているけどあまり使用したことがないという人もいると思います。そんなCSSのブレンドモードを使用して、さまざまな美しいデモでインタラクティブに学べるサイトを紹介します。 CSSのブレンドモードは、IEを除くデスクトップ・スマホのすべてのブラウザでサポートされています。 CSS Blend Mo... 続きを読む
Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js | コリス
Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。 Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。 アニメーショ... 続きを読む
HTMLページのhead内に記述する要素の総まとめ | コリス
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した 以前の版 からいろ... 続きを読む
レスポンシブの確認が快適に!ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス | コリス
ブラウザやOSを問わずに、デスクトップ・スマホ・タブレット・テレビなどさまざまなデバイスのスクリーンサイズをシミュレートしてWebページの表示確認ができる無料オンラインサービスを紹介します。 操作は非常に快適で、ノースト...記事の続きを読む 続きを読む
Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive | コリス
デモページ Responsive(レスポンシブ) Adaptive(アダプティブ) Liquid(リキッド) Static(スタティック) Responsive(レスポンシブ) レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わ... 続きを読む