特定のゲーム開発界隈で「ウィンドウサイズを極小にしてもゲームを動作させる」システムがほんのり流行の兆し。人の目盗んでこっそりプレイできる配慮 - AUTOMATON

2024/01/08 25 users Twitter AUTOMATON 特定 流行 配慮

『古銭プッシャーフレンズ』シリーズの開発で知られるSTP WORKSは、X（Twitter）にて、開発者のある出来事がきっかけで導入されたゲームの機能についての豆知識を投稿。その豆知識によれば、STP WORKSのゲームは、ウィンドウサイズが極小でもゲームが動作するように設計されているようだ。 STP WORKSは、低価格でマルチ... 続きを読む

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

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

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

ウィンドウサイズに合わせて表示される情報も変わるオープンソースのネットワーク監視ツール「bandwhich」を使ってみた - GIGAZINE

2020/01/13 27 users GIGAZINE GitHub ソー オープンソース コマンド

PCのネットワーク使用状況を確認するツールはWindowsのリソースモニターやLinuxのiftopコマンドなどが有名です。そんなネットワーク監視ツールの一つである「bandwhich」は、CLI上でプロセスごとにネットワークを監視できるコマンドで、ウィンドウサイズに合わせて表示される情報が変化していくツールです。GitHubにソー... 続きを読む

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

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

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

CSSだけでボタンが出入りするトグルボタンを実装 – Spider Webs

2017/08/29 17 users トグルボタン シロマ CSS Demo 実装

CSSだけでボタンが出たり入ったりするトグルボタンを実装する方法です。こんにちは、シロマ @mademode です。 今回は、下のデモのようなクリックするとボタンがにゅっと出てくるトグルボタンを実装します。 デモの左下にあるボタンをクリックしてみて下さい。 DEMO このブログでもウィンドウサイズが狭くなると、フォローボタンがトグルボタンに収納されます。 JavaScriptを使わずに、CSSだけ... 続きを読む

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

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

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

[jQuery] レスポンシブWebデザイン対応のメガメニュー - かちびと.net

2016/02/02 25 users jQuery アコーディオン ウィ net ドロップダウン

Result See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek ( @riogrande ) on CodePen . ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィ... 続きを読む

Mac - Vimでウィンドウサイズの変更を簡単・高速にするプラグイン - Qiita

2015/12/17 29 users Qiita Simeji MacVim vim Mac

VimやMacVimなどでウィンドウを分割して利用していると、サイズの変更のしたいことはよくありますね。 Ctrl-W + > , Ctrl-W + < , Ctrl-W + - , Ctrl-W + + で少しずつ変更することはできますが、ちょっと面倒。。 簡単・高速にウィンドウサイズを変更する ウィンドウサイズの変更を楽にするプラグイン simeji/winresizer の紹介です。 (もと... 続きを読む

Bootlint - Bootstrapサイトの検証に！ MOONGIFT

2015/09/17 24 users MOONGIFT Bootstrap boot 流儀 検証

BootstrapをベースにWebサイトを組む例が増えていますが、Bootstrapの流儀をちゃんと踏まえて作っている人がどれだけいるでしょうか。ちゃんと把握していないとウィンドウサイズが変化した時に思った表示にならない事態につながります。 そこで使ってみたいのがBootlint、Bootstrap専用の検証ツールです。Bootstrapを使っているならぜひ一度はチェックしてみましょう。 Boot... 続きを読む

投稿画面のUIを改善しました - Qiita Blog

2015/06/26 11 users Qiita Blog 投稿画面 Qiita ウィンドウ スク

こんにちは、@yujinakayamaです。 本日、QiitaとQiita:Teamの投稿画面が新しくなりました！ 以下、主な変更点をご紹介します ウインドウにフィットする広い編集エリア 各テキストエリアがウインドウ全体まで広がるようになり、より快適で、記事の編集に集中できるレイアウトとなりました。 また、各テキストエリアは現在のウインドウサイズに対して常にフィットするようになり、ウインドウがスク... 続きを読む

ブラウザの背景全体に画像を表示する（ランダム配置とアニメーション）【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のウェブブラウザのウインドウサイズを伸び縮みさせてもいいのですが、それでは “どのデバイスで、どんな風に見えているか” が分からない。サイズ感... 続きを読む

【レビュー】ウィンドウを指定しておいた枠に合わせて簡単にリサイズ・整列「Fit Win」 - 窓の杜

2014/06/18 19 users リサイズ 整列 ウィンドウ レビュー 無償

レビュー ウィンドウを指定しておいた枠に合わせて簡単にリサイズ・整列「Fit Win」 マルチモニターやキーボード操作にも対応 （2014/6/18 10:00） 「Fit Win」v0.1.0.0 「Fit Win」は起動中のソフトのウィンドウサイズを予め決めておいた枠にあわせて変更、並べられるソフト。編集部にてWindows 8.1で動作を確認した。作者のWebサイトから無償でダウンロードでき... 続きを読む

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デザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

Windows 8.1は10月17日公開 - ITmedia PC USER

2013/08/14 10 users USER ITmedia PC 無償 Windows 8.1

米Microsoftは8月14日（現地時間）、Windows 8.1をニュージーランド時間の10月18日0時（日本時間17日午後9時）に、Windowsストアを通じて世界同時配信すると発表した。Windows 8ユーザーは無償。また、Windows 8.1搭載PCも同時に発売される。 Windows 8.1では、Windowsストアアプリにおけるウインドウサイズが可変になるほか、Webブラウザ「I... 続きを読む

Google AdSense で 「レスポンシブ広告ユニット」 が提供開始 | WWW WATCH

2013/08/07 19 users WWW WATCH レスポンシブ広告ユニット 提供開始 時点

ちょっと前に、Google AdSense で新しい非同期コードを使ったら、CSS でサイズ変えるだけで配信される広告サイズが自動的に切り替わっていい感じっていう記事書いたんですよね。 広告が読み込まれた時点でのウィンドウズによっての出し分けなので、所謂レスポンシブにウィンドウサイズの可変に対して動的に広告サイズが変わるわけじゃないんですけども、簡単にスクリーンサイズに合わせて最適なサイズの広告を... 続きを読む

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日付けで勧... 続きを読む

『YouTube動画のサイズ＝ブラウザのサイズ』が実現できるスクリプト「Resize Youtube Player to Window Size」*二十歳街道まっしぐら

2013/05/18 29 users スクリプト YouTube動画 二十歳街道まっしぐら サイズ

Resize Youtube Player To Window Size YouTube動画サイズをウィンドウサイズに合わせて調整 Resize Youtube Player To Window SizeはYouTube動画サイズをウィンドウサイズに合わせて調整できるスクリプトです。 YouTube動画のサイズをブラウザのサイズぴったりに合わせてくれます。 ウィンドウ内には動画しか表示されていない... 続きを読む

ウェブディレクターの私が利用する３つのウインドウサイズ一発調整ツール | あなたのスイッチを押すブログ

2013/05/03 21 users ウェブディレクター ウェブブラウザ アドオン 本職 スイッチ

本職のウェブディレクターとして活動している中で、しばしば頭を悩ませている問題がありました。 それが、ウェブブラウザのウインドウサイズです。 ウェブページの調査したり、制作したページの確認をする時など、ウインドウサイズを気にしなければならない機会は度々訪れます。レスポンシブウェブデザイン案件の増加も原因のひとつです。 そんなときに便利なツールが３つほどあります。１つはChromeのアドオンを使用する... 続きを読む

アップルは平常運転だった！サムスンへの謝罪文、見えにくいように小細工してた | ガジェット速報

2012/11/04 35 users サムスン アップル 平常運転 ガジェット速報 謝罪文

先ほどの記事で「アップルが珍しく従った…」とお伝えしましたが、前言撤回かもしれません。やっぱりアップル、転んでもただでは起きなかった！ CNETが3日（現地時間）に伝えるところによると、英国公式サイトに掲載されたサムスンへの謝罪文がファーストビュー（ページを開いた時にスクロールせず見える範囲）に入らないように、iPad miniの画像がウィンドウサイズに合わせて拡大される “小細工” が仕込まれて... 続きを読む

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

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

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

グリッドやボタンによるウィンドウサイズの変更、矢印キーによるウィンドウの移動などができる『Moom』 - Macの手書き説明書

2012/10/05 9 users Moom グリッド 矢印キー Mac ウィンドウ

カテゴリ: ユーティリティ, 仕事効率化 現在の価格: ￥850（サイズ: 5 MB） 販売元: Many Tricks - Many Tricks リリース日: 2011/03/02 ウィンドウリサイズや移動などを快適に行なえる機能を全部詰め込んだようなアプリ。ちょっと高いですが、毎日のウィンドウ操作を少しでも楽にしたいと思う人にとっては買いだと思います。まずウィンドウの最大化ボタン(緑+)にポ... 続きを読む

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

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

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