要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA

2024/06/21 15 users ビューポート Container Media CSS 手法

コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。... 続きを読む

pageres - 指定幅でのスクリーンショットをまとめて取得|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ

2014/02/22 22 users npmコマンド コマンド スクリーンショット ソフトウェア

コマンドで実行できるから自動化も楽々ですね！ レスポンシブWebデザインはブラウザ幅によって表示が変わるので確認が大変です。一つのURLごとに複数の表示を確認しなければなりません。 そんな手間を軽減してくれるツールがpageresです。コマンド一つで複数のブラウザ幅におけるスクリーンショットを取得してくれます。 pageresのインストール インストールはnpmコマンドでできます。 $ npm i... 続きを読む

これは使える！画像をレスポンシブに切り取るサンプルコード:phpspot開発日誌

2012/12/10 26 users レスポンシブ div phpspot開発日誌 class 画像

Focal Point: Intelligent Cropping of Responsive Images | Design Shack これは使える！画像をレスポンシブに切り取るサンプルコード。 ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。 divのclassにどこから表示するのか？を記述しておくだけ... 続きを読む

ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」:phpspot開発日誌

2012/04/04 52 users jQueryプラグイン phpspot開発日誌 プラグイン

jQuery jQSlider :: Example Slimple ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 ブラウザを紙芝居っぽくしたスライドショーが作れます。この手のプラグインでは当然ですが、１ファイルのHTML内に全スライドを書けます。 ブラウザ幅が変わっても伸縮するレスポンシブな仕様になっています ブロック要素内にスライドショーを入れ込んだり... 続きを読む

[CSS]バーはブラウザ幅いっぱいに、テキストは読みやすい幅にするスタイルシート | コリス

2011/05/17 193 users 幅いっぱい ブラウザ デモページ コリス サイズ

バーはブラウザの幅いっぱい（左右・左のみ・右のみ）に、その中のテキストは読みやすい幅に設定するスタイルシートを紹介します。 Full Browser Width Bars デモページ バーは3つとも、ブラウザのサイズを変 [...] 続きを読む

背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」:phpspot開発日誌

2011/04/25 170 users Backstretch jQueryプラグイン 背景 自動

背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプ... 続きを読む

スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」:phpspot開発日誌

2011/04/19 123 users JSライブラリ phpspot開発日誌 ユーザ ディスプレイ

スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」 2011年04月19日- Adapt.js - Adaptive CSS スマフォ向けサイト最適化にも使えそうなブラウザ幅に応じCSSが切り替えられるJSライブラリ「Adapt.js」。 見ているユーザによってディスプレイのサイズなんかはまちまちで、ブラウザのサイズも結構違いますね。 こ... 続きを読む