Media Queryでminやmaxはもう使いたくない。全ブラウザ対応した範囲記法が直感的で便利

2023/03/28 100 users ＭＡＸ min Safari CSS 筆者

筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query ... 続きを読む

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による指定で実行される関数... 続きを読む

表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL - かちびと.net

2011/10/04 72 users フォントサイズ CSS JFL ライブラリ フォント

ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保てます。 場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどｗなんというか、かゆいと... 続きを読む

Media Queryを使用したレスポンシブWebデザインの構築時にはResponsivepxっていうツールが超オススメです - かちびと.net

2011/07/27 93 users インタラクティブ レイアウト レスポンシブWebデザイン

たまたま見つけたツールが泣きそうなくらい 便利だったのでシェア。Media Queryを使用 したレスポンシブなWebデザインの構築時 にとっても役に立ってくれるツールです。URL を指定するだけで、あとは幅を調整しながら レイアウトの微調整が可能です。ページ推移 も不要なのが大きいですね。 今日ご紹介するResponsivepxは、インタラクティブに指定幅の表示を確認出来るWebサービスです。M... 続きを読む

スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries - かちびと.net

2011/07/20 311 users class名 net デザ 備忘録 class

これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものに... 続きを読む

Media QueryでiPhoneやiPadにも自動でレイアウトを調整するHTML5製のWPテーマ・BLASKAN - かちびと.net

2011/07/08 43 users iPhone フレームワーク レイアウト iPad 貴方

Media QueryでiPhoneやiPadにも自動でレイアウトを調整するHTML5製のWPテーマ・BLASKANのご紹介です。レスポンシブなWebデザインを構築するためのフレームワークとしても使えそうです。 かちびと.netとは 貴方のネットビジネスを支えたい。かちびと.netはそんな思いを持ったサイトです。Web制作に役立つ素材やソフトウェア、Webサービス、マーケティングに役立つ情報などを... 続きを読む

Media Queryを触りながら試してみよう！ - jsdo.it - Share JavaScript, HTML5 and CSS

2011/06/29 22 users jsdo.it Share JavaScript 準備

「Medua Queryを活用したスタイルの使い分けを試してみたいけれど準備をするのは面倒だなあ」と思っている方にオススメ！ Tweet Media Queryを試せるサンプルコードを用意しました！フォークするとすぐにMedia Queryを試せます！ サンプルコードはウインドウサイズを変えることで異なるスタイルが適用されます。 エディット画面のプレビューエリアはサイズを変えることができないので、... 続きを読む

スマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそう - かちびと.net

2011/06/21 272 users Facebookページ スマフォ net ファンゲート対応

iPhoneのようなスマートフォンや、iPad のようなタブレットデバイスだけでなく、 Facebookページにも対応できる様に 工夫されているフリーのWordPress テーマ・Flexibleをご紹介します。ベース はTwenty Tenみたいですね。 css3のMedia QueryでiPhoneやiPadにレイアウトを自動調整し、ファンゲート対応のFacebookページの作成にも対応してい... 続きを読む