[CSS]WEBだって印刷するんだ!どうでもいいけど切り取り線とか作っちゃうよ!




しばらくぶりの更新。
書きたいネタはたくさんありますが、そんな中から厳選して今後絶対使わないであろうネタをメモ。

<hr>を使って切り取り線作ってみた。

デモはこちら

CSS

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border: 1px dashed #bbb;
}
hr:after {
	content: '\002702'; /*ハサミ*/
	display: inline-block;
	position: relative;
	top: -14px; /*点線の真ん中にくるぐらいに*/
	left: 50%; /*中央に揃えるよ*/
	font-size: 20px;
	background: #fff;
	padding:0 10px;
}

コード中にあるCSSコメントの通りです。
擬似要素を使ってハサミを配置してみました的な感じです。

まとめ

どう?このやる気の無さ。
もちろんIEは全滅ですけど、点線は表示されますので意味は通じるかなと思います。

メールフォームとか作るのメンドクサイからWEBページ印刷してもらってFAXしてもらったらいいんじゃないかしら?ってこと良くあるじゃないですか?ねー。あるある。
そんなときにでも使えばいいんじゃないかしら?

すみません・・・

タイトルとURLをコピーしました