CSS linear-gradient 線のグラデーションのサンプル
説明 linear-gradient サンプル 上から下にグラデーションする(2色) 上から下にグラデーションする(3色) 上から下にグラデーション+色の位置を追加 上から下にグラデーションなしで並べる 真 […]
カテゴリー：HTML / CSS
CSS opacity 透明度を指定する
説明 opacityとは サンプル opacityの1 opacityの0.8 opacityの0.6 opacityの0.4 opacityの0.2 opacityの0 opacityとは opacityは、透明度を指 […]
CSS text-shadow 文字に影をつける
目次 サンプル text-shadow 影のぼかし2pxを追加 影を右に10px,下に10pxにする 影の色を指定する Chromeでtext-shadowを調整する text-shadow text-shadowは、文 […]
CSS box-shadow ボックスに影をつける
説明 box-shadow サンプル 影を右に10px,下に10pxにする 影のぼかし10pxを追加 影の範囲10pxを追加 影の色を指定する 影を内側に表示(insetを指定) Chromeでbox-shadowを調整 […]
CSS border-radius 四角の角を丸くする
説明 border-radiusとは サンプル １．四角の角を丸くする(半径10px) ２．四角の角を丸くする(半径30px) ３．四角の角を丸くする(半径10%) ４．四角の角を丸くする(半径30%) ５．角を楕円形に […]
HTML detailsとsummary クリックで詳細を開く
目次 サンプル クリックして詳細を開く/閉じるサンプル 初期表示は開いておく場合 details要素 クリックして詳細を開く/閉じるサンプル 文字「テスト」の行をクリックすると詳細情報が開きます。 再度、マークを押すと詳 […]
HTML number 上下ボタンで数値を入力する
目次 サンプル 上下ボタン(スピナー)で数値を入力する number属性 上下ボタン(スピナー)で数値を入力する カーソルを入力欄にあてると上下ボタンが表示されます。上または下のマークを押すと数値が変化しま […]
HTML スライダーで数値を入力する(range)
目次 メモ スライダーで数値を入力する range属性 スライダーで数値を入力する スライダーを左右に動かすとスライダーにあわせて数字が動的に変わります。 このサンプルでは、値は１から10までにしています。 1 &nb […]