ワイヤード・パンチ

サイトレイアウトを変えてみました。よろしければアンケートにご協力ください。

画像を使わず、CSSで通行止めマークを作成してみる。

webサイト上に些細な記号を載せるようなときでも、いちいち画像ファイルにしていると、のちに修正があったら差し替えが面倒ですし、拡大すると荒れて見えます。

よって、ちょっとした記号程度なら、画像ファイルではなくcssでやってしまいましょう。

今回は上の写真のように、道路標識の通行止めのようなマークをcssだけで作ってみます。

広告

ソースコード

まず、真っ先に通行止めマークを実現するためのcssのコードです。

今回はstopというクラスに、スタイルを充てることにします。

.stop {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	box-sizing: border-box;
	border: 10px solid #f00;
	position: relative;
}

.stop:before {
	content: "";
	position: absolute;
	top: calc(50% - 5px);
	left: 0;
	border-bottom: 10px solid #f00;
	width: 100%;
	transform: rotate(45deg);
	transform-origin: center;
}

SASSで書く場合は、下記になります。

なお、SASSには拡張子がsassとscssの2種類ありますが、カッコ不要で記述が楽で見やすい、sassの方で記載します。

.stop
	width: 100px
	height: 100px
	border-radius: 50%
	box-sizing: border-box
	border: 10px solid #f00
	position: relative
	&:before
		content: ""
		position: absolute
		top: calc(50% - 5px)
		left: 0
		border-bottom: 10px solid #f00
		width: 100%
		transform: rotate(45deg)

コンテナ要素で周囲の円を描いたあと、beforeで斜線を表示するという流れになります。

処理の流れ。

わかってしまえばあんまり長くないコードで書けるものの、少々手こずってしまったため、通行止めマークが出来上がるまでの経緯をまとめておきます。

まずは、円を描くためのコードです。

.stop
	width: 100px
	height: 100px
	border-radius: 50%
	box-sizing: border-box
	border: 10px solid #f00
	position: relative

「border-radius」はコンテナの四隅の角を丸めるためのスタイルであり、pxで指定した場合はそのピクセル分、角が丸められます。

パーセントで指定した場合、要素の幅や高さに基いて丸められ、50%だった場合は要素の半分です。

四隅からそれぞれ半分の長さまで丸めるので、結果的に円になるというわけです。

そして、斜線はbeforeで実現したいため、斜線を設置するための基準点を指定できるよう、円に「position: relative」を入れておきます。

続いて斜線です。区別のため、色は変えています。

まずは棒線そのものを表示させます。

&:before
	content: ""
	position: absolute
	top: 0
	left: 0
	border-bottom: 10px solid #f00
	width: 100%

これで、コンテナの横幅一直線に伸びる棒線を設置できました。

コンテナは見た目こと円になっているものの、内部的には四角形のまま扱われるので、borderの太さの分、左上の基準点が動いています。

次に、棒線を斜めに傾けて、通行止めマークらしくします。

&:before
	content: ""
	position: absolute
	top: 0
	left: 0
	border-bottom: 10px solid #f00
	width: 100%
	transform: rotate(45deg)

「transform」を使うと表示に関する様々な効果をかけることができ、そのうちの一つとして「rotate」があります。

「rotate」は傾きに関する設定であり、「rotate(45deg)」とすることで、45度傾けることができます。

しかし、実際にやってみると、斜めにはなったものの、位置がおかしいですね。

これは単純に、コンテナの左上を設置位置しているためです。

よって、真ん中を設置位置にしましょう

&:before
	content: ""
	position: absolute
	top: 50%
	left: 0
	border-bottom: 10px solid #0f0
	width: 100%
	transform: rotate(45deg)

これでもまだずれています。

真ん中から下の方にborderが表示されているため、borderの高さの半分だけ、上に動かしてやる必要があります。

&:before
	content: ""
	position: absolute
	top: calc(50% - 5px)
	left: 0
	border-bottom: 10px solid #0f0
	width: 100%
	transform: rotate(45deg)

これでようやく完了となりました。

calcを使うと、パーセントとpx両方を使った値の計算をすることができます

動的に要素の位置を決定したい場合に重宝します。