#朝までマークアップ
「最終アンケート」はイベント全体に関してアンケートです。 アンケートのURLはDoorkeeperにログインし、日付の下に記載されているURLからリンクしているNotionに掲載しています。 YouTubeチャットにてURLはお知らせしません。 各時間にメールはお送りしません。 お問い合わせ 問い合わせはDoorkeeperのフォームからお送りください。 https://dtptransit.doorkeeper.jp/contact/new グッズ モンブランさんによるデザインの #朝までマークアップ のロゴ入りグッズ（22アイテム）をSUZURIで販売しています。 タイムテーブル 1時間ごと3組を「グループ」とし、AからHのグループに分けています。 PNG PDF PNG PDF PNG（1ページ目、2ページ目） PDF 書籍プレゼント 出演者や出版から書籍の提供をいただきました。 終
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
Tailwind CSS の一歩進んだ書き方
-## CSS カスタムプロパティ +## CSS カスタムプロパティの宣言 +## CSS カスタムプロパティの利用 + +```html:html +<h1 class="px-[--gutter]"> + Hello world! +</h1> +``` + +`px-[var(--gutter)]` のように記述することもできますが、`var()` は省略可能です。 -<h1 class="text-[length:var(--title-size)] text-[color:var(--title-color)]"> +<h1 class="text-[length:--title-size] text-[color:--title-color]"> +## フォントサイズと一緒に行の高さを指定するショートハンド + +```html:html +<h1 class="text-
【CSS】まだホバー時のスタイルを :hover だけで指定してるの？
はじめに結論から ホバースタイルは、 :hover だけで指定するのではなく、次のように指定しましょう！ @media (hover: hover) { /* リンクの場合 */ a:any-link:hover { } /* ボタンの場合 */ button:enabled:hover { } /* 特定できない場合 */ .button:where(:any-link, :enabled, summary):hover { } } ポイント 1 マウスのときだけホバースタイルを当てる :hover 擬似クラスで指定したスタイルは、タッチデバイスの場合フォーカス状態で適用されてしまいます。 つまり、タッチしたあとのスタイルがずっとホバースタイルのままになってしまいます。 これは意図と合わないため、マウスで操作しているかどうかを区別してスタイルを当てる必要があります。 マウス（正確には、ホ
CSS）z-indexのベストプラクティスを考える
CSSのz-indexプロパティについてツイートしたところ、色んな人から参考意見をいただきました。 要素の重ね順の制御をその場しのぎで乗り切っているWebサイト、実はけっこう多いような気がします。今回はz-indexのベストプラクティスを自分なりに探ってみたいと思います。 z-indexに詳しいゼットインデクサーのみなさま、意見やアドバイスがあれば是非コメントを残していってください。 z-indexについて考えるときの前提 まず、ざっくりと考え方をまとめておきます。ウェブページの要素の重ね順を理解するには「スタッキングコンテキスト（重ね合わせコンテキスト）」を知っておく必要があります。 詳しくはz-indexとスタッキングコンテキストの関係 - ics.mediaがとても分かりやすいのですが、ここではざっくりとした説明だけ載せておきます。 z-indexは数字が大きい方が上にいくとは限らな
Figmaのヒラギノ系のfont-weightが狂っている!? - Qiita
対象読者 Figmaを使うデザイナー Figmaを見ながらスタイルのコーディングをするエンジニア なぜこの記事を書いたのか 弊社ではデザインシステムを構築しています。 テキストもコンポーネント化しているのですが、ある日エンジニアから上がってきたPull Requestを見ると font-weight: 700; となっていたのです。 デザイナーとしては、太文字は font-wight: 600; になる用にコンポーネントを作っていたので、なぜ700と指定されてしまったのか不思議でした。 原因を調査した結果、他でも嵌る可能性があるかもしれないと思ったので、今回記事に残そうと思いました。 すべての答えはFigmaにある 弊社で使っているFigmaの文字設定は下記のようにしています font-familly Figmaでのfont-weight ブラウザでのfont-weightとして出力したい
iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫 | Spinners Inc.
これを回避するために、iOSの実装側でHiragino Sansを使うという方法もありますが、その場合にも注意が必要です。Hiragino Sansを使った場合にAutoLayoutでのテキストオブジェクトの高さが、グリフを表示するための見た目の高さより小さく計算されてしまい、アルファベットのyやgなどの下に飛び出しているグリフが切れて表示されてしまうことがあります。 これはおそらくiOSに組み込まれているHiragino Sansのフォント側の問題だと思われますが、かなり前からこの問題は報告されており、修正されることはあまり期待できないでしょう。 日本語文字サイズ問題をFigma Pluginで対応する今回の問題はiOSのシステムフォントが日本語グリフの表示の場合に、特殊な文字調整を入れていることから発生しているというのが上の説明です。 つまりFigma上でシステムフォントと同じ状況が再
Tailwind CSSで親要素や兄弟要素の状態変化を簡単にスタイリングする
こんにちは、 Gaji-Labo 横田です。Tailwind CSS には親要素や兄弟要素の状態をスタイリングしたり制御できるクラスが用意されています。今回はこのクラスを簡単に紹介します。 親要素を制御できる group クラス親要素に group クラスのマークを付け、子要素に group-* 接頭辞クラスを使用することで親の状態に基づいたスタイリングが可能になります。 以下は公式ドキュメントから引用したコード例です。 <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"> <div class="flex items-center spa
Tailwind CSS のテンプレート & UI キット集【まとめ】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。 Tailwind CSS テンプレート＆ UI キットサイト Tailwind UI（有料） https://tailwindui.com/ すべてのテンプレートを使用するにはライセンス購入が必要 シンプルなデザインはとても汎用的 React や Vue を使用したテンプレートも有 Headless UI https://headles
CSS値の「initial」「inherit」「unset」「revert」の違い - Qiita
一言で言うとプロパティの初期化になるのですが、 それぞれが異なる動きをします。 自分のまとめも兼ねて投稿します。 #これは何？ CSSの値のキーワード プロパティに対して、初期値・継承値をセットします。 この為、プロパティをリセットしたい時に使用できます。 ##使いたい場面 ABテスト等で特定のstyleを消したい時。 CSSフレームワークを使用する際に、特定のstyleを消したい時。 急ぎ（障害対応等）でstyleを設定したい、かつ複数のセレクタが入り混じって何だか分からない時に、一旦styleを消してしまいたい時。 基本的には「初期値・継承値をセット」なのですが、それぞれ異なる働きをするので、注意が必要です。 #各プロパティ ##initial そのstyleのプロパティの初期値又は規定値を設定する。初期値に戻したい時に使用できる。 ここでの初期値は、ブラウザーのスタイルシートで指定さ
2023年モダンCSSの最新トレンド
Demo https://codepen.io/tonkotsuboy/pen/JjmYWmw レスポンシブ対応で、 画像の縦横比を変えたい aspect-ratio いろんなアスペクト比で画像を表示したい アスペクト比とは 従来: padding ハック .box::before { content: ""; display: block; padding-top: calc(100% * 9 / 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 現在: aspect-ratio プロパティ .item { aspect-ratio: 16 / 9; } @media (width <= 500px) { .item { aspect-rati
原理から考えるCSSアニメーションのパフォーマンス改善
ブラウザに描画されるWebページをデジタルイラストに例えて、レンダリングの仕組みからCSSアニメーションのパフォーマンスを考える視点を解説します。 また、近い将来、GPUアクセラレーションをはじめとするパフォーマンス事情がどう変わっていくのかについても触れ、新たに主流になるかもしれないアニメーション実装手法をご紹介します。 本記事は、TechFeed Experts Night#14 〜 絶対役立つ！最先端のCSS総ざらいのセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 今回はブラウザのレンダリングの大まかな仕組みから、CSSアニメーションのパフォーマンスを予測できるようになるというお話をしたいと思います。実際にChromeで計測した数値をまじ
【iOS16】iOSにおけるモーダルウィンドウの背景固定（スクロール抑止）＆下までスクロールできない問題の解決方法
注意 本記事は2023年当初の情報でした。2024年9月時点で、最新の課題について丁寧にまとめていただいている記事がありましたので、紹介させてください。 はじめに 今回は、モーダルウィンドウが開かれた時に背景を固定（背面コンテンツのスクロールを抑止）する方法を改めて紹介したいと思います。 以前まで、PCやAndroidでは比較的簡単に実現させることができましたが、iPhoneもしくはiPad（iOS or iPadOS）では別の方法で実装しなければ、実現できませんでした。 しかし、それはもう過去の話。今ではもう、簡単に実現できます🙆♂️ ※ただし考慮すべき点はあるので、最後まで読み進めていただければ幸いです。 iOSにおけるモーダルの背景固定が楽になっている!? PCやAndroidでは容易に実現できるものの、つい数年前までiOS端末では同じ方法で実現できない背景がありました。 しかし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PDFLOCSSとは｜明日から使えるCSS設計【PDFLOCSS】
iOS 日本語システムフォント サイズ計算 | Figma
Are there any style options for the HTML5 Date picker?
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
今すぐTailwindでの開発を楽にするお手軽2ステップ
CSSでよく混同する「initial／inherit／unset」の違いについて | TOBI Designer's Blog
https://twitter.com/clockmaker/status/1642898046039236609