タグ ブレイクポイント
人気順 10 users 50 users 100 users 500 users 1000 usersレスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法 | セカヤサブログ
2022/08/17
271 users
装飾
レスポンシブ
レスポンシブ対応
傾向
皆さん
皆さんは、レスポンシブ対応の時にどうしてもデザイン通りに要素が収まらなず仕方なくブレイクポイントを追加して対応したことはありませんか？僕はあります。気をつけないとすぐ要素がはみ出したり重なったりしますよね。 装飾が賑やかなほど起こりやすい傾向にあり、特にLPでよく見かけるように思います。 しかし、コ... 続きを読む
Tailwind CSSのカスタマイズ方法を解説、基本的な機能を維持しつつ、スタイルを変更・追加するテクニック | コリス
2021/05/19
11 users
コリス
パディング
ユーティリティクラス
マージン
テクニック
Tailwind CSSはユーティリティクラスのフレームワークですが、すべてのスタイルは用意されていません。カラーを増やしたり、ブレイクポイントを増やしたり、マージンやパディングの値を増やしたり、カスタマイズ方法を紹介します。 また、Tailwind UIのUIコンポーネントをそのまま使用すると、似たデザインになってしま... 続きを読む
俺流レスポンシブコーディング
2021/02/15
448 users
レスポンシブコーディング
覚書
デバイス
正解
特定
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサ... 続きを読む
kz（livetune）が考える、VTuber文化ならではの魅力「僕らが10年かけたことを、わずか2年でやってる」｜Real Sound｜リアルサウンド テック
2019/12/08
107 users
livetune
Vtuber
バーチャルYouTuber
kz（livetune）が考える、VTuber文化ならではの魅力「僕らが10年かけたことを、わずか2年でやってる」 2017年12月にある種のブレイクポイントを迎え、以降急速に発展してきたバーチャルYouTuber（VTuber）シーン。勢力図が次々に変化し、企業が積極的に介入するなど、何かと騒がしいこの界隈を、リアルサウンドテックで... 続きを読む
Nintendo Switch『Untitled Goose Game』はそんなに面白いのか。『ゴーストリコン ブレイクポイント』果てなき装備品収集。さくっと『Hexcells』をプレイ。今週のゲーミング | AUTOMATON
2019/10/06
18 users
ゴーストリコン
AUTOMATON
ゲーミング
プレイ
ホーム
ホーム 全記事 Now Gaming Nintendo Switch『Untitled Goose Game』はそんなに面白いのか。『ゴーストリコン ブレイクポイント』果てなき装備品収集。さくっと『Hexcells』をプレイ。今週のゲーミング 全記事Now Gaming 続きを読む
CSSでブレイクポイントを定義する時の一般的なスクリーンサイズやデバイスの状況を確認できる -Screen Size Map | コリス
2019/09/29
48 users
分布
タブレット
コリス
デスクトップ
サイズごと
スマホ・タブレット・デスクトップの一般的なスクリーンサイズをデバイスの状況、人気が高いスクリーンサイズ、サイズごとの分布がまとめられたScreen Size Mapを紹介します。 最近はスクリーンサイズもかなり増えてきま...記事の続きを読む 続きを読む
CSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layout | コリス
2019/09/05
242 users
コリス
Flexbox
コンテキスト
Media
CSS
CSSのレイアウトは最近ではFlexboxが主流となり、それまでの考え方や実装方法とは大きく異なります。@mediaのブレイクポイントやハックを使用せず、CSSの性能を活かした、コンテキストに依存しないコンテンツベースで実装するコンポーネントのレイアウト方法を学べるRelearn CSS layoutを紹介します。 すべてのデバイス... 続きを読む
CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) - Qiita
2019/08/27
62 users
Element
Qiita
Vuetify
読書管理アプリ
CSSフレームワークのブレイクポイントを比べて(Bluma, Vuetify, Element, Bootstrap, etc..) いま開発している積読用の読書管理アプリでは、CSSフレームワークにBlumaを使ってる。 昔は、VuetifyやBootstrapを使っていたけど、ブレイクポイントが違っているのでまとめてみた(´ω｀) ブレイクポイントのまとめ xs sm md lg... 続きを読む
レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
2019/07/30
610 users
レスポンシブデザイン
正解
web
PDF
方向
PDFはこちらからどうぞ[500KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレ... 続きを読む
CSSの「calc()関数」を使うとすごく便利に！レスポンシブ対応のレイアウトで高さを最適化するテクニック | コリス
2018/11/14
326 users
Calc
コリス
CSS
関数
デバイス
レスポンシブ対応のレイアウトを実装する際に手間なのは、ブレイクポイントの定義です。ここ1,2年でもたくさんのデバイスがリリースされ、それに伴いスクリーンサイズの種類も増えてきました。 そんな時に便利なのがCSSの「calc()関数」を使ったテクニック。 calc()を使用して、デスクトップやタブレットやスマホのそれ... 続きを読む
CSS Gridを使ってみたい人にぴったり！さまざまなレイアウトをシンプルなHTMLで実装できる -iota | コリス
2017/12/12
76 users
iota
コリス
class
CSS Grid
レイアウト
CSS Gridを使ったレスポンシブ対応のレイアウトを簡単に実装できる超軽量フレームワークを紹介します。 シンプルなレイアウトから、複雑なレイアウトまで、ブレイクポイントごとにレイアウトを定義することができます。ブレイクポイントはもちろん、カスタマイズできます。 iota iota -GitHub iotaの特徴 iotaの使い方 iotaのデモ iotaの特徴 必要なclassは一つだけ このフ... 続きを読む
[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法 | コリス
2017/02/23
224 users
ワイドスクリーン
レスポンシブ用
タブレット
コリス
傾向
スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。 スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。... 続きを読む
Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット | NxWorld
2016/12/07
33 users
Mixin
Sass
NxWorld
SCSS
スニペット
ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイン... 続きを読む
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方 – Rriver
2016/10/17
216 users
Rriver
pngquant
手動
レスポンシブイメージ
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、 イメージオプティム とか Mac Automatorとpngquant などのツールを駆使して一生懸命に画像自体を最適化したり レスポンシブイメージ を使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。... 続きを読む
[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ | コリス
2016/09/12
472 users
コリス
プレー
CSS
メディアクエリ
リソース
スマホやタブレット、ラップトップ、デスクトップ、最近はWebページを表示するデバイスは多様化しています。レスポンシブデザインでよく使われているMedia Queries（メディアクエリ）の書き方、ブレイクポイントの最適な値など、制作に役立つリソースやツールを紹介します。 各デバイスのブレイクポイントに合わせたメディアクエリの書き方 複数のブレイクポイントを使ったメディアクエリの書き方 人気のフレー... 続きを読む
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus | コリス
2015/10/15
243 users
corpus
コリス
ユーティリティ
グリッド
CSS
Webサイトやブログを作成する時にCSSでよく使うコード、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・画像周り・ライン・ユーティリティ・アニメーションなどがまとめられたCorpusを紹介します。 スニペットに登録したり、ブックマークしておくと便利ですね。 Corpus Corpusでは、作者自らが新しいプロジェクトを始める時によく使用するコードのセットをまとめており、汎用的... 続きを読む
レスポンシブ対応のWebページを制作する時に役立つスクリプトのまとめ | コリス
2015/03/30
413 users
コリス
GitHub
BOD
Body
class
bodyやページ上の各要素にレスポンシブ用のclassを付与、HTML, CSS, JavaScriptで利用できるブレイクポイントを一元管理、設定したブレイクポイントに応じて最適なサイズの画像を表示・レイアウトの変更など、レスポンシブ対応のWebページを制作する際に役立つスクリプトを紹介します。 Restive.JS Restive.JS -GitHub 表示しているデバイスを自動検出し、bod... 続きを読む
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : code14
2015/03/20
251 users
レスポンシブ
スレ
CSS
対処
レスポンシブデザイン
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト ツイート レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cs... 続きを読む
【レスポンシブコーディング】要素の横幅と高さの比率を保つ | 集の一期一会
2015/01/04
209 users
レスポンシブコーディング
横幅
一期一会
Demo
比率
レスポンシブコーディングについて、前々から技術的なブログを書こうと思ってはいたのですが、なかなか更新する時間がなくできていませんでした。で、今回が初記事。 まず、デモから。 DEMO なんのデモなのかわからないと思うので、説明をします。 まず、緑のエリアは、丸っと画像です。 あ、ブレイクポイントは640pxです。 画面サイズを640px以下にして見てください。 で、 緑のエリアは、丸っと画像なので... 続きを読む
px指定の次はコレ！フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework | コリス
2014/11/27
105 users
rem
GitHub
コリス
フォントサイズ
フレームワーク
Webページでよく使用するさまざまなコンポーネントが簡単に利用できるフロントエンド用のフレームワークを紹介します。 最近は、フォントサイズやMedia Queriesのブレイクポイントなどの単位に「rem」を使用しているサイトが増えてきましたね。 Schema UI Framework Schema UI Framework -GitHub 「rem」の詳しい説明は、以前の記事をご覧ください。 フ... 続きを読む
[JS]ページ上のあらゆる要素を簡単にレスポンシブ対応にするスクリプト -Responsive Elements | コリス
2013/09/17
68 users
コリス
jQuery
class
スクリプト
ピクセル単位
外部スクリプトを加えるだけで、ページ上のあらゆる要素にレスポンシブ対応のclassを利用できるようにするjQueryのプラグインを紹介します。 ブレイクポイントはピクセル単位で細かく、そして複数設定することが可能で、さまざまな表示幅に最適化なスタイルを特定の要素に適用できます。 Responsive Elements Responsive Elements -GitHub Responsive E... 続きを読む
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify | コリス
2013/07/22
153 users
jQuery
Clingify
コリス
ヘッダ
マージン
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 Clingify Clingify -GitHub Clingifyのデモ Clingifyの使い方 Clingifyのデモ スクリプトのページ自体がデモページになっています。 デモページ スクロール無しの状態では、ヘッダは上にマージンを... 続きを読む
[JS]jQueryも外部CSSも不要！レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
2013/05/22
491 users
jQuery
コリス
スタンドアローン
RESET
グリッド
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示... 続きを読む
レスポンシブ対応用に複数のブレイクポイントで手軽に確認できるツール -Wood Cuttr | コリス
2013/04/25
41 users
コリス
ツール
複数
初級者向け iOS デバッグ Tips - enator's blog
2013/01/29
104 users
too
enator
ステップ実行
2013-01-29
2013-01-29 初級者向け iOS デバッグ Tips こちらの良記事を拝見しまして、 中級者向け iOSデバッグTips 初級者向けを作ってみようかと。 とりあえず、 ブレイクポイント操作のステップ実行あたりと NSLog周りについて ブレイクポイント操作のステップ実行 まずブレイクポイントの張り方は、 .mファイルの行番号をクリックするだけで有効になります。 ※青くならない場合は、Too... 続きを読む