CSS | テキストを上半分、下半分でスライスする方法

CSS,CSS テキスト

CSSでテキストを上半分、下半分で切り分けてスライスする方法を紹介しています。

テキストを上半分、下半分でスライスする

テキストを上半分、下半分でスライスする方法について、疑似要素を使った方法や他の手段を考えていましたが、一周して結局CSSコードの簡潔さから普通にテキストを2つ並べる方法で落ち着きました。

※色を変えるだけでしたらlinear-gradient()で2色グラデーションを作った方が簡単です。

最終的にCSSアニメーションでスゥ~ってスライスしたいですね。

See the Pen CSS | z-index by yochans (@yochans) on CodePen.

HTMLには上半分用と下半分用のテキストを用意、それぞれにテキストの半分以上は非表示にする親要素をdivタグで作成しています。class名は「.slice」。

<div class="slice"><p>TEXT SLICE</p></div>
<div class="slice"><p>TEXT SLICE</p></div>

CSSでは親要素のdivには「height: 0.75em」を指定してテキストの丁度半分のサイズに「overflow:hidden」ではみ出る部分を非表示にしています。

0.75emとは:1emは指定されているpxサイズの1文字分、余白込みにすると1.5em、そして中央はその半分。

修正:いまいち納得がいかなかったのでpxで調節する事にしました。

下半分になる2つ目のpタグは「position: absolute」で位置調整が必要ですので、親要素のdiv「.slice」に「position: relative」を指定しています。

下半分になるpタグは下半分が見えるように位置を上に親要素の高さ分(サンプルでは54px)ずらします。

.slice {
	position: relative;
	height: 54px;
	overflow:hidden;
}

.slice p {
	margin: 0;
	font-size: 80px;
	font-weight: bold;
	color: #ff6347;
}

/* 下半分のみに適用 */
.slice:nth-child(2) p {
	position: absolute;
	top: -54px;
	left: -10px;
	color: #4169e1;
}

CSS,CSS テキスト

Posted by Yousuke.U