CSS

!important :active :any-link :checked :disabled :enabled :focus :hover :indeterminate :is :lang :link :not :read-only :read-write :root :target :visited @charset @counter-style @font-face @import @k @keyframes @media @namespace @page @supports absolute after align-content align-self all anchor anchor-name animation animation-duration animation-name appearance attr azimuth backface-visibility background background-blend-mode background-size before behavior blur border border-collapse border-image border-radius border-spacing bottom box-shadow box-sizing break-after break-before break-inside brightness calc caption-side caret-color clear clip clip-path color color-profile column-count column-width columns content counter-increment counter-reset cue cursor deg direction display ease elevation empty-cells filter first-child first-letter flex flex-direction flex-end flex-flow flex-start flex-wrap float focus font forwards gap grid grid-template-columns grid-template-rows height hover hyphens icon image-orientation image-rendering image-resolution ime-mode import important infinite inline-block inline-flex inset isolation justify-content justify-items justify-self keyframes layout-grid left letter-spacing line-break line-height linear-gradient list-style list-style-image list-style-position list-style-type margin marker-offset marks marquee-style mask max-content max-height max-width media min-height min-width mix-blend-mode nav-down nav-index nav-left nav-right nav-up not nowrap nth-child nth-of-type object-fit object-position opacity order orphans outline outline-offset overflow overflow-wrap overflow-x overflow-y padding page pause pause-after pause-before perspective pitch pitch-range place-self play-during position position-anchor prefers-color-scheme print quotes radial-gradient relative rendering-intent repeating-linear-gradient repeating-radial-gradient resize rgb rgba richness right rotate rotateY rotateZ ruby-align ruby-overhang ruby-position scale screen scroll scrollbar scrollbar-base-color scss shape-image-threshold shape-margin shape-outside size space-around space-between speak speak-header speak-numeral speak-punctuation speech-rate static sticky stress style tab-size table-layout text-align text-autospace text-decoration text-indent text-justify text-orientation text-overflow text-shadow text-transform top touch-callout transform transition translate translateY transparent type user-select vertical-align visibility voice-family voice-rate voice-volume volume vw white-space widows width word-break word-spacing word-wrap wrap writing-mode z-index

• CSS 入れ子（ネスト）の表記の良し悪し
• CSSの入れ子の記述の仕方のサンプルです。 CSSはSass(SCSS)を使わなくても親子の階層で記述することができるようになりました。 その良し悪しについてサンプルをもとに考えてみましょう。 コードを...
• 2024-06-02 07:38:31

• CSS 要素の周りを追跡する指定
• 要素の外側の指定の位置に別の要素を追跡させる位置の指定をするサンプルです。 Chrome125以降での利用が可能なCSSです。 基準となる要素が可変しても、別の要素を指定した場所に固定表示することができるCSSのサンプルです。 以下のベ...
• 2024-05-17 14:06:59

• CSS スタイルの非同期の外部参照
• 重要なCSSと、後から読み込んでもよいCSSを分けて実装するサンプルです。 昨今、表示の速さは検索エンジンが細かく評価するようになりました。 ページを表示する際に必要なスタイルだけ読み込み、重要でないスタイルは後で読み込むよ...
• 2022-11-06 10:07:47

• CSS webフォントの読み込み
• CSSでwebフォントを使うことが増えてきたが、フォントデータを読み込む方法は複数ある。 ウェブフォントの外部参照は通信速度の速い今では、よく利用されています。 HTMLのlinkタグで読み込む場合 [[ <link rel="preconnect" href...
• 2022-08-30 22:45:37

• CSS a番目とb番目の間を選択
• 同じ要素の中で、指定された番目の要素から、指定された番目の要素までだけ、選択するセレクタのサンプルです。 同じデザインの連続した要素の中で、一部分だけスタイルを反映したときがあります。 そんな時のサンプルです。 以下のサンプルは３番目から６番目だけ色を...
• 2022-01-23 20:12:47

• CSS 要素の伸縮加工とアニメーション
• 画像や要素をCSSで伸縮して加工するサンプルです。 伸縮の開始位置やアニメーションへの応用を実装してみました。 通常の画像はこちら CSSで縦に要素を伸ばすとこのようになります。 [[ .de...
• 2021-12-16 16:33:17

• CSS ダークモードをCSSで出し分け
• OSでダークモードの時、CSSで検知し、スタイルを変更するサンプルです。 OSで暗いところ用のダークなモードの切り替えは、だいぶ浸透してきました。 サイト側でも個別でダークモードを用意していたサイトもあるかもしれません。...
• 2021-06-03 00:38:01

• CSS 背景画像をマスクして左右に動かす
• 縦長の四角形の中に横長の画像を入れ、左右にアニメーションさせるサンプルです。 　 横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。 そんな時、サイズは大きなまま画像の全体を表示するために、アニメーショ...
• 2021-05-28 13:55:39

• CSS インプットスライダーの加工
• スライドして入力するインターフェースのデザインやデータの取得するサンプルです。 HTMLのinputタグのtypeをrangeにすると、ブラウザのデフォルトのスライドUIが使えます。 ブラウザに依存するUIなので、そのまま使う方何かと安全ではあります...
• 2021-02-23 17:34:49

• CSS 背景が波打つボタン
• ボタンのエフェクトとして、文字の背景の色のついた部分が上下にアニメーションするサンプルです。 ボタンを押した時、何かがアクティブになる状態を表す一つの方法として、ちょっとしたアニメーションを使いたい時があります。 ボタンの背景にGifアニメを置...
• 2021-02-23 13:43:13