[B! CSS] koda3のブックマーク

CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります

朗報です！！！今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。このCSSの新機能により、UI要素にさまざまなアニメーションを簡単に実装できるようになります。 Google ChromeのデベロッパーUna氏（@Una）によると、transitionプロパティでdisplayが使用できるようになり、要素の表示・非表示、ポップオーバーなどのアニメーションが簡単なCSSで実装できるようになるとのことです。 👀 An early look at transitioning to and from display: none in

koda3 2023/05/02

リンク

Styled-Componentsとpropsを使ったスタイリングの備忘録 - Qiita

const ButtonStyle = styled(Button)<{hogeProps:boolean}>` color: ${props => props.hogeProps ? 'trueの時の処理' : 'falseの時の処理'}; `; この例ではhogePropsという名前のpropsをButtonStyleコンポーネントに渡している。 Styled-Component内で、三項演算子を使ってhogePropsがtrueの場合とfalseの場合で異なるスタイルを適用している。ついでに位置を動的に設定するModalContentStyleコンポーネントを作成する方法もば。位置を動的に設定するModalContentStyleコンポーネントの作成

koda3 2023/04/21

リンク

[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用） | DevelopersIO

[初心者向け] Next.js で初めての OpenAI API アプリを作ってみた（Tailwind CSS、Docker 利用）こんにちは、アノテーションテクニカルサポートの Shimizu です。昨今の OpenAI ブームに乗り、私も何かを始めてみたくなりました。そこで、ちょうど勉強中だったフロントエンド開発環境（Next.js + Tailwind CSS + Docker）と OpenAI API を利用して、AI が質問に答えてくれるだけのシンプルな入門アプリを、実作業 30 分ほどで作ってみました。完成品イメージここでは筆者の備忘も兼ねて、一連の手順を記事にしてみました。以下のような方の参考になれば幸いです。 OpenAI API で最小限の動くアプリを作り、仕組みを理解したい Next.js(React)や Tailwind CSS などフロントエンドの流行

koda3 2023/03/22

リンク

UAスタイルシートとリセットCSSとは - 2023 - kojika17

以前に劇薬の The New CSS Reset という記事を書き、その中で「UAスタイルシートを理解していれば、どんなCSSリセットも使える」と言いました。ただ改めてUAスタイルシートの事を検索にかけても「ブラウザのデフォルトのスタイルシートです」で終わる記事が多く、これでUAスタイルシートを理解しろというのは無理な話です。そこで後進のために、UAスタイルシートとは何なのか？ UAスタイルシートとリセットCSSの付き合い方を文章として残しておきます。 UAスタイルシートとは？ UAスタイルシートとは、User Agent Style Sheet の略で、webブラウザがデフォルトで持っているスタイルシートのことです。これは、HTML要素をどのように表示するか、振る舞いを持たせるかを定義したものです。スタイルシートの種類と階層スタイルシートといっても、いくつかあります。多くのド

koda3 2023/02/27

リンク

Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応

Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul

koda3 2023/02/22

リンク

[CSS]三角形で繋がったパンくずのナビゲーションを実装するスタイルシートのテクニックまとめ

サイトのパンくずやフォームのステップでよく見かける、ブロックに三角形の山形を隣接させたリンクの列をCSSで実装するテクニックを紹介します。 CSSでの実装方法はいろいろあり、またCSSでシャドウやグラデーションを適用したバリエーションの実装方法も解説します。 Oh, the Many Ways to Make Triangular Breadcrumb Ribbons! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。三角形を使ったパンくずのナビゲーション HTMLの構造 CSS: ベースのスタイル CSS: 三角形の実装方法オプションのバリエーション他に検討すべき点三角形を使ったパンくずのナビゲーション階層を表示したパンくずのナビゲーションで見かける、各ブロックに三角形の山形を持つ隣接するリンクの列を作成する方法を見て

koda3 2019/05/09

css

リンク

[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート

最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。実装は非常に簡単で、応用も利くので、ぜひお試しください。 Stunning hover effects with CSS variables by Tobias Reich 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。インスパイアされた美しいグラデーショングラデーションが変化するエフェクトの実装方法実装したデモこのエフェクトの可能性よくある質問と答えインスパイアされた美しいグラデーション Groverにある遊び心溢れる美

koda3 2019/03/07

design
css

リンク

たった一行で重いスクロールが軽快に！will-change属性を付けるとFPSが上がる理由 - Qiita

HTMLやCSSのパフォーマンスチューニングを皆さん普段意識されているでしょうか？フロントエンドはJavaScriptの進化と共にアプリケーションが年々複雑化してきたこともあり、パフォーマンスチューニングのトピックを目にする機会が増えました。しかしHTMLやCSSも同様にレンダリングの仕組みを少し知り、それに応じた実装することでパフォーマンスを大きく上げることも可能です。今回は最もシンプルかつ分かりやすい事例として、will-changeプロパティについて紹介したいと思います。サンプルを使ってFPSを実際に測定してみる今回はサンプルとして、TwitterのツイートにあたるHTML構造と同じものを4000個縦に並べ、高さ400pxでスクロールできる領域を用意し、スクロール時のFPS(Frame Per Second)を測定してみました。 // この実装は実質たった3行！ const

koda3 2019/01/22

css

リンク

CSS-in-JSのライブラリとして「emotion」を選択している理由 - Qiita

どうも、sakitoです。本業や副業でもReactを使っているのですが、CSS-in-JSを実現するためのライブラリとして、emotionを採用しています。今回はemotionの紹介も交えながら、採用している理由を投稿します。 emotionとは？ emotion - Introductionでも記載があるとおり、glam、glamor、styled-components、glamorousに触発された後発ライブラリです。たとえばglamorousはpaypalが開発をしていたcss-in-jsのライブラリなのですが途中でメンテナンスが停止しました。その理由については、glamorousのGitHubにこのような記載があります。 For details on the unmaintained status (and to help people with an automated

koda3 2018/11/05

css

リンク

[CSS]これは知らなかった！セレクタを使った条件分岐のテクニック | コリス

古いブラウザ用のスタイルシートとモダンブラウザ用のスタイルシートは、どのように分けて記述していますか？ CSSのセレクタだけを使用して、古いブラウザ用とモダンブラウザ用にスタイルシートを条件分岐させるテクニックを紹介します。 Using Feature Detection, Conditionals, and Groups with Selectors 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい機能を使用する時新しい機能の検出が必要な時条件セレクタのサポート @supportsに対応するセレクタセレクタの基本的なプロパティのグループセレクタによる条件分岐の効果的な使い方このテクニックを使用するポイントと注意点 CSSの新しい機能を使用する時 CSSは、新しい機能をスムーズに追加できるよう設計されてい

koda3 2018/11/02

css
web

リンク

CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld

CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略

koda3 2018/08/15

css

リンク

[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック

例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。まずはおさらい、CSSのボックスモデル「display: contents;」を使用すると、どうなるか「display: contents;」について詳しく解説「display:

koda3 2018/04/05

CSS

リンク

上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA

CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-it ems: center; } デモを別ウインドウで再生するソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ

koda3 2018/03/28

flexbox
CSS

リンク

[CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

子要素を親要素の左右の中央寄せに配置するのは、簡単です。インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置「position

koda3 2018/03/03

CSS

リンク

[CSS]便利なのが登場！normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize

ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートを紹介します。「box-sizing: border-box;」の採用など、今の実装方法に最適化されています。 modern-normalize -GitHub modern-normalizeの特徴 modern-normalizeの使い方 modern-normalizeの中身 modern-normalize.min.css modern-normalizeの特徴 modern-normalizeは、ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「normalize.css」をモダンブラウザ用に最適化したスタイルシートです。 normalize.cssとの相違点軽量で、コンパクト。最新のモダンブラウザをサポート。「box-sizing

koda3 2018/02/13

リンク

Webサイトを使いやすく！UIデザインのCSS小技テクニック21個まとめ（実例サンプルコード付）

素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな

koda3 2018/01/23

リンク

CSSセレクタ20個のおさらい

CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

koda3 2017/12/26

CSS

リンク

CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ

2017年も、CSSの進化がすごかったですね。 CSSを使ったアニメーションはより繊細に、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。イラスト: Girls Design Materials 2017年によく目にしたもの一つが、グラデーションです。一昔前は同一色相のグラデーションが多かったですが、最近では複数の色相をし、グラデーション自体も大胆に使用するのが増えています。

koda3 2017/12/15

CSS
design

リンク

CSS Gridを使ってみたい人にぴったり！さまざまなレイアウトをシンプルなHTMLで実装できる -iota

CSS Gridを使ったレスポンシブ対応のレイアウトを簡単に実装できる超軽量フレームワークを紹介します。シンプルなレイアウトから、複雑なレイアウトまで、ブレイクポイントごとにレイアウトを定義することができます。ブレイクポイントはもちろん、カスタマイズできます。 iota iota -GitHub iotaの特徴 iotaの使い方 iotaのデモ iotaの特徴必要なclassは一つだけこのフレームワークで使用するclassは一つだけです。CSS Gridを使ったさまざまなレイアウトを実装するために、いくつかの修飾子が用意されています。 584 bytes このフレームワークは超軽量のスタイルシートです。使用しないものを取り除くと、更にファイルサイズは減少します。無限の柔軟性スタイルシートのコードはCSS Gridとそのすべての機能をカスタムプロパティで結合することによってもたらさ

koda3 2017/12/12

ｐ

grid
CSS

リンク

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ

CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこなせばいいだろうという方は、下記ページが参考になると思います。 Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridで実装するヘッダ・フッタ・3カラム（聖杯レイアウト） CSS Gridで実装するヘッダ・フッタ・2カラ

koda3 2017/11/27

リンク

はてなブックマーク

タグ

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

CSSに関するkoda3のブックマーク (147)

お知らせ

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

月間はてなブックマーク数ランキング（2024年7月）

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

公式Twitter

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

はてなブックマーク

公式Twitter

はてなのサービス