朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画

レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。

本日（2023/2/14）、ついに Firefox でコンテナクエリ（container query）に対応しました。Chrome・Edge・Safari はすでに現行ブラウザで対応済みのため、全ブラウザにてコンテナクエリが使えることになります💐 従来、レスポンシブ対応でレイアウトを変えるには @media を使ってウインドウサイズを基準にするかありませんでした。コンテナクエリ @containerを使うと任意の要素を基準にできるので、「A要素の横幅が 500px 以下のとき、子要素のレイアウトを変える」などが手軽に実現できます。 とくにコンポーネントベース開発が主流の現在においては、コンテナクエリをマスターすることで、より柔軟でラクなレスポンシブ対応が可能になります。 本記事では、コンテナクエリの基本、メリット、デモまでをできるだけ詳しく解説し、コンテナクエリを理解することを目標としま

さくっと短時間で、慣れれば1分！ デスクトップやスマホに対応したページを作成したい時にぴったりな無料のオンラインツールを紹介します。 HTMLやCSSの作業は一切不要で、Bootstrap 4ベースのさまざまなページをドラッグ&ドロップで積み木のように組み合わせて簡単に作成できます。 Froala Design Blocks Froala Design Blocks -GitHub Froala Design Blocksでは170種類以上のレスポンシブ対応のコンポーネントが用意されており、それらを好きなように組み合わせて、誰でも簡単にWebページを作成することができます。 作成したページは個人でも商用でも無料。詳しくはライセンスページをご覧ください。 短時間で、Bootstrap 4ベースのページを作成してみる 用意されているコンポーネント 短時間で、Bootstrap 4ベースのページ

主要SNS(ソーシャル)のボタンをまとめて設置できるスクリプトの無料ダウンロード 公開日 2015年11月24日 最終更新日 2022年7月20日 著者 Motohiro Tani 主要なSNSのボタンをまとめて設置できるスクリプトを制作・公開しました。 スクリプトの名称は何でもいいのですが、とりあえず「ソーシャルボタン スクリプト」としておきます。 現在の最新バージョンは2020年12月11日公開のバージョン3.0.1です。 参考ページ：プログラムをアップデートするの際の思想について 各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。 このプログラムによって設置できるボタンは以下になります。 Twitterのツイートボタン Facebookのシェアボタン はてなブックマークボタン LINEに送るボタン Instagramのフォローボタ

Modified 2014-1-12 更新情報 連続クリック時の不具合解消のため、jQuery コードを一部書き直しました＆キャプションを表示する方法を追記しました。 サムネイル画像をクリックすると、メインの大きい画像が入れ替わる定番のギャラリーを jQuery を使って作る方法です。現在メイン表示されている画像のサムネイルへのカレント機能と、レスポンシブ表示にも対応しています。 IE8+ / iOS8 / Android4.3 / その他のブラウザで動作確認済みです。最低限のシンプルなコードなのでカスタマイズもしやすいと思います。 サンプルデモ ◆ レスポンシブギャラリーデモ｜memocarilog 横幅が狭くなった場合のサムネイル画像は、設定した min-width まで小さくなり、並びきらない場合は以下のように2段になって表示します。 HTML コード 画像をサムネイルサイズの画像と

タイル状に可変グリッドレイアウトを簡単に実装できる、今や定番のjqueryプラグインといえば「Masonry」。 しかし、このMasonryには配置したアイテムを指定したタグを持つもののみ表示するフィルター機能や、目的別に並べ替えるソート機能がありません。 「Masonry」プラグインのこれらの弱点を補ってくれる代替のプラグインとして有名なのが、「isotope」というjQueryプラグインがありますが、こちらは商用利用の場合はライセンス料の支払いが必要となってしまいます。 そこで今回紹介するのは、フィルター機能もソート機能も搭載した可変グリッドレイアウトを実現し、レスポンシブにも対応した、無料で商用利用も可能なJavascriptプラグイン「Muuri」(GitHubはこちら)。 MITライセンスで、IE9〜をサポートしています。 なお、Masonryは単体で利用可能で圧縮された状態のフ

こんにちは（・∀・） 昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！という内容の記事を投稿しました。 基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。 しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。 なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。 前回投稿した記事では作ったブレークポイントの数は10個。 10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。 しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。 ということで今回、ブレークポイントは415pxと960pxに決定しました。 0px 〜 414px @media (

// Function for converting a px based font-size to rem. @function calculateRem($size) { $remSize: $size / 16px; //Default font size on html element is 100%, equivalent to 16px; @return #{$remSize}rem; } @function calculateNum($lheight) { $numSize: $lheight; //Default font size on html element is 100%, equivalent to 16px; @return #{$numSize}; } // Mixin that will include the fall back px declaratio

iPhone, iPad, Nexus, Galaxyなど、主要なスマホ・タブレットの表示確認が同時にできる、レスポンシブ用の確認ツールを紹介します。 最近リリースされたばかりで、現在の対応デバイスにあった便利なツールです。 Sizzy Sizzy -GitHub Sizzyの特徴 Sizzyの使い方 Sizzyの特徴 Sizzyはオンラインツールとして利用でき、Chromeの機能拡張にも対応しています。動作は非常に軽快で、スマホ・タブレットの複数のデバイスで同時に確認ができます。 Sizzyの動作デモ 現在用意されているデバイスは、8種類。 iPhone 4: 320x480 iPhone 5: 320x568 iPhone 6: 375x667 iPhone 7 Plus: 414x736 iPad Air: 768x1024 Nexus 6P: 411x731 Galaxy S4:

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(Responsive Font Size)のデモ RFS(Responsive Font Size)の使い方 RFS(Responsive Font Size)の特徴 RFSは、ブラウザのビューポートのサイズに基づいて、フォントに適切なサイズを自動的に計算して適用するスタイルシートです。 フォントのサイズは、スクリーンやデバイスごとに最適化されます。 フォントのサイズには下限と上限があ

まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？ ポートレートモードでは一見正しく表示されます。 下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。 早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。 また、ランドスケープモードでははっきりと違いがわかります。 ツールバーやステータスバーは全画面で表示されます。 中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。 なお、背景画像を指定していても無視されるということを覚えておきましょう。 そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になり

はじめに viewportに比例してフォントサイズが変動する奴です。 ※このテクニックの一般的な名称が不明。 1 とりあえずこれだけでもいける。 html { font-size: calc(100vw * .03126); } /* min */ @media(max-width: 320px) { html { font-size: calc(320px * .03126); } } /* max */ @media(min-width: 521px) { html { font-size: calc(520px * .03126); } } Demo この方法ではviewportのサイズ変更に完全連動した動きになります。 「これ以上フォント大きくならなくていいよ」の点にメディアクエリを置く考え方。 フォントサイズが大きすぎたので補正値を掛けていますがこれは320px時に1.6remを

ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? # やりたいこと - 汎用性の高い .container　クラスを作る - メディアクエリをいい感じに管理する ``` Webサイトのコーディングを頻繁にやってると、毎回最初に同じようなCSSを書いている自分に気づきますね。 そろそろ自分用のライブラリでも作って、サイト制作のスタートダッシュを速くしたいという気持ちになってきました。 そんなわけで、 **一度最強のCSSを書いてこれから未来永劫一生使い回していこうプロジェクト**の、今回は映えある第一弾となります。 今日は、レイアウト系CSSの代表格、container とレスポンシブ周

レイアウトの選択 「Presets」に用意されているレイアウトは、3種類。 Simple ヘッダとフッタと1カラムのコンテンツ、シンプルなレイアウト。 Holy Grail ヘッダとフッタ、そしてサイドバー2つとコンテンツの3カラム レイアウト。 Centered 天地中央、左右中央、天地左右中央に要素を配置。 「Presets」でレイアウトを選択すると、それぞれの基本レイアウトが表示されます。

昨今レスポンシブ・ウェブデザインを採用するウェブサイトがかなり多くなっています。 レスポンシブなデザインの場合、フォームのユーザビリティを確保するには一手間工夫が必要です。 本日は、異なる画面幅でもフォームを使いやすく工夫しているウェブサイトを勝手にピックアップし、そのポイントをお伝えしていきます。 パターン1: あらかじめ横幅を狭くレイアウトする まずは、フォームのページのみ、他のページに比べて横幅を狭く作っておく方法でモバイルデバイスに対応している例を紹介していきます。 このとき多くの場合、横幅を狭くした分左右の余白が大きくなります。 採用例 住友商事 住友商事様のコーポレートサイトでは、他のページのコンテンツ（上）は920pxでレイアウトされているのに対し、フォームのページ（下）では横幅670pxとなっています。 横幅を狭めた場合、ナビゲーション類はレスポンシブ向けにコンパクトに収ま

やりたいこと スマホで見たときに、タップするだけで電話がかけられるように電話番号にリンクをはりたい。 でもPCで見たときはリンクさせたくない。 それを同じHTMLで済ませたい。 テキストだけでなく、画像でも同様にしたい。 ということで、JavaScript(jQuery)を使います。 →デモ jQueryで電話番号リンクを追加する <!-- テキストの場合 --> <p class="tel">00-1234-5678</p> <!-- 画像の場合は、alt属性に電話番号を入れておきます。 --> <p class="tel"> <img src="https://placehold.jp/150x150.png" alt="01-1234-5678"> </p> $(function() { $('.tel').each(function() { //.tel内のHTMLを取得 var

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL) 作者: 菊池崇出版社/メーカー: アスキー・メディアワークス発売日: 2013/07/30メディア: 大型本この商品を含むブログ (3件) を見る メディアクエリで実現するレスポンシブWebデザイン 作者: 相澤裕介出版社/メーカー: カットシステム発売日: 2015/05/01メディア: 単行本この商品を含むブログ (1件) を見る 最近、ViewPort の幅 (vw) を使用してレスポンシブルなフォントサイズ指定をしているサイトをよく見かける。vw を使った文字サイズの動的な拡大・縮小は少々難儀で、上手く調整してやらないと文字サイズが小さくなりすぎたり大きくなりすぎたりしてしまう。 そんな中、今回は以下のような仕様のページを作ってみる。 一定のウィンドウサイズ以下は最小フォン