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 flexを使った配置１（横の位置）
• flexを使ってfloatのような配置を実装します。 CSS3より追加されたflexのサンプルです。 flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。...
• 2019-07-29 21:51:41

• CSS3 画像を左右に回転する
• 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ...
• 2019-07-29 06:53:21

• CSS3 数値を演算で演算して指定する
• widthやleftなど100%で書きたいもののそこから10ピクセル引いた値を使いたいときなど、意外とコーディングするときに発生します。 そんなときは以下のように指定することができます。 [[width : calc(100% - 10px) ;]] こう指定するとこで100％の幅から固定で10px差し引いた横幅になりま...
• 2019-08-07 20:59:19

• CSS3 震える表現
• 画像や文字がアニメーションすると、どうしても見てしまいます。 縦と横それぞれに揺らす表現は以前紹介しました。 縦と横の動きを混ぜることで、シャッフ...
• 2019-07-29 05:10:08

• CSS 印刷のときに非表示
• ウェブページを印刷するときに、表示する要素を出し分けます。 使い所はそんなにないのですが、印刷する時に一部の画像や要素を非表示にしたい場合のCSSのサンプルです。 画像の高さを維持して、画像だけ真っ白にする場合...
• 2019-07-28 16:45:54

• CSS floatとheightとtopの50%
• CSSでfloatを使うとよく、高さを指定する部分で謎にハマってしまうことがあります。 そもそもこういう風にfloatは使わないよ、と言われてしまいそうですが、...
• 2019-08-07 17:50:50

• CSS3 要素を揺らす
• 画像やテキストなど要素を目立たせるために縦や横に揺らすサンプルです。CSS3で実装しています。 位置を移動させループ再生をしています。 縦に揺らす...
• 2019-07-29 05:58:03

• CSS3 ウィンドウサイズ変更でアニメーション
• ウィンドウのサイズが変わった時にアニメーションでレイアウトを変えたいときに使う表現です。 MediaQueryを使ってウィンドウサイズによってレスポンシブに変...
• 2019-07-29 05:49:53

• CSS positonのabsoluteとrelative
• cssのpositionのabsoluteやrelativeはよく使うわりに、使わないと忘れて混同しがちです。 staticはデフォルト値で、fixedはインパクトが強くて忘れないし、ど...
• 2019-08-07 16:59:43

• CSS 吹き出し
• CSSのみで吹き出し（バルーン）を作るサンプルです。 SVGで作る方法もありますが、CSSなので比較的とっかかりやすい印象です。 また、画像を作成する手間...
• 2019-08-07 00:08:50