コンテナクエリ @container が全ブラウザ対応。新時代のレスポンシブ対応を完全理解する

2023/02/15 245 users Container コンテナクエリ レスポンシブ対応 新時代

本日（2/14）、ついに Firefox でコンテナクエリに対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ... 続きを読む

GoogleカレンダーのWeb版がデザインを一新 | TechCrunch Japan

2017/10/18 93 users 一新 TechCrunch JAPAN Web版 デザイン

事実上同じデザインを数年間続けていたGoogleカレンダーが 今日大きく模様替えした 。真新しいカラーパレットとGoogleのマテリアルデザインにマッチしたデザインスキーム、そして ―― もっと重要なのは ―― ブラウザーのウィンドウサイズに応じて自動調整されるレスポンシブ・レイアウトになったことだ。 このアップデートは単にペンキを塗り替えただけでなく、サービスを少しでも使いやすくするための機能改... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users NxWorld auto 横幅 img height

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

ブラウザの背景全体に画像を表示する（ランダム配置とアニメーション）【jQuery連載03】 | HTML5でサイトをつくろう

2014/09/25 51 users アニメーション ブラウザ 背景全体 HTML5 画像

今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。 一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。 写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサ... 続きを読む

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 : アシアルブログ

2014/09/19 95 users 鴨田 レスポンシブレイアウト iframe アシアルブログ

こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と... 続きを読む

レスポンシブなサイトを一発でデバイス確認できる便利ウェブサービス | あなたのスイッチを押すブログ

2014/06/19 106 users デバイス スイッチ 一発 あなた ブログ

最近、レスポンシブウェブデザインのサイトも増えてきましたね。このブログもレスポンシブ対応していて、色んなデバイスで閲覧できるようになっています。 ただ、制作会社のディレクターとしては、作ったレスポンシブのページをデバイス確認するのが非常に面倒なのです。 PCのウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは “どのデバイスで、どんな風に見えているか” が分からない。サイズ感... 続きを読む

jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法 | BlackFlag

2014/06/10 78 users jQuery BlackFlag レスポンシブ 要素 1行ごと

Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください... 続きを読む

レスポンシブWebデザインやスマートフォンサイトに最適なメニューを実装できるプラグインやチュートリアル 25 | NxWorld

2014/02/13 180 users NxWorld セレクタ アコーディオン チュートリアル

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブWebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

CSS Flexible Box を使ってみよう | WWW WATCH

2013/07/13 115 users WWW WATCH CSS モジュール レイアウト 18日付け

CSS3 のモジュールとして策定されている CSS Flexible Box は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧... 続きを読む

ウィンドウサイズに合わせて自在にJavaScriptを実行する「Response」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2012/11/04 86 users response MOONGIFT レスポンシブデザイン

レスポンシブデザインを実現する際にスタイルシートだけで全てをこなすのは難しいかも知れません。ウィンドウの幅に応じて最適な見せ方を実現するためにJavaScriptの力が必要ならばResponseを使ってみましょう。 0 続きを読む

ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js - かちびと.net

2012/09/01 101 users foo net ボックス スクリプト 参考

サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 Freetile.js こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').f... 続きを読む

CSSでボックスを上下左右中央に配置する第３の方法 | 3streamer blog

2012/01/17 108 users CSS 上下左右中央 ボックス min-width Box

ポイントはboxの横と高さの1/2 をネガティブマージンで指定するところですね。class=”box”に指定しているmin-widthはブラウザのウィンドウサイズをboxの大きさよりも小さくした時の対策です。これが無いとカラム落ちのような状態になってしまいます。 このやり方のネックは中央に配置される子要素のboxの幅と高さをCSSで指定しないと使えないという点です。例えば、内包する子要素が画像で色... 続きを読む

スマートフォンにも対応可能・ウィンドウサイズに応じてレイアウトを自動調整する軽量jQueryイメージスライダー・FLEXSLIDER - かちびと.net

2011/08/16 127 users jQueryスライダー スライダー blue レイアウト 実装

スマートフォンやiPadなどのタブレットはもちろん、 様々なウィンドウサイズにも自動でレイアウトを 調整するレスポンシブなjQueryスライダーのご 紹介。FLEXSLIDERは4KBと軽量で、実装も 手軽なので覚えておくと重宝しそうです。マーク アップも簡単なのでiPhone向けサイトの構築 時に導入を検討したいですね。 以前もレスポンシブWebデザイン対応のスライダーをご紹介しました（Blue... 続きを読む

ウィンドウサイズを変えるとコンテンツが再配置される可変グリッドレイアウトに関する情報まとめ - かちびと.net

2009/10/21 665 users 可変グリッドレイアウト net コンテンツ 情報まとめ

ウィンドウサイズを変えると コンテンツ（記事等）が再配置される 可変グリッドレイアウトに関する サンプルサイトやWPテーマ、 ライブラリなどの情報のまとめです。 詳しい方には参考にならないっぽいです。 いろいろ意見は分かれそうですが、知っておいて損は無いかなぁと思いますのでメモ。 可変グリッドレイアウトサイト 可変グリッドレイアウトを使用したサイトの例。 D&DEPARTMENT PROJECT ... 続きを読む

よく使われるはてな記法をまとめた「はてな記法壁紙」を公開しました - はてなダイアリー日記

2008/11/27 380 users はてなダイアリー日記 はてな記法 壁紙 ヘルプ モノトーン

20:07 | はてな記法のうち、よく使われるものを中心にコンパクトにまとめた「はてな記法チートシート」(壁紙)を公開いたしました。詳細編集画面からもリンクしている「はてな記法一覧」や、はてなダイアリーのヘルプ「はてな記法チートシート」よりダウンロードいただけます。現時点では青・ピンク・モノトーンの3色をご用意しております。お使いの環境やウィンドウサイズに合わせてお好きなデザインをダウンロードいた... 続きを読む

ウィンドウサイズを瞬時に変更可能な、たった17KBの便利ツール『Sizer』 | P O P * P O P

2007/07/13 106 users 瞬時 Apprentice II PM written 変更

ウィンドウサイズを瞬時に変更可能な、たった17KBの便利ツール『Sizer』 July 13, 2007 3:30 PM written by 100SHIKI Apprentice II ご存知の方も多いかもしれませんが、インストールしてみて便利そうだったのでご紹介。 Sizerはたった17KBのプログラムですが、「このウィンドウをこのサイズにしたい！」というときに便利です。 使い方は簡単で、ウ... 続きを読む

Firefoxでウィンドウサイズを変更されないようにするちょっとした設定 | P O P * P O P

2007/03/23 108 users ウイン Firefox タブ PM written P O

Firefoxでウィンドウサイズを変更されないようにするちょっとした設定 March 23, 2007 3:39 PM written by 100SHIKI Apprentice Firefoxの話題です。 Webサイトを見ていると、たまにウィンドウサイズが変更されることがあります。タブを使ってバックグランドでいろいろ開いていてそれが起きるとイライラします。 そこで今回は「Firefoxでウィン... 続きを読む

ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」:phpspot開発日誌

2006/12/26 136 users phpspot開発日誌 レイアウト

ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」 2006年12月27日 Particletree Dynamic Resolution Dependent Layouts ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」。 読み込んでおくだけで、750px以下、750px以... 続きを読む

zuzara : みんなのブラウザのウィンドウサイズはどのぐらいか調査して分布図をつくってみた

2006/08/05 92 users GoogleAdSense zuzara 分布図 解像度 動機

picks.zuzara.comのユーザを対象に、ブラウザのウィンドウサイズをどのぐらいの大きさで見ているのか、調査してみました。調査の動機はGoogleAdsenseを貼っていて800pxにあわせると横スクロールが出てしまうことに気付き、そういえば最近のPCは解像度も高いしどのぐらいの大きさのウィンドウでブラウザを開いているんだろう、と思ったところにあります。 8月3日の24時間集めておよそ60... 続きを読む

ITmedia Biz.ID：キレイな資料を作ろう――キャプチャ用にウィンドウサイズを固定する

2006/07/20 198 users ITmedia Biz.ID 資料 見栄え プレゼン コラム

コラム 3分LifeHacking： キレイな資料を作ろう――キャプチャ用にウィンドウサイズを固定する 会議やプレゼンの資料にPCの画面イメージを貼り付ける際、ウィンドウサイズが不揃いだと資料の見栄えが悪くなる。今回紹介する「Sizer」を利用すれば、ウィンドウを任意のサイズに固定・復元でき、統一感のある資料の作成が可能になるのだ。 2006年07月20日 12時06分 更新 Sizerを起動する... 続きを読む