[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デザイン（前編） | 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... 続きを読む

[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 さらに実践的な使い方を学びたい... 続きを読む

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

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

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

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 [...] 続きを読む

これはかなりの優れもの、スマートフォン・タブレット対応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... 続きを読む

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

2011/07/13 1188 users 注意書き iPhone スマートフォン メディアクエリ 感想

WebサイトをiPhoneやiPadに対応させるためによく使われるCSS3のMedia Queries（メディアクエリ）。CSS3 Media Queriesを使うときの注意書きなどをまとめてみました。今回このブログ、Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、... 続きを読む

興味深いテクニックを多々取り入れているHTML5+CSS3のフレームワーク -Gridless | コリス

2011/06/26 253 users コリス フレームワーク チュートリアル クロスブラウザ対応

当サイトの記事でも取り上げている数々のテクニックを取り入れている、IE6/7にも対応したHTML5+CSS3ベースのフレームワークを紹介します。 Gridlessの主な特徴 CSSでユーザーのスクリーンサイズに最適なレイアウトを実現します。 参考：Media Queriesをしっかり身につけるチュートリアル クロスブラウザ対応（IE6/7も含む） CSS Resetには、Normalize CSS... 続きを読む

[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル | コリス

2011/05/29 609 users コリス iPhone チュートリアル CSS レイアウト

iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前に... 続きを読む

css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろ - かちびと.net

2011/05/13 173 users デバイス iPad net CSS3 ユーザーエージェント

昨日に続いて今日もスマートフォンと WordPressに関する記事。昨日は、 jQuery MobileをWPテーマに取り入れ たテーマで、ユーザーエージェント等で テーマを入れ替えますが、今日はcss3 のMedia Queriesを使ったテーマのご紹介。 css3のMedia Queriesは、ユーザーの環境に応じて特定のスタイルシートを適用させる方法で、例えば、大きいディスプレイ向けのcss... 続きを読む

[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js | コリス

2011/04/17 104 users コリス jQuery スクリプト Grid System 制作

CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid S... 続きを読む

PCやモバイルなど異なる画面サイズに対応したウェブデザイン集 -Media Queries | コリス

2011/02/02 136 users レイアウト ウェブサイト コリス CSS3 ウェブデザイン集

CSS3のMedia Queriesを使用して、PCやモバイルなど異なる画面サイズに対応したレイアウトを用意したウェブサイトをまとめているサイトを紹介します。 続きを読む