- CSS スタイルの非同期の外部参照
- 重要なCSSと、後から読み込んでもよいCSSを分けて実装するサンプルです。 昨今、表示の速さは検索エンジンが細かく評価するようになりました。 ページを表示する際に必要なスタイルだけ読み込み、重要でないスタイルは後で読み込むよ...
- 2022-11-06 10:07:47
UIサンプルギャラリー「キプレ」
jQuery
close
MENU
用途
新着
履歴
分類
★
CSS
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
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
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 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
- CSS ボタンのホバーアニメ
- ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。 CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。...
- 2021-01-01 23:05:09
- CSS アニメーション付きモーダル作成
- CSSだけでアニメーションのエフェクト付きのモーダルウィンドウを作成するサンプルです。 JavaScriptが苦手、あるいは使えない状況でも、モーダルの表現が可能です。 探すと素っ気ないモーダルはあるのですが、アニメーションの演出が付いているもの...
- 2020-06-23 23:59:09
Top