サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。 たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。 このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時
SVGを使用してUIコンポーネントを構築すると、実装がより簡単により分かりやすくなります。SVGとCSSを使用したUIコンポーネントの実装テクニックを紹介します。SVGなのでカラーやサイズも簡単に変更でき、軽量で、レスポンシブにも完全対応です。BuildingUI Components WithSVG andCSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1.SVGで切り抜きを実装 2.SVGでセクションの見出しを実装 3.SVGでリンクの下線を実装 4.SVGでテープを実装 終わりに はじめにSVGはアイコンやイラストだけでなく、わたし達デベロッパーが忘れがちなパワーをたくさん持っています。CSSと比較して、SVGを使用することが理にかなっているユースケー
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。CSS ways toCreate Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！iPhone,Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。Windows,macOS,Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1Mac,Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images inHTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
Warning: Undefined array key "author" in /home/c7993020/public_html/pulpxstyle.com/wp-content/themes/pulpnote/functions.php online 132フリーランスとして一人で制作をしていると、どうしても自身のスタイルの中だけでデザインしがちなので、新たな刺激を求めて書籍やネットを徘徊して見るようにしています。今回は、私が参考にしているギャラリーサイトを11個紹介します。クライアントとの打ち合わせ時も担当者とイメージを共有できるので便利に利用できると思います。ぜひ参考にしてみてください。 URAGAWA 担当した制作会社を掲載しているギャラリーサイト。制作会社ごとに見て回れるのはおもしろい。カテゴリ分けも『業界』『タイプ』『特徴』『カラー』『特集』『アワード受賞』『ランキ
CSS Flexboxで実装するWebページでよく見かけるレスポンシブ対応のレイアウト、カードレイアウト、ナビゲーションバー、サイドバー、聖杯レイアウトなどのHTMLとCSSのコードを紹介します。 コードは非常にシンプルなので、テンプレートやスニペットとして再利用できます。 MasterCSS Flexbox 2021 🔥-Build 5 Responsive Layouts🎖️||CSS 2021 by Joy Shaheb 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxの構造・各プロパティと値 実装の準備 Level 1: シンプルなカードレイアウト Level 2: ナビゲーションバー Level 3: サイドバー Level 4: 少し複雑なカードレイアウト Level 5: Holy Grai
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jpPDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2ff4c7ac634fac67a537ad7d80cba26b2cc5d00bc0%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcdn.image.st-hatena.com%252Fimage%252Fscale%252F12c38ee53f8c04a39cfdba97bf59af7b09cafc72%252Fbackend%253Dimagemagick%253Bheight%253D1300%253Bversion%253D1%253Bwidth%253D1300%252Fhttps%25253A%25252F%25252Fcdn-ak.f.st-hatena.com%25252Fimages%25252Ffotolife%25252Fh%25252Fhashimotoblog%25252F20190528%25252F20190528165147.png&f=jpg&w=240)
jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法をφ(..) jQueryで、ウィンドウ幅と高さを取得するには、 var w = $(window).width(); var h = $(window).height(); こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが… そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。 var w = window.innerWidth ? window.
Webサイトで実装するさまざまなUIエレメントやコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイドを作成できるシンプルなフレームワークを紹介します。 必要に応じて、HTMLのテンプレート、CSSのスタイルシート、使用しているのであればJavaScriptもすべて利用できます。
今年の夏もCSSでうにょーんとなっていました。 （毎年いただくお仕事なんですが、毎回頭をひねる…。お陰で勉強になっていますが） 今回は普通に組まれたHTML（元々レスポンシブする予定じゃなかったやつ）をレスポンシブ対応する作業がおおくて、ああこうすればいいのか…！というのが多かったので、まとめておきます。 レスポンシブデザインとは？ 1つのHTMLで、画面サイズによってレイアウトなどが変わってしまうデザイン。PC画面サイズやタブレットサイズ、スマホサイズなどで切り替える事が多いです。 切り替え方法としてはCSS Media Queries を使って切り替えます。 この方法も２つあって、link要素のmedia属性で読み込むCSSファイルを分ける方法と、CSSソース内に書き込む方法とあります。 link要素のmedia属性でCSSファイルを分ける方法CSSを読み込む際に、media属性を
グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework
最近になってやっとレスポンシブWebデザインに手を出しました。 今までは各デバイス用にhtmlやテーマを作り、ユーザーエージェント（見に来た人のデバイスやブラウザなど）を判別して見せるテーマを振り分けるという方法でやってました。 特にWordPressにはデバイスごとにテーマを振り分ける便利なプラグインがたくさんあるのです・・！ が テーマを複数作るよりスタイルで振り分けるレスポンシブのほうが実は効率が良いのではないかと思い立ちました。遅いか。遅いよね！ そこで、自分の「初めてのレスポンシブ！」の備忘録を使用・参考にさせてもらった便利なツールやオンラインサービス、参考サイトを紹介ながら書きたいと思います。 レスポンシブWebデザインとは デバイスをwebサイト表示の判断基準にするのではなく、 ブラウザの横幅サイズをwebサイト表示の判断基準にし、ページのレイアウトデザインを柔軟に調
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2feca9086338399b021f0f7184c9d87872b7931c55%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201702%252F2017053101-01.png&f=jpg&w=240)
![[CSS]ビューポート幅（vw）に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f0e988256232f0d626498e49d6ce0a326ccb9d200%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fcoliss.com%252Fwp-content%252Fuploads-201701%252F2017013101.png&f=jpg&w=240)
