CSS Loaders: A collection of more than 500 loading animations CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」 3Dやフラットなものなど、実にたくさんのローディングアニメーションがあってみるだけでも楽しい。
1. はじめに Ruby on Railsでコントローラーとか作ったら出てくるコントローラー名.scssってなんだってなりますよね。 application.cssとの違いってなんだろって思ったと思います。 そんなみんなの助けになればな!っと思ってこの記事を書きます。 2. CSSとSCSSの違い CSSもSCSSのどちらもデザインをするために使う言語です。 この2つ(CSSとSCSS)の違いってわかりますか? 名前が違うくらいだろって思いますよね。 自分も最初はそのくらいだろって思ってましたが、実は結構違います。 備考 セレクターはタグ、class名、id名のことを指します。 プロパティはbackground-color、text-alignなどのを指します。 値は #000000 や 100% などのプロパティを数値のことを指します。 プロパティや値が他に何があるのかを詳しく知りたい人
イラストを描くときや写真のシャドウではハイライトが非常に重要ですが、CSSのシャドウでこの発想は抜けていました。 テキストにCSSでシャドウを設定するときに、上部に1,2pxのハイライトを加えると、よりリアルで美しいシャドウになる実装テクニックを紹介します。 まずは、デモで実際のシャドウをご覧ください。 上部に2pxのハイライトを設定しています。 See the Pen highlight compliment to a text-shadow effect by coliss (@coliss) on CodePen. シャドウとハイライトのCSSは、下記の通りです。 カラーがoklch()で設定されていますが、hex値でも大丈夫です。ポイントは通常のシャドウと一緒にハイライト用のtext-shadowを上部に設定することです。 .highlighted-text-shadow { :r
2023年9月7日 CSS CSS小技集シリーズの第5弾!「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています!初心者さんからベテランさんまで要チェック! ↑私が10年以上利用している会計ソフト! 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください! 1. ネストで親子セレクタ
CSSの進化は速く、ここ1,2年はさらに速くなりましたね。その要因の一つがIEのサポート終了で、現在はエバーグリーンのブラウザ(自動で最新版にアップデートするブラウザ)となり、モダンCSSの機能がたくさん使用できるようになりました。 2023年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2023」を紹介します。今年は例年より早いですね。 State of CSS 2023 State of CSS 2023は、State of CSSでおこなわれたアンケートの調査結果(9,190人分)をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は25-44才が多く、性別は男性が多めです。
複数のボタンを横並びにしつつ、それぞれのボタンが同じ幅になるように合わせたいということがある。ボタンに同じwidthを指定すれば合わせられるが、するとラベルの長さに応じた幅にできなくなる。 縦方向に並んだボタンであれば、いずれか幅の広い方に合わせることは難しくない。次のようにすれば、最も幅の広いボタンに合わせて他のボタンも配置することができる。 <div class="wrapper"> <button type="button">Hi</button> <button type="button">Hello</button> <button type="button">Lorem ipsum dolor</button> </div> .wrapper { display: flex; flex-direction: column; gap: 1em; width: fit-conten
普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまうこともあります。 この記事ではフォントウェイトのまつわる落とし穴と、それを回避するための方法を紹介します。エンジニアだけでなく、デザイナーの方にも役立つ内容です。 Noto Sans JPを例にフォントのウェイトの設定を変えながら見え方を確認できるデモページを用意しました。ぜひ試してみてください。 サンプルを別ウインドウで開く コードを確認する アンチエイリアス まず、アンチエイリアスについて簡単に説明します。アンチエイリアスとは、画面上で表示される輪郭を色の濃淡などを用いて滑らかにする処理
今年もCSSの進化が止まりません! 先日紹介した表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリガーにしたアニメーションなど、新機能が登場しました。 今まではJavaScriptや複雑なCSSを使用しないと実装できなかった、スムーズなアニメーションを実現するCSSの4つの新しい機能を紹介します。 Four new CSS features for smooth entry and exit animations by Una Kravets, Joey Arhar 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに displayをキーフレームでアニメーションさせる 個別プロパティのトランジションを可能にする 最上位レイヤーとの間で要素をア
ことの発端 先日、息子からの夏休みの宿題として個人でアイロンビーズエディタ(IBE)というのを開発しました。 今回はその時に実装しようとした選択範囲のUI/UX(↓こんなの)を再現する話です。 実物を触って見てもらった方が良いと思いますので、こちらに用意しています。 開発秘話的なものはnoteに記載しているので省略しますが、一言で言えばペイントツールにありがちな「選択範囲」と「コピペ」を実装しようと思ったからです。 エクセルやAdobeのphotoshop的なUI/UXにしたい。 言うまでもありませんが、後発のツールのUI/UXは他のツールからの影響を多大に受けます。 簡単なもので言うと、多くのアプリケーションがCtrl(Command)+ZでUndoを実装していたり、Ctrl+Cでコピーできるのは当たり前の世界になっています。 そのスタンダードなUI/UXの1つに「選択範囲」を示すものが
「メニューの上にカーソルを乗せるとサブメニューが表示される」というよくある動き。 CSSのみ・CSSとjQueryを組み合わせる・jQueryのみなどなど、色々な方法があると思いますが、みなさんはどのように実装していますか? 対応ブラウザやレスポンシブの有無などによっても変わってくると思いますが、先日、自分がよく使う方法とは違ったCSSのみでの実装方法を目にしたのでまとめてみました。 【この記事を書いた人】 Adobe使用歴20年以上、Webデザイナー歴15年以上、フリーランス歴10年以上のApple/運動好きな2児の母。Apple/クリエイティブ/運動/ライフスタイル関係の情報を発信中。プロフィール詳細 サンプル 以下のような動きを想定したHTMLとCSSを作成します。 CSSによるhoverのデモはこちら 共通HTML <header class="sample01"> <ul> <l
はじめに 先日、Chrome 117がベータ版としてリリースされ、新たな6つのCSS機能が追加されました。 追加された6つの機能は以下の通りです。 アットルール @starting-style CSSトランジションの開始時のスタイルを指定するための新しいアットルールです。 transition-behavior プロパティ CSSトランジションの動作を制御するためのプロパティーです。 overlay プロパティ 最上位レイヤーでCSSトランジションが行われるようにするプロパティです。 CSS grid の subgrid プロパティ CSSグリッドのサブグリッドを制御するためのプロパティーです。 text-wrap プロパティの値 pretty テキスト折り返すためのプロパティにperttyが追加されました。 contain-intrinsic-size プロパティの値 auto と no
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか? 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
単位の定義 px(絶対値) ピクセル(px)は、デバイスの1画素を表す絶対値の単位です。画面上で固定サイズを指定する際に使用されます。大きさを表す単位ではないので、 1px = ○ミリとは決まっていません。 %(相対値) パーセンテージ(%)は、親要素の特定のプロパティに基づいて相対的なサイズを指定する相対値の単位です。プロパティによって基準が異なる点に注意が必要です。 em(相対値) emは、要素自体のフォントサイズに対する倍率を示す相対値の単位です。例えば、フォントサイズが16pxの要素で1emを使用すると、16pxと同じサイズになります。 rem(相対値) remは、ルート要素(通常はHTML要素)のフォントサイズに対する倍率を示す相対値の単位です。他の要素のフォントサイズに影響を受けないので、グローバルなサイズ指定に便利です。 vw(相対値) vwは、ビューポートの幅の割合を示す相
みなさん、こんにちは。 プログラミングの勉強中に気づいたことや気になったことなどを備忘録的に記事にしていこうと思います。 今回はHTMLのlabelタグとinputタグ、そしてid属性とfor属性についてです。 ラジオボタンとテキストを関連付けたい 様々なサイトのお問い合わせフォーム等でラジオボタンを見かけたことがあるかと思います。 例えばこのようなものですね。 コードは下記のようになります。 <p>ペットとして飼いたい動物は?</p> <input type="radio" name="pet">犬 <input type="radio" name="pet">猫 <input type="radio" name="pet">うさぎ ただし、この時点ではテキスト部分をクリックしてもラジオボタンは反応しません。 しかし、ユーザビリティを考えた場合、ラジオボタンとテキストどちらをクリックして
はじめに こんにちは! 株式会社BFT名古屋支店・インフラ女子(?)のやまぐちです。 最近少しずつBootstrapを勉強し始めています。 対応したことを忘れないために短めの小ネタを投稿していきます! ヘッダーとフッターについて、以下の公式ページを参考にしました。 getbootstrap.jp ヘッダー・フッターを固定しよう DjangoとBootstrapで簡単なウェブサイトを作ってみたはいいものの、なんか洗練されていない印象…うん?そうか、ヘッダーとフッターが固定されていないのか! つまり、画面をスクロールするとヘッダーが見えなくなって、画面の一番下まで行くとフッターが見えてくる状態です。つまりこんな感じ! 固定するにはそれぞれクラスを指定するだけ! 今回作成しているウェブサイトでは各ページ共通のheader, footerなどは「base.html」に記載しています。以下の図だとの
はじめに Microsoftの提供するVisual Studio Code(VSCode)は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
はじめに Safariで、css filter(blur)をかけるとなぜか表示されなかったので対処法を書きます。 理由としては要素にハードウェアアクセラレーションが効いていないことが原因で、 要素にGPUレイヤーを作成すれば大丈夫なので、GPUレイヤーを作成するようSafariに促します。 対策1. will-changeプロパティを使う will-changeプロパティを設定することでGPUレイヤーを作成する事ができます。 .lp_hero__main::before, .lp_hero__main::after { filter: blur(100px); will-change: filter; } 実装後(after)の画像ではちゃんと薄い青色のブラーが適用されているのが確認できます。 なぜ、will-change・transformを設定することで解決できたのか。 「はじめに」で
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く