srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
Responsive Navigation | Examples of Navigation in Responsive Design
Responsive Navigation... Navigation patterns in responsive web design can be tricky to tackle - especially while keeping a consistent look, feel, and experience on your site. Your website's navigation is how users get around on your website and discover all that you have to offer. So when your site is viewed on smaller screens - make sure it's still easy to navigate. I've put together a list of po
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
SkelJS Download | Sagapixel
Skel JS downloadSkel is a lightweight framework for building responsive sites and web apps. It was deprecated in 2018 and has been replaced with “Responsive Tools.” Click here to download the updated Skeljs, now known as “Responsive Tools” click here to download the legacy Skeljs When Sagapixel first started out and it was just Frank building websites, this framework was a lifesaver. He used it on
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Simple Toggle / Drop-Down Button | Responsive Navigation
ゼロから始めるレスポンシブWebデザイン入門
html5-memo.com
