俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
flexbox レイアウトで内容がはみ出す理由: Days on the Moon
「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
「えーと、画像は全部2倍で作ればOKなんだよね？」を卒業しよう — un-Tech
お疲れ様です、大塚です。 Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。 しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、 「また新しい解像度が出てきたわ…」 と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか？高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。 …え、仕組みがよくわからないままコーディングしていたって？？ そいつぁーまずい。 なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか？ その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。 ディスプレイの仕組み ぼくたちが普段使用している、PCやスマートフォンのディス
Default style sheet for HTML 4
Note: Several sections of this specification have been updated by other specifications. Please, see "Cascading Style Sheets (CSS) — The Official Definition" in the latest CSS Snapshot for a list of specifications and the sections they replace. The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2). This appendix is informative, not normative. This style sheet describes the typic
MacBookのRetinaディスプレイを縦2880pxにした壮観な眺め - ザリガニが見ていた...。
以前の日記「Retinaよりも大切なもの」でも書いた「Retinaディスプレイを縦長に使う自由が欲しい」という欲求は、なんとOSX標準の機能で簡単に実現できてしまうのであった！ 参考ページ：[Mac] 知らない人は損してると思うMacの使い方【その４】 | Appleちゃんねるの「MacBookでポートレート表示」の項目。（素晴らしい情報に感謝！） システム環境設定を起動（すでに起動している時は一旦終了してから）して、commandキーとoptionキーを押しながら、「ディスプレイ」をクリック。すると、いつもは見えない回転という設定が現れるのだ！ MacBook Pro Retina15 OSX 10.8.2の環境において、「回転」の設定項目が表示された。 初代 MacBook OSX10.6、2008late MacBook OSX10.6の環境では、いくら試しても「回転」の設定項目は表
波動拳！ プロゲーマー監修の格ゲー向け液晶モニタが登場
波動拳！ プロゲーマー監修の格ゲー向け液晶モニタが登場2014.08.02 12:30 小暮ひさのり さらなる｢強さ｣を求めるなら。 格闘ゲーム向けな設定が追加された液晶モニタ｢RL2460HT｣が7月29日から販売開始となりました。このモニタ、どこが格闘ゲーム向けなのか？ というと、プロゲーマー、Justin JWong Wong氏が監修した画質モード｢Fighting｣を搭載。彼が『ストリートファイターⅣ』をプレイ際に最適だとする画質チューニングをユーザが再現できる｣液晶モニタとなっています。このモード専用の限定された特殊処理が施してあるわけではないのですが、強者にならうのもまた格ゲー上達の道なはず。 なお、その他にもゲーム向けの特徴として、HDMI入力2系統に加えてHDMI出力1系統を装備しています。つまり、分配器不要でゲーム機の映像をモニタを経由してキャプチャ機器に接続（パススルー
CSSの display: inline、display: block、display: inline-block をマスターしよう！ | たねっぱ！
CSS の display プロパティについて紹介します！ display: inline・display: block・display: inline-blockについてのおさらい。HTMLとCSSひよこちゃん向け！ いろいろ便利な CSS の display プロパティ。今回は display: inline display: block display: inline-block についておさらいしてみます。HTMLひよこちゃん向けの記事です！ displayプロパティで、ブロック・インライン・インラインブロックをおさらいしてみた displayプロパティ displayは、要素の「表示形式」を指定するプロパティ。 ブロックレベル要素をインライン形式で表示したり、インライン要素をブロックレベル形式で表示することができます。 構造的にはブロックレベル要素なんだけど、インラインとして表示
レスポンシブデザインの進化はWebの常識を変えるか？ | ゆっくりと…
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか？」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
Kindle Paperwhiteの次モデル、柔軟性のある新ディスプレイ技術を利用
Kindle PaperwhiteまたはKindle DXの後継モデルはE Ink Mobiusを採用するとAmazon社内の情報ソース。 Amazon社内の情報ソースがGood e-Readerに対し、今後登場するKindle Paperwhiteは従来のモデルよりも軽く、高解像度で、柔軟性のある新ディスプレイ技術を使用すると明かした。 新しいKindle Paperwhiteは「Mobius」と呼ばれるE Inkとソニーが開発したディスプレイ技術を利用することになる。Mobiusは、軽量で頑丈な製品の開発が可能となるTFT技術を利用しており、同等のガラスベースのTFTと比較して半分以下の重量しかない。これは、より大きな表示領域を必要とするモバイル製品にとって特に重要だ。 商業的に目のあるMobius採用製品としては、ソニーの13.3インチ電子ペーパーが挙げられる。筆者が初めてこのデバイ
2万円を切るフィリップスの液晶ディスプレイがコスパ最高でマジおすすめ | nori510.com
価格コムの液晶モニタ・液晶ディスプレイ 人気売れ筋ランキングで、発売後から長きに渡り1位をキープし、今も上位に位置するフィリップスの23インチワイドディスプレイ『234E5QHSB/11』 価格コムプロダクトアワード2013部門賞の銀賞に輝くなど評価も高く、50を超えるAmazonのレビュー平均も4.3と高評価。 丁度仕事場に液晶ディスプレイが欲しかったので、コレしかない！と購入したら、コレがホントにとてもイイ感じでした。 「良いものはオススメしたい！」という気持ちで、ご紹介してみようと思います！ PHILIPSの液晶モニタがとてもイイ！ まず、この液晶の何が良かったのか列挙してみたいと思います。 超狭ベゼルのスタイリッシュデザイン AH-IPSディスプレイの視野角の広い鮮やかな画像 5年間のロングフル保証 これだけの製品が2万を切る価格でコスパ最高！ 良かった点は大まかにこの4点。 まず
Responsive Web Design Cheat Sheet
By Ben Gremillion on 6th January, 2014 Updated on 22nd April, 2020 #Tutorials #UX Design How to set up breakpoints in this design? You probably ask yourselves this question a lot. Responsive design breakpoints are no rocket science and you don’t need to search the web for the proper breakpoint dimensions every time you design for responsive. As a matter of fact, the ultimate design aid in this mat
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
【やらなきゃ損！】Macbook Airの液晶の色が激的に良くなる方法！ - すりゴマ・ドットコム
すりゴマです。 今日もいい感じにすり潰していきますね。 photo by Crouchy69 こんなビビッドな写真をずっと見てたら、目が痛くなってきますね。 すりゴマも仕事柄、このMacbook Airの画面を見ている時間が長いので、少しでも目の疲労を少なくしたいです。。 MacBook Airの液晶パネルメーカーには数種類あって、すりゴマのは一番汚いと言われるLG製なんです… OTL ということで、カラープロファイルを変更し、白っぽくて黄ばんだ色を、キレイで目に優しい色に変える方法をご紹介します！ パネルメーカーをチェック！！ 一応言わなきゃなので書きますが、カラープロファイルのカスタマイズは自己責任で行ってください。 ご紹介したプロファイルを使用して、いかなる不都合が起きてもすりゴマは責任を負いかねます。。。 (´・ω・｀) ではまず、Macbook Airの液晶パネルメーカーがLG製
Victor Coulon : Mon blog High Tech
Arrêter de fumer est un défi, mais avec la bonne méthode, vous pouvez y arriver. Il existe plusieurs solutions pour…
グローバルナビゲーション不要論
2013年8月10日 多くのWebページでは、そのページが属するWebサイトの主要なコンテンツ/カテゴリーにアクセスするためのメニュー、俗にグローバルナビゲーション（以下「グロナビ」）と呼ばれるものがページの先頭近くに置かれています。もうだいぶ前から、そんなものは要らない（少なくとも「そこには」要らない）ということを自分は考えており、PCよりも物理的に小さな画面でWebを使うことが一般化した昨今においては益々、その思いを強くしています。 Googleなどの検索サービス経由でアクセスしたにせよそうでないにせよ、ユーザーの目的とするコンテンツは、あくまでもそのページ固有のメインコンテンツ（HTML5的にはmain要素内容）のハズ。であれば、それより前に余計な（メインコンテンツの一部を成さない）情報や機能はなるべく置かないほうが良い。スマートフォンの画面なんかで見たときに、そういった「余計な」情
Screen Sizes | Viewport Sizes and Pixel Densities for Popular Devices
We built screensiz.es to help you quickly find the screen specifications of the most popular devices and monitors currently on the market. The size data comes from a variety of sources. For a better understanding of Pixel Density, check out this great post by Teehan+Lax. Our “popularity” guesstimates are derived from annualized monthly Google queries (from AdWords traffic estimator), and some fuzz
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OS X Yosemiteの閉じるボタンの”x”印が左にズレて見えるのは色収差のためなのか？
Display Centric World
Responsive Checker
Courses and Tutorials in HTML/CSS | Envato Tuts+
