【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
簡単にBootstrapのプロトタイプを作れる『Pingendo』がめっちゃパワーアップしてた | バンクーバーのうぇぶ屋
友人に教えてもらってからちょっと使って、結構感動したのでここでもシェア〜！どっかでシェアした事があると思うんですが、PingendoというBootstrapを使ったプロトタイプがめちゃめちゃ速攻で作れるアプリとして昔からあったんですが、それがいつの間にかめっちゃ使いやすくなっていたので、ここでも共有させて貰えればと思います。 Pingendo自体でサイトを作るというより、あくまでもプロトタイプの段階でのサイトレイアウトをぱぱっと作る上では結構使える場面もあるんじゃないかと思うので、是非一度使ってみるのも良いかと思いますー！ それでは行ってみましょう！ とりあえずサイトからアプリをダウンロード Mac版と、Win版、それからLinux版とあるみたいですね。とりあえず、Macから見てるので、Mac版で見てみようと思います。っていうか、Boostrap4っていつになるんだろ。 テンプレートを選択
スタイルガイドジェネレータのsc5-styleguideがいい感じそうだったので試してみた - Qiita
var gulp = require('gulp'); var styleguide = require('sc5-styleguide'); var sass = require('gulp-sass'); var outputPath = 'output'; gulp.task('styleguide:generate', function() { return gulp.src('test/**/*.scss') .pipe(styleguide.generate({ title: 'My Styleguide', server: true, rootPath: outputPath, overviewPath: 'test/overview.md' })) .pipe(gulp.dest(outputPath)); }); gulp.task('styleguide:applyst
ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate
ウェブサイトのデザインや実装の一貫性を促進するために、制作に携わる全ての人に役立つスタイルガイドを簡単に作成できるテンプレートを紹介します。 現役時代、独自のテンプレートを使ってましたが、こういう便利なものがリリースされる時代なのですね（遠い目 Style Guide Boilerplate Style Guide Boilerplate -GitHub Style Guide Boilerplateの紹介の前に、スタイルガイド未体験の人用にどのように役立てるか簡単に説明します。 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイトを効率的に管理する。 スタイルガイド制作のタイミングとしては、草案を制作中に作りつつ、納品時には定義が全て網羅されている状態がベストではないで
ブラウザー上でスタイルガイドが作れるFrontifyを試してみた
2015年9月24日 便利ツール 巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！ ↑私が10年以上利用している会計ソフト！ スタイルガイドとは？ Webサイトを一人で制作、運営している場合、そのサイトに必要な画像やロゴ、配色パターンなどはすべて自分が把握できているものです。しかしチームを組んで運営していく場合は、コーディング規約と同様、デザインのルールをひとつにまとめておくといいでしょう。そのルール集がスタイルガイドです。スタイルガイドを作る
第1回 今どきのWebサイト制作にはBootstrapがおすすめ！ | gihyo.jp
本連載では、HTML5やCSSの基礎を理解している方へ向けて、Bootstrapの特徴や実際の使い方を解説していきます。レスポンシブデザインは聞いたことがあるけれども「実務採用したことがない」「仕方がわからない！」という方。そんな「あなた」が1つ上のステージへ進むためのパスポートです。Bootstrapを使うことで簡単にレスポンシブサイトを制作できるようになります。 「スマホ専用サイトは使いづらい！予算が掛かる」は古い 昨年頃からスマホ専用サイトの「必要説」が揺らいでいます。その背景には、従来のPCサイト用のデータから必要最低限のデータを抽出した形で、全く別サイトとしてスマホ専用サイトが設計されているため、「UIが変わりすぎてわからない」「情報量が少ないなどの欠点が目立ちユーザーに受け入れらない」といった状況があるからです。 参考資料： 8割以上が「スマートフォン専用サイト不要」と回
おしゃれにデザインされた丸型シェアボタン実装jQueryプラグイン「Sharetastic」:phpspot開発日誌
Sharetastic おしゃれにデザインされた丸型シェアボタン実装jQueryプラグイン「Sharetastic」 次のような、モダンなサイトデザインにもマッチする感じのシェアボタンを実装できます 関連エントリ カスタマイズ可能で綺麗なシェアボタンを実装できる「Shr」 data属性を付与するだけでシェアボタンが簡単に作れる「Sharer.js」
CSS3で実現するアローアイコン
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
スマホ・タブレットのスクリーンサイズまとめサイト「Screensiz.es」:phpspot開発日誌
Screensiz.es スマホ・タブレットのスクリーンサイズまとめサイト「Screensiz.es」 端末名と併せて、シェア等に併せてスクリーンサイズを閲覧できます。世界で最も使われている端末のスクリーンサイズは大体どんなものか、ということを調べるのに役立ちます 日本でのシェアとは違うことも考えられますが、アクセス解析などから端末を調査してスクリーンサイズを簡単に調べるのに役立ちそう。特にAndroid系 関連エントリ これは見ておくべきCSS3＆HTML5の実験１６サイトまとめ Facebook,Twitter等ソーシャルメディアデザイン用の画像をまとめて作れる「Social Media Image Maker」 前ブラウザのブラウザハックまとめ「Browserhacks」 Twitter、Facebok等のコンテンツを１ページにまとめて表示するPHPアプリ「PubwichFork」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
★レスポンシブの基本、メディアクエリの書き方 | | それからデザイン スタッフブログ
役に立つプレゼン資料・企画書が集まったサイト「bikkuri（ビックリ）」
webamb.com