CSS box-shadow ボックスに影をつける
説明 box-shadow サンプル 影を右に10px,下に10pxにする 影のぼかし10pxを追加 影の範囲10pxを追加 影の色を指定する 影を内側に表示(insetを指定) Chromeでbox-shadowを調整 […]
カテゴリー：HTML / CSS
CSS border-radius 四角の角を丸くする
説明 border-radiusとは サンプル １．四角の角を丸くする(半径10px) ２．四角の角を丸くする(半径30px) ３．四角の角を丸くする(半径10%) ４．四角の角を丸くする(半径30%) ５．角を楕円形に […]
HTML detailsとsummary クリックで詳細を開く
目次 サンプル クリックして詳細を開く/閉じるサンプル 初期表示は開いておく場合 details要素 クリックして詳細を開く/閉じるサンプル 文字「テスト」の行をクリックすると詳細情報が開きます。 再度、マークを押すと詳 […]
HTML number 上下ボタンで数値を入力する
目次 サンプル 上下ボタン(スピナー)で数値を入力する number属性 上下ボタン(スピナー)で数値を入力する カーソルを入力欄にあてると上下ボタンが表示されます。上または下のマークを押すと数値が変化しま […]
HTML スライダーで数値を入力する(range)
目次 メモ スライダーで数値を入力する range属性 スライダーで数値を入力する スライダーを左右に動かすとスライダーにあわせて数字が動的に変わります。 このサンプルでは、値は１から10までにしています。 1 &nb […]
HTML 入力欄に入力候補を表示する(datalist)
目次 サンプル 入力候補を表示する datalist要素 入力候補を表示する １．入力欄に「あ」と入力すると、入力候補に「あいうえお」が表示されます。 ２．入力欄が空白の状態で右の三角をクリックすると入力候 […]
HTML 進捗状況を表示するプログレスバー
目次 サンプル プログレスバーのサンプル progress要素 プログレスバーのサンプル プログレスバーはインストールの進捗状況などを表現できます。 ボタン1を押すとプログレスバーに色がついていきます。 色 […]
HTML cellspacing テーブルのセルの間隔を指定する
HTMLのcellspacing属性で、テーブルのセルの間隔を指定するサンプルです。 目次 サンプル cellspacing属性 cellspacingに10pxを指定する cellspacingに1pxを […]