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

• css3 計算した値をスタイルに使う
• CSSのcalcを使って計算結果の値でデザインするサンプルです。 CSSで値を記入する際、レスポンシブを意識してパーセントで書くことがよくあります。 例えば「左右に余白をとりたい」とき余白もパーセントでします。 そ...
• 2019-10-29 15:35:02

• CSS 画像の切り取り
• 画像をCSSで四角く切り抜くサンプルです。 画像の編集ソフトは不要です。 CSSの「clip」を使います。 加工した画像と切り抜いた画像を重ねると目を引く演出ができます。 CSS下記にまとめて記...
• 2019-08-22 15:46:12

• CSS 画像のぼかし、補正
• CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。 フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。 たくさんの種類があるので、どんなことができるのか並べてみましょう。 画...
• 2019-07-30 22:28:24

• CSS ヘッダー固定
• ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。 以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。 以前はこのようなことがやりたくてもz-indexやfixedで表現して...
• 2019-07-28 13:37:32

• Storybookの実行メモ（Vue.js版）
• Vueを利用した環境で、Storybookを使うときの作業メモです。 Storybookは、最小単位でのデザインされたパーツを組み立ててサイトを構成する際に便利な内部向けツールです。 細分化されたパーツをサイトとは別に作品集よ...
• 2019-07-02 00:00:00

• CSS 湯気の表現
• 温かいものの演出に使える湯気の表現です。 SVGの画像をCSSでアニメーションして、２枚の画像を使って湯気の表現を実装します。 この画像は３層になっています。 一番上に湯気の通り道だけ透明の肉ま...
• 2019-07-28 05:23:44

• CSS マーカーのような表現
• 蛍光ペンで文字の上に線を引いたような表現のサンプルです。 文章の中で、目立たせたいときに、よく蛍光ペンで線を引きます。 CSSで思いのほか、簡単にできます。 サンプルの文章で、大事な部分に、水色をつけて...
• 2019-08-03 22:19:57

• CSS3 要素を回転させる
• 要素にクラスを指定して回転、逆回転させるサンプルです。 CSS3では簡単に画像やオブジェクトを回転させることができます。 アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。 まず...
• 2019-08-03 21:58:12

• CSS3 flexを使った配置３（行間の操作）
• 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun...
• 2019-08-03 21:29:20

• CSS3 flexを使った配置２（要素の改行）
• 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{...
• 2019-07-30 21:50:18