少ないし参考になりそうにないCSS教室

画像のサイズ変更 ページ14

え?ってなった人多いですよね絶対。

「そんなのアプリとかじゃないの?」

とか思ったでしょ!違います!()

background-sizeというプロパティです!
お好きな値を!


「どうやってやるの?」

って思った方いますよね!(さっき見た..?)

実は使い方様々です!
どういうこと!って思いました?()

ちょっとわかりにくすぎるので例を見せますね。

input[type=radio]{visibility:hidden;}
input[type=radio] + label{
padding-left:1.5em;
background:url(画像URL１) no-repeat left center;
background-size:1em 1em;
display:inline !important; line-height: 150%;
}

引用:夢乃ふわり様、占ツクCSS辞典より36ページ



これは、画像を指定してそのサイズを1emに変えるソースが含まれています。
こんな感じに(?)選択肢のボタンに使ったり...


あと、

※麦凛様提供


こんな感じにサイズ変更してよくある右下に置くことも出来ます!
すごいですね!
ちなみに画質悪いのは気にしないでとのことです。

で、ソースが

{background-image:url(画像URL);background-size:(設定)em (設定)em;}
これですね!
これと併せて使うといいのが、

{background-repeat:no-repeat;background-potion:bottom right;}
です!
下(さっきあったソース)のは選択肢に使う時は便利どころか邪魔です!消しましょう!

「どんくらいで設定すればいい?」

って方いらっしゃいますよね。
そういうのは私詳しくないので試したほうが早いです!5emだの30emだの試しましょう!



ここまで説明しましたが、ふわり様の見ればわかるんですかね()

続く お気に入り登録で更新チェックしよう!

最終更新日から一ヶ月以上経過しています
作品の状態報告にご協力下さい
更新停止している| 完結している


←影:いろいろ

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