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年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせ... 続きを読む

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

スマフォやタブレットの画面幅で表示確認できる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... 続きを読む

レスポンシブ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を切替えられれば開発側としてみれば手間が少... 続きを読む