Container Queriesという手法 / CSS Advent Calendar 2019 | Web Design KOJIKA17

2019/12/23 9 users Container Queries レイアウト 手法

Container Queriesという手法 / CSS Advent Calendar 2019 2019-12-23 Container Queriesを知っていますか？ Media Queriesに依存せず、コンテンツにあわせてレイアウトを変化させるを手法です。 Container Queriesとは レスポンシブwebデザインを行う時、みなさんはMedia Queriesを使用していると思います。 ブレークポ... 続きを読む

Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット | NxWorld

2016/12/07 33 users Mixin Sass NxWorld SCSS スニペット

ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイン... 続きを読む

[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ | コリス

2016/09/12 472 users コリス プレー CSS メディアクエリ リソース

スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレー... 続きを読む

px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス

2014/11/27 105 users rem GitHub コリス フォントサイズ フレームワーク

Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フ... 続きを読む

Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ | コリス

2014/09/12 511 users Bootstrap コリス Foundation ライセンス

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I ... 続きを読む

自社サービスのロゴをWebフォント化して楽をしようと試みてみる方法 | nanapi TechBlog

2014/05/28 9008 users nanapi TechBlog ロゴ エンジニア 修正 みんな

Webサービスをリリースしたばかりの頃は、毎日修正で日々細かい調整に追われるもの・・・さらに最近はレスポンシブWebデザインでMedia Queriesの分、いちいち修正するのかとか思うと、Sass mixinの使い方が巧いデザイナー、エンジニアが羨ましい・・・みんな、そんな毎日じゃないかなと思います。今回はちょっとでも楽をしてほしくて、本当にちょっとの楽くらいにしかならないですが、Webフォント... 続きを読む

レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS: 小粋空間

2012/10/24 60 users メインコンテンツ 小粋空間 左右 CSS サイドバー

レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレ... 続きを読む

可変グリッドレイアウトで実現するレスポンシブWebデザイン（前編） | ADC - Adobe Developer Connection

2012/08/10 139 users 可変グリッドレイアウト ADC マルチデバイス タブレット

Dreamweaver CS6 では、 デスクトップやスマートフォン、タブレットなど様々な画面サイズに適したコンテンツレイアウトを実現するための「可変グリッドレイアウト」機能が追加されました。 「レスポンシブWebデザイン（Responsive Web Design）」といわれる、CSS3の Media Queries を使用してワンソースでマルチデバイス対応させる振り分け方法を容易に実装するため... 続きを読む

画面サイズに応じて任意のCSSファイルをロードするJavaScriptライブラリ・sizeit.js - かちびと.net

2012/07/14 123 users CSSファイル JavaScriptライブラリ net 単体

画面のサイズを指定して、その サイズに応じて任意のCSSファイル をロードするスクリプトのご紹介。 Media Queries等によってCSSが 肥大化してしまった場合は使って あげると軽量化できるかもですね。 指定したブレークポイントに合わせて、ロードするCSSファイルを指定出来る、というスクリプト。非依存型なので単体で利用可能、サイズも圧縮版で1.7kbほどと軽量です。 Sample Medi... 続きを読む

[JS]Responsiveデザインに対応したフォームを作成するスクリプト -Ideal Forms | コリス

2012/05/16 55 users コリス jQuery Responsiveデザイン CSS

バリデーション機能付きのResponsiveデザインに対応したフォームを作成するためのLESSベースのjQueryのプラグインを紹介します。 Ideal Formsの主な特徴 Ideal Formsのデモ Ideal Formsの使い方 Ideal Formsの主な特徴 Responsiveデザインに完全対応 ※CSSのMedia Queriesは必要としません。 キーボードのサポート LESSを... 続きを読む

li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js - かちびと.net

2012/04/03 44 users ナビゲーションリンク ブレークポイント ウインドウサイズ

シンプルで使いやすそうだったので 備忘録。Media Queriesと併用して、 ナビゲーションリンクをselect要素 に変換するjQueryのプラグインです。 圧縮版だと300kbほどと、超軽量で、 様々なブラウザにも対応できるので 覚えておこうと思います。 ウィンドウサイズが設定したブレークポイントに達するとli要素で作ったナビゲーションがselect要素に変わってくれるので、スマフォのよう... 続きを読む

[CSS]ちょっと面白いMedia Queriesの使い方 -表示サイズで異なるメッセージを表示するテクニック | コリス

2012/03/18 39 users コリス Row CSS div span

実装 「BE なんとか」のメッセージは、「BE」だけ固定で、「なんとか」はMedia Queriesと擬似要素を使用して配置しています。 HTML h2要素をdiv要素で内包したシンプルな実装です。 <div class="row"> <h2>Be <span></span></h2> </div> 空のspan要素はCSSでコンテンツをレンダリングするために使用します。 CSS Media Qu... 続きを読む

Media QueriesとjQueryを使って、スマートフォンでアクセスした時だけナビゲーションメニューを上に隠す - かちびと.net

2012/03/07 84 users ナビゲーションメニュー jQuery レスポ 語弊 備忘録

シンプルで良かったので一応メモ。レスポ ンシブWebデザインのTipsです。Media Queries とjQueryを使用して、スマフォでアクセス した時だけ、邪魔になりがちなナビゲー ションメニューを上に隠す、みたいな手段。 割と良かったので参考までに記事に備忘録 として残しておきます。 隠すというと語弊があるんですけど・・・凄くシンプルな方法です。 Pull-Down-for-Navigat... 続きを読む

[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル | コリス

2012/02/08 346 users Step コリス HTML タブレット チュートリアル

Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい... 続きを読む

Media Queriesのように、モニターサイズに応じてスタイルを変更可能にする非依存型で1KBの軽量jsライブラリ・syze - かちびと. net

2012/01/16 56 users ブレークポイント 備忘録 クロスブラウザ対応 ライブラリ 変更

シンプルで良さそうだったので一応備忘録。 Media Queriesライクにブレークポイントに 応じてスタイルを変更できるライブラリです。 非依存型で1KBと、超軽量スクリプトなので 簡単なキャンペーンサイトとかならこれでも いいかもしれないですね。 Media Queriesのようにデバイスを限定しないクロスブラウザ対応で、他のライブラリに依存せず利用出来る、圧縮版は1KBと軽量、というのが特徴... 続きを読む

WordPressのテーマを変更してスマートフォンサイトを作成。Media Queriesとどっちがいいの？ | Webクリエイターボックス

2011/12/20 459 users WordPress Webクリエイターボックス リデザイン

以前「WebサイトをiPhoneで見やすくする5つの方法」という記事でWebサイトをスマートフォンに対応させる方法を紹介しました。当時はそこで紹介しているMobifyというサービスでスマートフォンに対応させていたのですが、JavaScriptが使えないので、リデザインを期に別の方法でスマートフォンに対応させる事にしました。タイトルにあるとおり、WordPressのテーマを変更する方法とCSS Me... 続きを読む

[CSS]スマフォからデスクトップまで最適なレイアウトを提供する、emベースのフレームワーク -Goldilocks Approach | コリス

2011/11/21 78 users コリス iPhone フレームワーク CSS レイアウト

iPhoneをはじめとするスマートフォンから、iPadなどのタブレット、ノートブックやネットブック、デスクトップなど、さまざまなデバイスにMedia Queriesを使用して最適なレイアウトを提供するフレームワークを紹介します。 The Goldilocks Approachの主な特徴 The Goldilocks Approachのケーススタディ The Goldilocks Approachの... 続きを読む

CSS3アニメーションを「:hover」だけではなく、他にも仕込んでみるチュートリアル | コリス

2011/11/13 141 users hover focus コリス checked active

CSS3アニメーションはたいていの場合、ホバー時（:hover）に仕込まれるものが多いと思います。 ここでは他の疑似クラス「:active」や「:focus」などやMedia Queriesに仕込んでみるチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 「:active」を使ってCSS3アニメーション 「:focus」を使ってCSS3アニメーション 「:checked」を使ってC... 続きを読む

2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ | コリス

2011/10/23 473 users コリス ワイドスクリーン スマフォ ツール 各ブラウザ

デスクトップ用の各ブラウザをはじめ、スマートフォン、ワイドスクリーンなど、さまざまユーザー環境を想定して確認できるツールを紹介します。 各ツールで表示しているのは、Media Queriesを使用している「CSS-Tri [...] 続きを読む

正方形のユニットで構成された、スマフォ対応のHTML5ベースのフレームワーク -Fluid Squares | コリス

2011/10/02 48 users フォントサイズ コリス 可変グリッド 増減 フレームワーク

表示サイズによって正方形のユニットが最適に構成される、Media Queriesを使ったフレームワークを紹介します。 IE8以下のMedia Queries非サポートブラウザにもスクリプトで対応しています。 Fluid Squaresの主な特徴 正方形のユニットを使った、HTML5ベースの可変グリッドのフレームワーク。 Media Queriesで表示サイズによって、カラム数が増減、フォントサイズ... 続きを読む

これはかなりの優れもの、スマートフォン・タブレット対応WordPressのテーマファイル -Skeleton | コリス

2011/09/19 329 users Skeleton インクルード コリス タイポグラフィ 相違

デモページを幅600pxで表示 Skeletonの主な特徴 Formalizeを使用して各ブラウザ間のエレメントの相違に対応。 Skeletonを使用してMedia Queriesを使った可変カラムに対応。 Option Frameworkを使用してテーマオプションのカスタマイズが可能。 bbPressのフォーラムスキンをインクルード。 見出しや本文などバランスの取れたタイポグラフィ。 デモ：Ty... 続きを読む

HTML5とCSS3を使いこなしたくなるフレームワーク15選 | コリス

2011/08/24 504 users フレームワーク Less Framework コリス

HTML5とCSS3を使って作成されたフレームワークを紹介します。 「詳しくは」で各フレームワークがざっと分かる記事にリンクしています。 Less Framework 4 Media Queriesでデバイスごとに最適な [...] 続きを読む

スマートフォン・デスクトップなど要件に合わせたMedia Queriesの実装方法のまとめ | コリス

2011/08/15 147 users コリス レガシーブラウザ テクニ 要件 テクニック

スマートフォン・デスクトップをはじめ、IE6などのレガシーブラウザ対応といった要件に合わせたMedia Queriesの実装方法を紹介します。 下記は各ポイントを意訳したものです。 テクニック1：スマートフォンユーザーがメイン テクニック2：レガシーブラウザは非対象 テクニック3：スマートフォンユーザーのみ テクニック4：デスクトップユーザーがメイン テクニック5：レガシーブラウザも含める テクニ... 続きを読む

[CSS]ホバー以外にも使ってみたいCSS3アニメーションのテクニック | コリス

2011/08/07 122 users コリス disabled hover CSS focus

下記は各ポイントを意訳したものです。 はじめに -「:hover」の例 「:active」でCSS3アニメーション 「:focus」でCSS3アニメーション 「:checked」でCSS3アニメーション 「:disabled」でCSS3アニメーション Media QueriesでCSS3アニメーション 対応ブラウザ はじめに -「:hover」の例 CSS3アニメーションのトリガーとしては、「:h... 続きを読む

iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net

2011/08/02 422 users iPhone レスポンシブ フレームワーク レイアウト net

iPhoneやiPadなどの人気デバイスに Webサイトのレイアウトを最適化する為 の方法の一つとして、Media Queriesを 使ったレスポンシブWebデザインの構築 が注目されつつあります。当サイトでも 何度か取り上げていますが、ここで少し まとめてみたいと思います。 レスポンシブという言葉はあまり聞きなれないかと思います。僕も未だにスポンジボブに空目するんですが、レスポンシブ（Respo... 続きを読む