SYNCERのロゴ
アイキャッチ画像

br要素みたいに要素する方法

br要素は本来、デザイン目的で使ってはいけません。ではスタイルシートで改行させるにはどうすればいいか?::beforeや::afterに"\A"を指定することで実現できます。

サンプルコード

.br::before {
	content: "\A" ;
	white-space: pre ;
}

デモ

brというclassを作成しました。下記は対象要素の直前に改行を挿入する例です。直後に挿入するには、::beforeではなく、::afterに指定します。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
		.br::before {
			content: "\A" ;
			white-space: pre ;
		}
	</style>
</head>
<body>
	<p>われわれは<span class="br">宇宙人</span>だ</p>
</body>
</html>

備考

\Aとは?

"\A"は、改行を示すコードです。スタイルシートのcontentプロパティにこの値を加えると、その場所に改行が挿入されます。ちなみに、contentプロパティは、擬似要素(::before、::after)以外では無効です。

white-space

HTMLのソースコードに改行があっても、ブラウザで表示した時には改行されていませんよね。ちょこっとスペースが空くだけです。だけど、pre要素やtextarea要素内だったら、ソースコード上の改行がブラウザでも反映されます。

このwhite-spaceプロパティの値をpreにすることで、pre要素と同様に、改行がブラウザに反映されるようになるということです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年6月22日 (木)
コンテンツを公開しました。