最後の仕上げに、CSS講座

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】は、「選択した内容を読む」だけの設定。

S-10.PC 人気の作品(新作)→←S-8.最終更新：××年〇〇月

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す