[B! レスポンシブ] y-103のブックマーク

CSS コンテナクエリ（@container）の便利な使い方を解説

CSSのコンテナクエリとは、親コンテナに基づいてスタイルを定義できるCSSの新機能です。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になります。 2023年2月14日にFirefox 110にサポートされ、CSSのコンテナクエリはこれですべてのブラウザで利用できるようになりました。コンテナクエリの基礎知識と便利な使い方を紹介します。 Say Hello To CSS Container Queries by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSコンテナクエリの背景 CSSメディアクエリの問題点 CSSコンテナクエリはどのように役立つのか？ CSSコンテナクエリの基礎知識 CSSコンテナクエリの使用例 CSSコンテナクエリのデバッグ方法まとめ

y-103 2023/06/09

リンク

margin, paddingなど、レスポンシブに対応したスペースをCSSで効率的に定義する方法 | コリス

Webページやスマホアプリのレイアウトに使用する、margin, paddingなどのスペースをCSSで効率的に定義する方法を紹介します。 em, remの相対的な単位を使い、calc()を効果的に活用し、拡張性やメンテナンス性にも優れたデザインシステムを構築できます。 Create your design system, part 4: Spacing by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの変数を使用して、スペースのシステムを設定する方法すべてのコンポーネントにデフォルトのpaddingを設定する方法 marginのユーティリティスペース値を追加する場合固定のスペース値が必要な場合スペースを定義したSCSSファイルはじめに元々は、近日公開予定の「Web Comp

y-103 2018/11/27

リンク

CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法

レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で

y-103 2018/04/23

リンク

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transf orm, position, display:flex;などを使ったテクニックが紹介されており、ページの実装に合わせて、実装方法を決めるとよいでしょう。デモではsection要素がコンテナに、div要素が中央に配置されています。

y-103 2017/08/01

リンク

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。下記のレスポンシブ対応のグリッドはたった2行のCSSで、プロパティも2つだけです。 How the minmax() Function Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 minmax()の基本的な使い方 minmax()を使うと、Media Queries無しでレスポンシブデザインができるサポートブラウザ minmax()の基本的な使い方

y-103 2017/06/15

リンク

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。動画をレスポンシブ対応で実装する現在主流となっているテクニックの解説と、もっとスマートに実装できるこれからのテクニックを紹介します。 Experiments in fixed aspect ratios 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。動画をレスポンシブ対応で、アスペクト比を維持したまま配置もっとスマートに実装するためのスタディ動画をレスポンシブ対応で、アスペクト比を維

y-103 2017/05/19

リンク

srcset属性について - Qiita

とりあえず3行で srcsetはHTML5で策定された新属性この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる IEでは使うことが出来ないので注意(http://caniuse.com/#search=srcset) srcset属性について詳しく詳しく書いてあり、良い記事です。 srcset と sizes エリック・ポーティス文と絵鈴木丈訳個人的には、印象に残ったのはグリンピースおいしい^q^ でしたメリット Retinaディスプレイ用に画像を切り替えるウィンドウサイズに合わせて画像を切り替えるウィンドウサイズに合わせて動的に画像を切り替える ->環境ににあった最適な画像をブラウザが選んでくれる（余計な画像は読み込まない）引用元:HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみようデメリ

y-103 2017/04/01

リンク

[CSS]レスポンシブ用のマージン指定、最小値と最大値を設定し、その間を変化させる実装テクニック

ページをレスポンシブ対応にする時、デスクトップでは空白スペースを多めにとり、スマホでは少なめにして、スクリーンサイズに適したマージンを与えたい時があります。マージンの最小値と最大値を設定し、その間の値を変化させる、ビューポートの単位（vw, vh）を使って実装するスタイルシートのテクニックを紹介します。デモページ幅1200px, 800px, 480pxでデモページを表示したもので、上部のマージン（margin-top）が変化しているのが分かると思います。マージンの最大値は15em、最小値は5em、その間の値はスクリーンサイズに応じて変化します。実際の動きは、下記ページでご確認ください。

y-103 2017/03/10

リンク

[CSS]レスポンシブ用にフォントのサイズと行の高さを可変で指定する極上テクニック -The math of CSS locks

CSS lockはレスポンシブWebデザインのテクニックで、フォントのサイズなどを指定した2つの値の間でスムーズに移行させることができます。レスポンシブのテクニックは通常、指定した値でフォントのサイズが急に変化しますが、常にビューポートの現在のサイズに依存して変化します。レスポンシブ用にフォントのサイズと行の高さを可変で指定するテクニックを紹介します。「math」とあるように、もう完全に数学です。 The math of CSS locks 下記は各ポイントを意訳したものです。検証やスタディ部分は省略しているので、元記事をご覧ください。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS lockとは px単位のブレイクポイントを使ったCSS lock em単位のブレイクポイントを使ったCSS lock CSS lockまとめ CSS lockとはビュー

y-103 2017/03/10

リンク

[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法各指定方法の特徴レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。絶対値（absolute）絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。相対値（relative）相対値はサイズ自体の値を持っていません。サイズは親要

y-103 2017/03/10

リンク

レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 - ONZE

レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。

y-103 2016/12/14

リンク

レスポンシブのサイト制作でjsを読み込み分けるためのjsファイル管理方法 | imasashi.net

久しぶりのサイト制作ネタです。ちょくちょくプライベートでサイト制作をすることがありますが、スマホ対応方法はもうレスポンシブ1択でやらせてもらってます。だいたいバンド用のウェブサイトを作ることが多いのですが、メンテナンスにコストをかけれないし、CMSを入れるにも、お客さんが扱えないことが多いこともあって、運用考えるとレスポンシブでええわな、という感じです。あと、俺がめんどくさがりというのも大きいです。 jsっていうと昔は演出作るのがめんどくさくて手を付けてなかったのですが、最近は色気が出てきてちょっとずつ勉強してます。で、レスポンシブのサイトだと、デバイスごとにjsを書き分けるとか読み込み分けたくなります。cssはブラウザ幅で簡単に記述を変えられますが、jsはいろいろとやり方がある。たぶん一長一短あるんでしょうが、今のところの私なりの方法をメモしておきます。更新. documen

y-103 2016/12/11

リンク

レスポンシブ対応のCSSフレームワーク22選

手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。そんなときに便利なのがCSSフレームワークです。CSSフレーム

y-103 2016/05/27

リンク

オブジェクト指向UX | POSTD

(注：2015/11/18、記事およびタイトルを一部修正いたしました。) CNN.com で働いていた2012年6月に、大統領選挙投票日の夜のユーザエクスペリエンス（以後UX）のデザインを任されました。私はそれからの6カ月間を投票日の夜のための仕事に専念しました。しかし、仕事が成功するかしないかは、選挙結果に関係はありませんでした。私が懸念していたのは、情報の見つけやすさやデータの見やすさ、canvasでのオブジェクトの変形、そして一体どのようにしたら、iPhoneでマウスオーバーのフライアウトが動作するのかでした。CNN.com史上初めてWebデザインをレスポンシブにすることにしたのです。さらに史上初めて私が、そのデザインを担当することになったのです。大きな賭けでした。CNN.comにとって大統領選挙投票日の夜と言えば、スーパーボウル（プロアメリカンフットボールの優勝決定戦）の日曜

y-103 2015/11/16

リンク

[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

先日の記事「フォントサイズの指定方法（翻訳版）」で、CSSの比較的新しい単位「ビューポートの単位(Viewport Units)」について触れました。この単位「vw, vh, vmin, vmax」はブラウザのビューポートのサイズに基づくもので、これらの単位で指定した実際の大きさはビューポートの大きさによって変化するため、レスポンシブデザインにあった単位と言えるでしょう。これらの単位を使うことは「フォントサイズの指定方法」でフォントサイズに使うことを反対しましたが、レイアウトでは非常に役立つ単位です。 Viewport vs. Percentage Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。ビューポートの単位(Viewport Units)とは要素を幅いっぱいに指定 (% > vw) 要素を高さいっぱいに指定 (

y-103 2015/07/22

リンク

レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング

2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処カテゴリ:javascript iphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css　→　768pxで切り替えたい →　@media screen and (max-width: 768px) →　ちゃんと768pxで切りかわる js　→　768pxで切り替えたい →　if($(window).innerWidth() < 768){ → 　78

y-103 2015/03/21

リンク

レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い

デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。まずはパーセント指定の基本からまずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。たとえば100pxの親要素の中にある子

y-103 2014/09/24

リンク

はてなブックマーク

タグ

関連タグで絞り込む (23)

レスポンシブに関するy-103のブックマーク (18)

お知らせ

今週のはてなブックマーク数ランキング（2024年5月第3週）

今週のはてなブックマーク数ランキング（2024年5月第2週）

今週のはてなブックマーク数ランキング（2024年5月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス