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のhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。...
• 2021-01-01 23:05:09

• CSS アニメーション付きモーダル作成
• CSSだけでアニメーションのエフェクト付きのモーダルウィンドウを作成するサンプルです。 JavaScriptが苦手、あるいは使えない状況でも、モーダルの表現が可能です。 探すと素っ気ないモーダルはあるのですが、アニメーションの演出が付いているもの...
• 2020-06-23 23:59:09

• CSS 幅固定レイアウト
• gridを使って横幅を固定した要素と、残りを可変で埋めるレイアウトのサンプルです。 例えば、画像とテキストを横に並べたい時にfloatやflexを使うことがありますが、gridでも簡単に表現できます。 floatやflexを使うと結構悩むのが次のようなレ...
• 2020-03-16 23:26:20

• CSS tableを使わないgridの表
• display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。...
• 2020-03-11 23:27:24

• CSS デバイスの高さまで縦を広げる
• CSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。 100vhを指定するとデバイスの縦幅いっぱいの高さとなります。 以下の親要素（破線の部分）の高さは300pxを指定しています。 height:100%; height...
• 2019-12-01 16:00:37

• CSS デバイスの横のサイズを扱う
• CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位...
• 2019-11-16 12:53:42

• CSS 画像をフィルターするアニメーション
• 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ...
• 2019-11-15 17:47:52

• CSS 文字の縦書き
• 文字を縦書きにするスタイルの活用事例です。 CSSでは縦書きができるようになっています。 原稿用紙や雑誌のような縦書きレイアウトも簡単に作ることができます。 行の向きも右から左 一...
• 2019-11-08 15:52:32

• SCSS スタイルをまとめて一つにする
• SCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。 ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。 長いこと続けていると、CSSがとても肥大化して運用しづらく...
• 2019-11-08 14:53:35

• CSS 要素の可変の制御
• 要素の大きさや縦横のサイズをCSSで変更するサンプルです。 トリミングしたり、ユーザーがカスタマイズするような場面で、要素を可変にしたいときがあるとします。 そんなときはCSSで制御できます。 以下の画像の右...
• 2019-10-29 16:00:46