[B! css] hdampty7のブックマーク

全ブラウザ対応したcontainer queryは何がスゴイのか？

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night

hdampty7 2023/03/02

css

リンク

最近のWeb制作に役立つ、CSSの便利ツール総まとめ

最近のWeb制作に役立つ、CSSの便利ツールをまとめました。 CSS Grid, Flexboxで実装するときに役立つレイアウトのツール、CSSやSVGでさまざまな背景・区切り線を生成するツール、美しいシャドウやグラデーションを生成するツール、色選びや配色に役立つツール、コピペで利用できるボタン、可変のフォントサイズ、CSSアニメーション、コードの管理・品質・デバッグに役立つツールなど、もりだくさんです。 CSS Layout Generator Webサイトでよく使用される﹁ヘッダ・メイン・フッタ﹂﹁ヘッダ・サイドバー・メイン・フッタ﹂﹁カード型﹂﹁サイドバー﹂などのレイアウトを確認しながら、CSSのコードを生成できる無料オンラインツール。以前紹介したときは、CSS Gridのみでしたが、Flexboxにも対応しました。

hdampty7 2023/01/20

css

リンク

便利なのが登場！最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi

hdampty7 2023/01/18

css

リンク

2022年に見かけたモダンなCSSの書き方を振り返る

はじめに 2022年6月15日にInternet Explorerのサポートが終了しました。 (IEの完全無効化は2023年2月14日予定) そのこともあり2022年は今までとは異なるCSSプロパティを使用したモダンな実装例の記事や発信をよく見かけた気がします。ただしこれらは従来の実装方法でもできる表現であったので、「この記事はあとでしっかり読もう」とブラウザの新規タブで開いてそのまま塩漬けにしたり、ブックマーク的に"いいね"した該当ツイートを読み返すことなく流していたので、ここで一度サルベージしてその他追加したものを備忘録としてまとめました。要素の中央配置

hdampty7 2023/01/13

css

リンク

【中央揃え編】CSS限界オタクと学ぶレイアウトCSSサンプル集 - Qiita

こんにちは。フロントエンド開発で一番好きなのはCSS、Mhousetreeです。普段はCSSアニメーションで遊んだりしています。︵頑張って作ったのでよかったら見てね！！！！！︶何かと使う中央揃え。なんとなく覚えているものを順番に試して中央に来たらOK！と思っていませんか？現在ではかなりいろんな種類の方法があり、それぞれ異なる特徴を持っています。この記事ではCSSでよく使う︵気がする︶レイアウトパターンの中で、センタリングに関するものをまとめました！まえがきこの記事では各実例を独自の指標で評価して示しています。長い記事になる予定なので、部分的に読まれる場合の参考になさってください。実用性‥記述量や例外︵中身の文章が長い・改行がある要素など︶への対応力など。よく見る度‥コーディングしていて出てくる頻度(n=1)。お前しか勝たん度‥独自性が強い・他の方法では代替しづらいもの

hdampty7 2022/10/15

css

リンク

レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法

世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

hdampty7 2022/08/19

clamp

リンク

この発想はすごい！モダンCSSで実装する、ボーダーをアニメーションさせるテクニック

モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。はじめに CSSにおけるボーダーの設定ボックスモデルの保持ボーナスコンテンツ: border-image 終わりにはじめにボーダーをアニメーションさせるCSSのテクニックを紹介します。ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説

hdampty7 2022/08/09

何に使うか思いつかんけど、ブクマしとこ

css

リンク

【CSS】「なんかドロップシャドウがダサくなるんだけど」を解決する。 - Qiita

概要みなさんは、このドロップシャドウを見てどう思いますか？ドロップシャドウの色が濃かったり、ドロップシャドウの向きが変な方向だったり、あまり綺麗なドロップシャドウとは感じないですよね？この記事では、これが発生する原因と綺麗なドロップシャドウの使い方を解説していきます。この記事を読んで理解すれば、これからドロップシャドウに悩むことはなくなるでしょう！ドロップシャドウが綺麗にならない原因 1. デザインを3次元として捉える UIやグラフィックデザインは、複数の平面が重なりながら、組み合わさって作られています。例えばUIだと、ベースとなる平面に、カードの平面が重なっていたり、カード平面の上に画像やボタンといったオブジェクトが置かれています。このように、UIやグラフィックデザインは2次元で作られているのではなく、各平面・オブジェクトがZ軸上に重なることで作られています。

hdampty7 2022/07/15

リンク

CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数で定義する便利ツール -Min-Max Calculator

Webサイトをレスポンシブ対応にする時、メディアクエリを使用するのも一つの方法ですが、CSSのclamp()関数を使用すると、最小値と最大値を定義してその間の値は流動的にすることができます。たとえば、小さいスクリーンでは最小値の16px、スクリーンが大きくなるにつれ、最大値の24pxになるまで少しずつ大きくなる、という感じです。このclamp()関数を使用して、CSSでレスポンシブ対応のフォントサイズやレイアウトを簡単に定義できるツールを紹介します。ツールはオンラインでも、ローカルでも利用できます。 Min-Max Calculator Min-Max Calculator -GitHub Min-Max Calculatorの特徴 Min-Max Calculatorの使い方 Min-Max Calculatorの特徴 Min-Max Calculatorは、レスポンシブ対応にする時

hdampty7 2022/05/31

リンク

はてなブックマーク

タグ

関連タグで絞り込む (3)

cssに関するhdampty7のブックマーク (9)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス