第五十一回「何回も調べてしまった覚えてしまいたいCSSまとめ～その二～」

本日も私が何回もやり方を調べてしまっているCSSをまとめて記載します。
基本的なCSSですが、コピペで対応できるように備忘録しておくことによって、コーディング速度の向上を図ります。

■画像ファイルを中央繰り返し表示せず動かないように固定して、さらに背景を大きさによって調整できるようにする。

	body {
	background: url(bg.jpg) center center / cover no-repeat fixed;
	}

view raw gistfile1.txt hosted with by GitHub

■使用する画像の角に丸みをつける。

	a{
	border-radius: 5px;
	}

view raw gistfile1.txt hosted with by GitHub

■テキスト部分に下線を付ける。

	span{
	text-decoration: underline;
	}

view raw gistfile1.txt hosted with by GitHub

■テキストの背面にシャドウを付ける。（今回水色）

	span{
	text-shadow:
	0 2px 0 #F00,
	2px 0 0 #F00,
	0 -1px 0 #F00,
	-1px 0 0 #F00,
	-1px -1px 0 #F00,
	2px -1px 0 #F00,
	-1px 2px 0 #F00,
	2px 2px 0 #F00;
	}

view raw gistfile1.txt hosted with by GitHub

■非表示にする。

	span{
	display:none;
	}

view raw gistfile1.txt hosted with by GitHub

★完成★

レスポンシブデザイン時に「display:none;」を使う場面もおおくありますが、コーディング技術向上の為、極力使わないようにしましょう。