ホバーの分岐にはメディアクエリのwidthではなくhoverを使おう

2022/04/01 15 users landscape hover matchmedia ポパー

メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用すること... 続きを読む

CSS の Container Queries おためし - 見返すかもしれないメモ

2021/04/25 176 users Container Queries CSS div メモ 要素

CSS に、コンテナクエリという機能があるらしい。 メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。 /* メディアクエリの例 */ /* 画面幅が 400px 以下だったら、div を赤くする */ @media screen and (m... 続きを読む

【第4弾】少しのコードで実装可能な10のCSS小技集 | Webクリエイターボックス

2021/03/04 212 users 実装 目次 Webクリエイターボックス CSS小技集 言語

2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせ... 続きを読む

Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法 | Design Color

2017/11/28 38 users Flexbox SmartNews スマー 個数 レイアウト

かなり前に、スマホ版の関連ニュース一覧の表示をスマートニュース（SmartNews）風にしたいな〜と思い、Flexboxを使って実装してみました。その当時はちょうどFlexboxを覚えたばかりで、個数や画面幅が変わっても柔軟に対応できるのを知って大変感動したのを覚えています。 というわけで、今回はそのとき感じた「知ってよかった！」の気持ちを振り返りながら実装方法をメモしておこうと思います。 スマー... 続きを読む

【速報】ついにきたGoogleアナリティクスの新ホーム画面を一気に解説！ 12枚のカードの使い方とは？ | 衣袋教授の新・Googleアナリティクス入門講座 | Web担当者Forum

2017/06/21 98 users 衣袋教授 Googleアナリティクス Web担トップ 速報

Web担トップ » 衣袋教授の新・Googleアナリティクス入門講座 » 【速報】ついにきたGoogleアナリティクスの新ホーム画面を一気に解説！ 12枚のカードの使い方とは？ 衣袋教授の新・Googleアナリティクス入門講座 【速報】ついにきたGoogleアナリティクスの新ホーム画面を一気に解説！ 12枚のカードの使い方とは？ Googleアナリティクスに新しく「ホーム」画面が追加された。画面幅... 続きを読む

よこ並びのCSS。

2017/02/15 569 users CSS レスポ タブ ナビゲーション 昨今

ナビゲーションやタブやアイテムリストなど、「よこ並び」にレイアウトするためのCSSについて、お馴染みの方法から最近の方法まで、順番に見ていきます。スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかな。とも思いますけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、アイテムリストなど、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。もちろん画面幅にはレスポ... 続きを読む

【アドセンス広告】レスポンシブサイズを1ヶ月間設置した結果。 - interest blog

2015/12/02 9 users interest blog アドセンス広告 アドセンス 結果

2015-12-02 【アドセンス広告】レスポンシブサイズを1ヶ月間設置した結果。 アドセンス アドセンス-アドセンス広告 先月（１１月）の1カ月間アドセンス広告のレスポンシブサイズを、試しに記事下に設置しました。 この広告は、画面幅に自動的に広告サイズを合わせてくれるというもの。ブログやサイトを大きな画面で見ているのに、広告が小さいサイズだったら違和感ハンパないですよね。 そういった事を解消して... 続きを読む

スマフォやタブレットの画面幅で表示確認できるChromeエクステンション「Mobile Layouter」 - tarのブログるっ by @tarVolcano

2014/05/17 91 users ブログサイト tar カスタマイズ 2014-05-17 実機

2014-05-17 スマフォやタブレットの画面幅で表示確認できるChromeエクステンション「Mobile Layouter」 インターネット WEB iPhone 5S Photo by Janitors ブログの記事を書いたり、ブログサイトのカスタマイズをしていると、「ちゃんとスマフォでも見えるかな」と気になったりすることがありませんか？ スマフォの実機を使ってチェックするのって結構面倒くさ... 続きを読む

[M] スマホと同じ画面幅で表示確認できるChrome拡張「Mobile Layouter」が便利すぎる件 | mbdb (モバデビ)

2014/02/11 50 users mbdb モバデビ PHOTO Chrome拡張 拡張

うーん、スマホ表示確認できるUA偽装系Chrome拡張機能では、もしかしたら一番いいかもしれません。 「Mobile Layouter」という拡張機能なんですが、ブログのスマホ側の調整時に大変便利に使うことができました。 以前使っていたUA偽装系の拡張から乗り換えちゃいましたよ。 Photo:iPhone By GONZALO BAEZA 以前までは「User-Agent Switcher」という... 続きを読む

実機と同じ画面幅で表示確認できるUA偽装ツール、できました。 | x-fit - クロスフィット -

2013/05/30 103 users エバンジェリスト フィーチャフォン モバイルデバイス 機種

こんにちは。x-fitチーム・エバンジェリストの渡辺です。弊社では、モバイルデバイスに特化した事業を行っていますので、Webサイトを様々な端末で確認する機会がたくさんあります。実機での確認だけでなく、いわゆるPCブラウザでUAを偽装して表示を確認することも多くあります。弊社は国内キャリアから発売されているすべてのフィーチャフォン・スマートフォン・タブレットを保有していますので、そのすべての機種のU... 続きを読む

Android版 Gmail 4.2.1 提供開始。画面幅フィットと拡大、スワイプ削除、画像表示強化など - Engadget Japanese

2012/12/04 17 users Engadget Japanese 拡大 Android版

Google が Android 版の Gmail アプリを v4.2.1 にアップデートしました。主な更新点は、メール本文の画面幅にあわせた自動調整とピンチズーム、リストからのスワイプ消去 / アーカイブ、Gmail アプリから直接写真・動画添付、添付写真の拡大ギャラリー表示など。 Continue reading Android版 Gmail 4.2.1 提供開始。画面幅フィットと拡大、スワイ... 続きを読む

JavaScriptにもMedia Queryを「Javascript onMediaQuery」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/06/08 33 users MOONGIFT CONTEXT iPhone 関数 デバイス

CSS3ではMedia Queryという仕組みがあります。これはデバイスの画面幅や高さ、色などをキーにして専用のスタイルを適用する技術です。そして同様のメディアによる振り分けをJavaScriptにも提供するのがJavascript onMediaQueryです。 0 こちらはiPhoneの場合。画面幅を調整すればメッセージが変わります。 実際のコードです。contextによる指定で実行される関数... 続きを読む

レスポンシブWEBデザインのサンプル26:phpspot開発日誌

2011/09/26 71 users phpspot開発日誌 DesignM.ag CSS 手間

26 Responsive Web Designs - Web Design Blog ? DesignM.ag レスポンシブWEBデザインのサンプル26 パソコン、スマホ等のデバイスでアクセスされた際にCSSを使ってフレキシブルにデザインを変えるというレスポンシブWEBデザイン。 それぞれのデバイス専用の画面を用意するのではなく、画面幅等で判断してCSSを切替えられれば開発側としてみれば手間が少... 続きを読む