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

よこ並びのCSS。

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

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

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

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

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