Media Queryでminやmaxはもう使いたくない。全ブラウザ対応した範囲記法が直感的で便利

2023/03/28 100 users ＭＡＸ Safari CSS Media Query 筆者

筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query ... 続きを読む

CSSの三角関数（sin(), cos(), tan()）の基礎知識と基本的な使い方を解説

2023/03/23 146 users cos tan Sin CSS 三角関数

CSSで数式を使用するときには、今まではcalc()関数をはじめ、min(), max(), clamp()などの関数でしたが、ついに三角関数もChrome, Edge, Safari, Firefoxのすべてにサポートされました。 CSSの三角関数、sin(), cos, tan(), asin(), acos(), atan(), atan2()の基礎知識と基本的な使い方を紹介します。 Trigonometric fun... 続きを読む

これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon

2023/02/20 286 users SVGアイコン 太っ腹ライセンス 改変 UIデザイン用 特徴

WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 Min... 続きを読む

レスポンシブ対応のレイアウトやUIコンポーネントの実装が簡単！ min(), max(), clamp() の便利な使い方を詳しく解説

2022/10/13 118 users CLAMP ＭＡＸ UIコンポーネント CSS メディアクエリ

CSSの比較関数が主要ブラウザすべてにサポートされてから早2年が経ちました。これらの比較関数は、今まではJavaScriptを使用しないとできなかったこと、メディアクエリで複雑に実装していたことをシンプルなCSSで実装できます。 最近のWebサイトで使用されている、CSSの比較関数 min(), max(), clamp() の便利な使い方を... 続きを読む

iPhone「mini」ユーザーはどこへ向かうのか (1/3)

2022/09/10 204 users iPhone plus アップル ラインナップ mini

アップルが発表したiPhone 14シリーズには、小型の「mini」が存在しません。なぜこうなってしまったのか、そしてminiを使っていたユーザーはこれからどうすればいいのか、考えてみます。 miniと入れ替わりに「Plus」が追加 iPhoneのラインナップは、2020年のiPhone 12から「6.1インチ」の通常モデルと「5.4インチ」のmin... 続きを読む

CSSの数学関数min()、max()、clamp()の基本的な使い方

2021/11/04 162 users CLAMP Calc font-size ＭＡＸ CSS

IEをサポートから外すと、CSSの便利な新しいプロパティが使用できます。その中の1つ、いや3つがmin(), max(), clamp()です。 数学関数といえばcalc()が便利ですが、さらに便利なのがこの3つです。要素の幅指定、padding値の管理、font-sizeの定義など、レスポンシブ対応で大活躍します。min(), max(), clamp()の基本的な... 続きを読む

JT M.D., Ph.D. on Twitter: "往診で治るビョーキじゃねーんだ。 点滴、酸素吸入も設備が無けりゃ出来ねーんだよ。 酸素吸入5L/minで1日7,200L必要なんだよ。液化酸素タンクのレベルなんだよ。今か

2021/08/06 262 users ビョーキ Ph.D 往診 点滴 酸素吸入

往診で治るビョーキじゃねーんだ。 点滴、酸素吸入も設備が無けりゃ出来ねーんだよ。 酸素吸入5L/minで1日7,200L必要なんだよ。液化酸素タンクのレベルなんだよ。今から医者になってから言えよ。バカ… https://t.co/PsKKsd5bpo 続きを読む

これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか | コリス

2020/12/08 358 users ＭＡＸ コリス UIコンポーネント デベロッパー スクリーン

ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、 フロントエンドの... 続きを読む

CSSの数学関数が便利すぎる！min(), max(), clamp()の使い方を詳しく解説 | コリス

2020/05/28 182 users CLAMP Calc コリス ＭＡＸ Firefox

CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの数学関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フ... 続きを読む

脂肪がダイエットの大敵というのは大いなる誤解でむしろ健康に良い - GIGAZINE

2013/08/05 151 users 大敵 コレステロール 誤解 脂肪 medium.com

By 孫詩敏 ダイエット中の人にとって「脂肪」は憎き敵で、絶対に取ってはいけないものと認識されています。また、脂肪はコレステロールが気になる人にとっても嫌われています。ところが、脂肪は健康の敵ではなく健康の友と言うべき存在であることがアメリカの研究で判明しました。 A Chef and Doctor Talk About Butter - Medium https://medium.com/min... 続きを読む

SpotInstanceとJMeterを使って400万req/minの負荷試験を行う ｜ Developers.IO

2013/05/07 242 users Developers.IO JMeter 負荷試験 シナリオ

Apache JMeterのMaster/Slave構成 シナリオを用いた負荷試験といえばJMeterということで、使ったことがある方も多いかと思います。しかし、ほとんどの方は自分のPCを使ってやっている程度ではないでしょうか。最近は、スマホ連動のシステムが多くなってきていますので、1台のPCから負荷を掛けたとしても大した負荷試験になりません。そこで、今回はJMeterをMaster/Slaveの... 続きを読む

固定幅ベースの elastic レイアウトサンプル

2007/03/12 142 users Elastic ela max-width レイアウト 変更

elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する ela... 続きを読む