CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
Beyond Media Queries: Using Newer HTML & CSS Features For Responsive Designs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number tools (revolving around HTML and CSS) we have at the ready, from resp
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて
Webデザインのレスポンシブ対応グリッド、基本の使い方徹底ガイド
この記事では、Webレスポンシブデザインにおけるグリッドの使用方法をまとめた基本ガイドです。デスクトップ、タブレット、モバイル向けのグリッドの使い方をそれぞれご紹介します。 レスポンシブグリッドの重要な部分に入る前に、基本的な用語を正しく理解しましょう。 レスポンシブ・グリッドの基本用語まとめ フィールド要素（Field Elements） むらさき色の部分がフィールド要素 フィールド要素は、文字テキスト、イメージ画像、またはその両方を組み合わせたデザインのブロック要素を指します。背景色は、文字テキスト/イメージ画像の背景でない限り、実際にはフィールド要素としては扱いません。 その他にもユニット、要素、親コンテナ（Parent Containers）など別の呼び方もありますが、どれも一緒と考えて構いません。 カラム（Columns） カラム・列は、デザインコンテンツの幅を構成する濃いピンク
レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer
レスポンシブの確認をしたい時、最近ではスマホやタブレットなどのスクリーンサイズもいろいろなものがリリースされたので、大変になってきました。複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。 先日リリースされたばかりのResponsiveViewerを紹介します。 ResponsiveViewerはChromeの機能拡張で、無料で利用できます。 ResponsiveViewer -GitHub ResponsiveViewerのインストール ResponsiveViewerの使い方 ResponsiveViewerのインストール ResponsiveViewerのインストールは簡単です。 他の機能拡張と同様にChromeウェブストアにアクセスし、「Chromeに追加」ボタンをクリックするだけです。 ResponsiveViewer -Chromeウェブストア ユーザ
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれぞれに最適なレイアウトを実装するテクニックを紹介します。 Use calc() to Change the Height of a Hero Component 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 calc()を使ったフォントサイズの可変 paddingとline-heightの場合 ヒーローコンポーネントの場合 calc()を使ったヒーローコンポーネントの実装 calc()のサポートブラウザ 最後に ca
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
Bootstrapはもう古い!?Gumbyフレームワークが便利 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
Gumby – A Flexible, Responsive CSS Framework – Powered by Sass こんにちは。ECプロデュース部の岡本です。 みなさまはレスポンシブサイトを作る時、どのようなフレームワークを使用されていますでしょうか？ 有名ドコロであれば「Twitter Bootstrap」や「Foundation」などがよく利用されているのではないかと思います。 特にBoostrapはナビゲーションなどの「コンポーネント」が非常に豊富で、モックアップなどを作成する際には非常に重宝されている様です。 しかし一方でカスタマイズするには束縛されるポイントも多く、実際のコーディングに使うには少し工夫が必要となります。 今回はBootstrap並にコンポーネントが多いのに、カスタマイズ性が非常に高いフレームワーク「Gumby」をご紹介いたします。 特徴１：柔軟なグリッド
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 - エンジニアtype
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 2013/05/31公開 《Fashionably Flexible ワークショップレポート》 2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。 ■ Andy Clarkeって誰？ 世界的に著名であるものの、日本では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。 Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
