意外と奥深いCSSのfont-weightの話 - ICS MEDIA
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
覚えておくと便利なCSSデザインTipsを9つ集めてみた | BUILD Journal
覚えておくと便利なCSSデザインTipsを9つ集めてみたUpdate2023.05.18Release2023.05.18Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する これまでは画像で表現していたデザインを今ではCSSのみで実装できるものが多くなってきました。今回は覚えておくと便利な現場で使えるCSSデザイン Tips を9個紹介します。いざという時に使えるものばかりですので、ストックしておくことをおすすめします。 見出しの改行位置をCSSで調整する見出しの改行位置を調整する見出しの文章が中央揃えである程度の文字数があると、スマホで見た場合意図したところで改行ができていないことがあります。上の動画をご覧ください。上側の文章は改行されると2行目3行目も中央寄りになるため、画面サイズによっては最終行が1〜3文字になってしまい
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
CSSで背景画像をぼかす方法【決定版】
CSSで背景画像をぼかす方法をご紹介します。 つまり、 これを こうする方法です。 理屈も含めて解説していきますが、結論だけ知りたい方は スキップ しちゃってください。 filter プロパティの blur() 関数を使う 結論としては、CSSの filter プロパティ の blur() 関数 を使います。 まず、深く考えずに要素全体に blur() でぼかしをかけてみましょう。 #target { background-image: url('../images/bg.jpg'); filter: blur(3px); } おっと、前面のテキストまで一緒にぼかされてしまいましたね💨 どうやら背面と前面でレイヤーを分ける必要がありそうですね。 レイヤーを分けて背景だけをぼかしてみる :before 擬似要素でぼかす用のレイヤーを追加してみましょう。 #target { position
CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ
CSSのメディアクエリの範囲指定で、比較演算子を使用できるようになります
これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ
CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー
図で理解する Flexbox
Flexboxはレイアウト組む上でとても便利だが、justifyだとかalignだとか名前と意味の対応が曖昧で毎回調べていた。 仕組み・使い方を理解しようと思い、図を使って整理してみた。 ※ CSS Grid についても整理してみました Flexbox Flexboxは縦・横に要素を並べられるレイアウト方法です。 Flexboxを使うことにより、縦・横に並べるだけでなく、並べた要素の中央寄せ・上寄せなど細かな位置も調整できます。 コンテナ・アイテム Flexboxを使う上で必要となる要素が「Flexコンテナ」と「Flexアイテム」です。 Flexコンテナの中にFlexアイテムを複数並べてレイアウトします。 <div class="container"> <div class="item">１</div> <div class="item">２</div> <div class="item"
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
CSS）z-indexのベストプラクティスを考える
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
【無料】CSSで作る流行りのマテリアルデザインのオシャレカードコレクション
このサイトでもマテリアルデザイン風のカードをTOPページで利用していますが、最近フラットデザイン、マテリアルデザインなカードが流行っていますよね。 ブログはもちろん、各所サイトで度々目にします。 そこで今回はそんな人気なマテリアルデザイン風のカードをいくつかご紹介します。 コーディングやデザインの参考にしてみてはどうでしょうか。 マテリアルカード: Pure CSSダイアグラムSee the Pen Material Card: Pure CSS Diagram by Raymond Phair (@Befeepilf) on CodePen. マテリアルカードデザイン#2See the Pen Material Cards Design #2 by Viraj Trivedi (@inf3cti0n95) on CodePen. スキルマテリアルカード(ロールオーバーで動く)See th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでこんな実装ができるとは！ 美しい光がきらり✨とボーダーに沿って回転するボタン -Button Shimmer Tricks
有名サイトで使用されているCSSテクニックまとめ - Qiita
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
Defensive CSS
