CSSは奥が深い！グラデーションとシャドウをこれまでより美しく実装するテクニック
WebサイトやスマホアプリのUIデザインでよく使用されるグラデーションとシャドウをより美しく実装するスタイルシートのテクニックを紹介します。 このテクニックを使用したプラグインやオンラインツールもリリースされているので、思い通りの美しいグラデーションとシャドウを簡単に利用できます。 Using easing for more than just CSS transitions by Kilian Valkhof 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに アニメーションとトランジションに組み込まれているイージング グラデーションをCSSでより美しく実装するテクニック シャドウをCSSでより美しく実装するテクニック 見栄えのよいWebサイトを制作する はじめに アニメーションの実装にイージング曲線を使用して、より繊細
超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度
海外サイト Speckyboy.com で公開された Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい
治安の良いCSSを目指して 〜 平和な世界のために僕たちができること 〜 - Qiita
はじめに 業務でCSSを書くようになってから、いくつかの月日が流れました。 CSSを学び始めた当初は、要素をキレイに横並びにすることすら手こずっていましたが、最近は随分スムーズにデザイン通りのスタイルを書くことができるようになりました。 今日に至るまで、過去の自分が書いたCSSへの後悔の念で眠れない日々や、原因のよくわからない表示崩れの悪夢にうなされる夜もありました。1 これからCSSを学ぶ人、CSSにはあまり詳しくないけどたまに書くよという人にそんな思いをして欲しくない。できたらCSSのことを好きになって欲しい。 そんな思いで自分がスタイルを書く時・レビューをする時に気をつけていることを（自戒も込めて）まとめまてみました。 🤔 良いスタイルってなんだろう？ スタイルを書く時に大切だと考えていることは3点あります。 開発効率 デザイン再現性 パフォーマンス 開発効率 色々な記事や本でも引
dottedでもdashedでもない！CSSで好きな間隔の点線（破線）を作る方法
点線の作り方 線の幅が「3px」、間隔が「5px」の点線を作ると想定してご説明します。 まずはHTMLを記述します。 <div class="example"></div> 次に、CSSで点線を作っていきます。 以下3つのプロパティを使います。 点線の1セットをつくる 「1セット」とは、赤枠で示した部分のことです。 この1セットを作って、あとは「background-repeat」で繰り返し表示するイメージです。 「background-size」で大きさを設定 background-size: 8px 1px; まずは1セットの枠の大きさを設定します。 線の幅が「3px」で間隔が「5px」⇒「8px」と指定。線の高さが「1px」⇒「1px」と指定。 「background-image」+「linear-gradient」で点線を描く グラデーション（linear-gradient）を使っ
CSSのflexboxでjustify-contentのspace-betweenが効かない理由
justify-content: space-betweenとは CSSのdisplay: flexでjustify-content: space-betweenを使用すれば要素を均等に配置することができる。 floatと違って右端の要素にmargin-right: 0を付ける必要がなく、clearfixも必要もないため最近は多くのサイトで使用されている。 たまに不要な余白があることがある たまに左端か右端(あるいはその両端)に不要な余白が追加されているサイトを見かける。 このようなケースは3つの原因が考えられる。 原因その1 marginが付与されている justify-content: space-betweenが指定されていても要素にmargin-rightなどが指定されている場合は位置がずれるため余白が発生する。 要素にmargin: 0 !importantを追加して余白がなくな
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
CSSの疑似要素:beforeと:afterでUI要素を実装するテクニックのまとめ
CSSの疑似要素は非常に便利です。疑似要素:beforeと:afterを使用したUI要素を実装する便利なテクニックを紹介します。 Webページやスマホアプリで使えるUI要素をはじめ、クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニックです。 Uncommon Use Cases For Pseudo Elements by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 疑似要素で、親子のホバーエフェクト 一覧のリスト 疑似要素で、クリック可能領域のサイズを広くする 疑似要素を使用したオーバーレイ 疑似要素で、シャドウエフェクト :afterと:beforeのどちらを使うべきか ファイル拡張子を元にリンクのスタイル設定 疑似要
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック
CSSで斜めのラインを実装する時は、ちょっとした工夫が必要です。 画像やSVGでなく、CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります。 CSSグラデーションで実装した斜めのラインがギザギザになってしまうのを回避し、すっきりとした滑らかなラインで実装するテクニックを紹介します。 Avoiding jagged edges on gradients. by Mandy Michael 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインがギザギザになってしまうのを回避する方法 よく見かけるデザインの一つに、コンテナの下部に斜めのカラーブロックを配置したものがあります。下記の画像のようなデザインです。 斜めのカラーブロック このデザインがたまたま、わたし
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
CSSで要素の表示・非表示を切り替える方法いろいろ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもしれませんが、私は主に下記のプロパティで切り替えを実現しています。 opacity visibility display では一つひとつ、特徴と用例をみていきましょう。 1. opacityの切り替え See the Pen 191001 by ligdsktschy (@lig-dsktschy) on CodePen. 特徴 非表示のときも、領域が確保される クリック／タップ可 transition可 用例 「要素を、スクロールによって画面内に入ったときに表示させる」など。見えるか見えない
表示するブラウザごとに違う見え方をする「コードで描かれた絵」とは？
「Pure.CSS」はYahoo!が開発したCSSフレームワークであり、ファイルが軽量なことやレスポンシブデザインが可能なことで人気です。そんなPure.CSSを使って描かれた「絵画」は、表示するブラウザごとに異なった見え方をすると話題になっています。 This Amazing Image Made of Code Looks Different Based on Your Browser - VICE https://www.vice.com/en_us/article/a359vz/purecss-amazing-image-made-of-code-looks-different-based-on-your-browser デジタルアーティストのダイアナ・スミス氏は、バロック絵画に触発された作品を描くことで知られています。そんなスミス氏の大きな特徴として挙げられているのが、絵画を描く
CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのみで対応するWebサイトのダークモード ダークテーマでお勧めのテキストと背景のカラー ダークテーマではカラーの彩度は下げる ダークモードについてさらなる情報 CSSのみで対応するWebサイトのダークモード まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。 https://tombro
ダークモードの実装 | きるこの日記帳
Mac OS の Mojave(10.14 以降）には、ダークモード（Dark Mode)が搭載されている。 配色を暗めにして、ユーザーの目の負担を抑えたりする機能のこと。 従来の画面は、ライトモード（Light Mode)として区別される。 多くのネイティブアプリで対応が進んでいて、現在では一部の Web ページも対応している。 メディアクエリの 1 つで、ユーザーの操作などに応じて、CSS のスタイルを切り替えるもの。 ボタンでの実装 一部のページでは、トグル式、またはラジオボタンを用意して手動で切り替える。 また、localstorage に状態を保存するページもある。 How I added Dark Mode to my website 上記ページでは、.dark クラスの付け外しで対応している。 prefers-color-schemeでの実装 prefers-color-sc
ダークモードもサポート！シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap
シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量（2.7Kb）のCSSフレームワークを紹介します。 プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。 Cutestrap Cutestrap -GitHub Cutestrapの特徴 Cutestrapのデモ Cutestrapの特徴 Cutestrapは、シンプルなAPIと堅牢なカスタマイズオプションを備え、最新の技術と未来を見据えた視点でコンテンツ重視のプログレッシブ・エンハンスメントを採用したCSSのフレームワークです。 シンプルで拡張性も備えたフレームワーク ライセンスはGNU GENERAL PUBLIC LICENSEで、個人でも商用のプロジェクトでも無料で利用できます。 ブラウザのサポート 以下のブラウザをサポートしています。
Smoother & sharper shadows with layered box-shadows
Default Smooth As light hits an object and a shadow is cast, the shadow can take on a myriad of unique characteristics. If you try to capture the subtleties of a real shadow with box-shadow then, well, you’re pretty much out of luck. The box-shadow CSS property isn’t exactly built to encourage expressiveness. It essentially produces a blurred silhouette of an object—you can change its offset, blur
div要素の見た目は矩形だけじゃない！UI要素をさまざまな形状のデザインに拡張するスタイルシート -augmented-ui
Webページやアプリに、サイバーパンクにインスパイアされたユーザーインターフェイスを簡単に実装できるCSSを紹介します。 下記の要素はdiv要素が一つだけ。角を斜めにカットしたり、辺に窪みを加えたり、ボーダーを美しくしたり、augmented-uiのCSSで用意されているclassを与えると、サイバーパンクにインスパイアされたさまざまなデザインが実装できます。 augmented-ui augmented-ui -GitHub augmented-uiは、Webページやアプリのdiv要素をはじめとするあらゆるUI要素にサイバーパンク風のスタイルを与えることができます。 ライセンスはBSD 2-Clause Licenseで、個人でも商用でも無料で利用できます。
CSSで円グラフや集中線が描けるconic-gradient入門 - ICS MEDIA
CSSのグラデーションconic-gradient()関数は、conic（円錐）の名のとおり、円錐状にグラデーションを描画するものです。conic-gradient()関数を使用すると、円錐状のグラデーションはもちろん、集中線や市松模様といった表現が手軽に実装できます。 ▼ conic-gradient()関数で実装したグラデーション例 ▼ conic-gradient()関数で実装した演出例 サンプルを別ウインドウで開く 本記事ではconic-gradient()関数の基本的な使い方を解説しつつ、応用的な表現やクロスブラウザ対応の方法を紹介します。 conic-gradient()関数の基礎 linear-gradient()関数・radial-gradient()関数との比較 CSSでグラデーションを実現する手段は次の3種類があります。 linear-gradient()関数： 直線状
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS STRIPE GENERATOR
https://spyweb.media/2017/10/18/css-nth-child-awesome-technique/