最後の仕上げに、CSS講座 (ページ15)

今日:19 hit、昨日:14 hit、合計:33,612 hit

S-9.色違いボタンページ15

.

akari様、質問ありがとうございました。
「最初から読む、選択した内容を読むなどの部分」のソース(セレクター)についてですが、夢乃ふわり様の【占ツクCSS辞典】に載っております。

CSS辞典の利用規約「CSS辞典を元にして新たに辞書を作ってはいけない」を守るため、ここでは応用セレクターを説明していきます。

【画像1/リンク】

【画像2/リンク】

「選択した内容を読む」と「最初から読む」の色や画像が違いますね。色違い。

「選択した内容を読む」のみのセレクターです。

▶ソース【𝕤𝕠𝕦𝕣𝕔𝕖】
input[type=submit]#sm{
color:#カラーコード;
background-color:#カラーコード;
background-image:url(画像のURL);
border:太さ線の種類 #カラーコード;
}
/*タップ・クリックされたときの変化*/
input[type=submit]#sm:hover{
color:#カラーコード;
background-color:#カラーコード;
background-image:url(画像のURL);
border:太さ線の種類 #カラーコード;
}

input[type=submit]だけに画像を使うと反映されなくなりますので、そこは注意してくださいね。

テーマカラーが2つあるCSSを配布するときに役立ちそうです。色反転とか面白そうですね。

▶まとめ【𝕤𝕦𝕞𝕞𝕒𝕣𝕪】
【input[type=submit]#sm】は、「選択した内容を読む」だけの設定。