CSSで実装された美しいグラデーションのボーダー、さらにはそれを角丸し、半円を加えたチケットを実装するスタイルシートのテクニックを紹介します。 グラデーションのボーダーは割と簡単に実装できますが、角丸にするのは目から鱗でした。また、簡単なJavaScriptで3Dも再現されています。 Gradient borders with curves and 3d movement in CSS by Medhat Dawoud 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. チケット自体の構築 2. グラデーションのボーダーを実装 3. 左右の半円を実装 4. カーソルの動きに応じたアニメーションを実装 この実装で学んだこと はじめに 2020年10月27日にNext.jsの初のグローバルユーザーカンファレンスが開催され

TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div

/*========= body背景色の変化CSS ===============*/ body { width: 100%; height: 100vh; background:linear-gradient(45deg, #3bade3,#9844b7,#44ea76);/*グラデーションを定義*/ background-size: 200% 200%;/*サイズを大きくひきのばす*/ animation: bggradient 20s ease infinite; } @keyframes bggradient{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

RSCSSの概要 RSCSS（Reasonable System for CSS）は、厳選したルールセットのCSSアーキテクチャです。BEMのコンポーネントを参考にComponents、Elements、Variantsの分類が用意されていますが、BEMのとっつきにくいクラス名のルールは使っていません。 CSSアーキテクチャで個性がでるのがクラス名の定義です。RSCSSはすべてにおいてシンプルを目指しているので、クラス名もかなりシンプルなルールになっています。RSCSSのクラスはマルチクラス前提として、クラス名が長くなるのを避けるためにCSSのネストと子セレクタ（>）の利用を推奨しています。 RSCSSの公式ドキュメントにて、RSCSSはフレームワークではなく、保守性の高いCSSを構築するためのアイディアセットと紹介しているだけあって、規則はミニマムです。規定されていない部分を補う必要があ

TOPCSS CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識 CSSのflexbox(display:flex;)を使った縦並び、横並びレイアウトの基礎知識 公開日：2016.12.29 更新日：2023.01.21 CSS display:flex;を使ったレイアウト方法をまとめました。 上下左右のレイアウトに柔軟に対応できるので、レスポンシブやグリットレイアウトに役立ちます。 より複雑なレイアウトを行いたい場合は、こちらの記事をご覧ください。 display:grid; を使ってCSSのみでタイルレイアウトを実装する

SVGには、要素にフィルター効果を与えるための特別な要素が用意されています。CSSのfilterプロパティよりも豊富なフィルターが再現できるから魅力的なんですよねー。けれど、パッと見ごちゃごちゃしてて分かり難（にく）いし、手順とか手続きがあって、なんだかとっつき難そう…。そんな「SVGのフィルター効果」について、個人的なまとめです:)。 SVGのフィルター効果のための要素 SVGはXMLに基づくマークアップ言語なので、フィルターを適用する方法も、XMLのタグ要素として用意されていて、フィルター効果のための要素は、下記ページの「Filter primitive elements」と「Light source elements」という項目にまとまっています。 SVG 要素リファレンス - SVG: スケーラブルベクターグラフィック | MDN すべてfeという接頭辞（プレフィックス）（filt

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？　webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 画像を中央の位置でトリミングするまずはこの縦長の画像、横長の画像を並べ、縦横 250px の正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSS でこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで

このサイトは、分析、パーソナライゼーション、およびターゲットを絞った広告の目的だけでなく、サイトの重要な機能を有効にするためになどのテクノロジーを利用します。詳細については、次のリンクをご覧ください。ポリシー設定の管理ストレージの設定サイトにアクセスすると、および同様の技術「」を使用して、ユーザーに関するデータが保存または取得される場合があります。は、サイトの基本的な機能やその他の目的に必要になる場合があります。特定の種類のを無効にするオプションもありますが、無効にするとサイトでのエクスペリエンスに影響を与える可能性があります。ポリシー必須サイトの基本的な機能を有効にするために必要です。必須のを無効にすることはできません。クッキーを見るターゲットを絞った広告あなたとあなたの興味により関連性の高い広告を配信するために使用されます。広告の表示回数を制限したり、広告キャンペーンの効果を測定したり

ReactでCSSを書くにはたくさんの方法があると思います。 その中でもNext.jsでそれらを使用するにはどうしたらよいかを一覧で書いてみました。 それぞれのフレームワークの記法にはあまり触れずに、Next.jsをプロダクションレディーにするための設定とGlobalなCSSの書き方に触れます。 CSS not in JS Sass with CSS modules Next.jsのconfigに以下を追加

CSSのコーディングにおいて、コーディングガイドラインが決められていなかったり、プロジェクト内のチームメンバー同士でコーディングスタイルを統一できていなかったりすると、それぞれが独自スタイルでコーディングし始めるので非常に混乱することになります。 さらにレイアウト部分と視覚的なデザインを混ぜてしまうと一貫性がなく複雑なコードになってしまいます。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 #CSSコーディングの課題 これらの課題を解消するための設計手法を紹介していきます。 複数メンバーでCSSコーディングしたら似たようなコードが散乱していた 適当にコードを書いていたら設計が複雑になりファイルが膨れあがった 1箇所修正しただけなのに他のページが表示崩れした ページ数が多い分、作業時間も多くかかった そもそもコーディン