このページでは、CSSを使ったテキストの見せ方についてかんたんにまとめてます。
目次から気になる項目に移動できます。
テキストの色を変える
デモ
赤、緑、青
サンプルコード
<span style="color: #ff0000;">赤</span>、<span style="color: #008000;">緑</span>、<span style="color: #0000ff;">青</span>
テキストに影を付ける
デモ
テキストにも影があります
サンプルコード
<p style="text-shadow: 3px 3px 3px #333;">テキストの影です</p>
テキストの大きさを指定する
デモ
大きな文字、小さな文字
サンプルコード
<p><span style="font-size: 2rem;">大きな文字</span>、<span style="font-size: small;">小さな文字</span></p>
テキストを強調（太く）する
デモ
これが強調された太文字です。
サンプルコード
<p><strong>これが強調された太文字です。</strong></p>
テキストをイタリック調（斜体）で見せる
デモ
テキストを斜体で見せるとこんな感じ。
サンプルコード
HTMLタグだと以下の通り指定。
<p><em>テキストを斜体で見せるとこんな感じ。</em></p>
cssだと以下の通り指定。
p{font-style: italic; }
テキストに打ち消し線を付ける
デモ
取り消したいことってだれにでもあるよね？
サンプルコード
<p><del>取り消したいことってだれにでもあるよね？</del></p>
テキストのフォント（書体）を変える
デモ
WEBフォントを使えば、きれいでおしゃれなフォントも利用可能です！（その分、読み込みが遅くなるけど。。。）
ちなみに当サイトではWEBフォントを導入していないため、デモを用意できませんでした。
日本語WEBフォントはGoogleFontsページを参考にしてください。
サンプルコード
ここではGoogleFontsの「はんなり」フォントを例にしてます。
まずWEBフォントを読み込みます。
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
CSSでは以下のように定義する。
p{ font-family: "Hannari"; }
テキストをエンボス（くぼみ）加工する
デモ
くぼんでいるように見えるかな？
（目の錯覚）
サンプルコード
<style>
p{
text-shadow: -1px -1px 0px #333, 1px 1px 0px #fff;
color: #777;
font-size: 36px;
line-height: 1.3em;
background-color: #adadad;
}
</style>
テキストを切り抜いたように見せる
デモ
画像じゃないよ。ただテキストが透けて背景が見えてるだけ。
サンプルコード
<div class="kirinuki">
<p>画像じゃないよ。ただテキストが透けて背景が見えてるだけ。</p>
</div>
<style>
.kirinuki p{
color: transparent;
font-size: 48px;
font-weight: bold;
padding: 1rem;
line-height: 1.3em;
-webkit-background-clip: text;
background-image: url(/wp-content/uploads/yakei.jpg);
background-size: 100%;
background-position: bottom;
}
</style>
テキストを縁取り（アウトライン）する
デモ
テキストの縁取りってかんたんですね！この方法を知るまでtext-shadowでやってました。。。
サンプルコード
<p class="txt-outline">テキストの縁取りってかんたんですね！この方法を知るまでtext-shadowでやってました。。。</p>
<style>
.txt-outline{
color: #fff;
font-size: 48px !important;
font-weight: bold;
-webkit-text-stroke: 5px #000;
}
</style>
テキストを丸で囲む
デモ
テキストを囲む親要素が必要です。（div > p のような）
サンプルコード
<div class="kakomu">囲まれた</div>
<style>
.kakomu{
padding: 1em;
border: solid 1px #000;
border-radius: 50%;
display: flex;
width: 200px;
height: 200px;
align-items: center;
justify-content: center;
}
</style>
テキストを蛍光ペンでなぞったように見せる
デモ
利用するときはstrongタグと一緒に使ったほうが効果的かも！？
サンプルコード
<p class="marker-sample">利用するときは<strong>strongタグと一緒に使ったほうが効果的</strong>かも！？</p>
<style>
.marker-sample strong{
background: linear-gradient(0deg, #fd84ff, transparent);
}
</style>
テキストにアンダーラインを付ける
デモ
アンダーライン（下線）はリンクってイメージが強いです。
サンプルコード
<p>アンダーライン（下線）は<span style="text-decoration: underline;">リンクってイメージが強い</span>です。</p>
ちなみに非表示にする方法はこちら。
aタグの下線を非表示にする方法
aタグで標準で表示されるアンダーラインは、text-decoration:noneを指定すれば消えます。
a{text-decoration:none;}
テキストを円やアーチ型に表示する
現時点（２０２０年５月２０日）ではCSSでテキストを円形に表示するプロパティが存在しません。（javascriptは存在するようですが）
そのため、ここでおすすめする方法は手間がかかるのでオススメしません。
デモ
12 1 2 3 4 5 6 7 8 9 10 11
サンプルコード
<p class="txt-en"><span class="tr0">12</span> <span class="tr1">1</span> <span class="tr2">2</span> <span class="tr3">3</span> <span class="tr4">4</span> <span class="tr5">5</span> <span class="tr6">6</span> <span class="tr7">7</span> <span class="tr8">8</span> <span class="tr9">9</span> <span class="tr10">10</span> <span class="tr11">11</span></p>
<style>
.txt-en{
padding: 1em;
margin-bottom: 10em !important;
}
.txt-en span{
display: inline-block;
position: relative;
}
.tr0{
transform: rotate(0deg);
top: 0;
left: 3em;
}
.tr1{
transform: rotate(30deg);
top: 0.5em;
left: 4em;
}
.tr2{
transform: rotate(60deg);
top: 2em;
left: 4.5em;
}
.tr3{
transform: rotate(90deg);
top: 4em;
left: 4em;
}
.tr4{
transform: rotate(120deg);
top: 6em;
left: 2.5em;
}
.tr5{
transform: rotate(150deg);
top: 7.5em;
left: -0.5em;
}
.tr6{
transform: rotate(180deg);
top: 8em;
left: -3.7em;
}
.tr7{
transform: rotate(210deg);
top: 7.5em;
left: -7em;
}
.tr8{
transform: rotate(240deg);
top: 6em;
left: -9.5em;
}
.tr9{
transform: rotate(270deg);
top: 4em;
left: -11em;
}
.tr10{
transform: rotate(300deg);
top: 2em;
left: -12em;
}
.tr11{
transform: rotate(330deg);
top: 0.5em;
left: -12.5em;
}
</style>
テキストを回転させる
デモ
テキストは回転できます。ただ、角度の指定が必要です。
サンプルコード
<p class="rotate-sample">テキストは回転できます。ただ、角度の指定が必要です。</p>
<style>
.fade-sample{
animation-duration: 1s;
animation-name: fade-loop;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes fade-loop{
from {
opacity:0;
}
to {
opacity:1;
}
}
</style>
テキストをフェードイン・アウトさせる
デモ
これはいわゆるCSSアニメーションを使用してます。
サンプルコード
<p class="fade-sample">これはいわゆるCSSアニメーションを使用してます。</p>
<style>
.fade-sample{
animation-duration: 1s;
animation-name: fade-loop;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes fade-loop{
from {
opacity:0;
}
to {
opacity:1;
}
}
</style>
テキストの間隔を調整する
デモ
見やすい文章の秘訣。それはテキストの間隔を調整すること。
サンプルコード
<p style="letter-spacing: 0.5em;">見やすい文章の秘訣。それはテキストの間隔を調整すること。</p>
テキストを上下中央に表示する
デモ
テーブルタグ以外でもflexを使えば簡単に
縦中央の位置に指定できます。
サンプルコード
<div class="flex1">
<p>テーブルタグ以外でもflexを使えば簡単に<br>縦中央の位置に指定できます。</p>
</div>
<style>
.flex1{
display: flex;
align-items: center;
justify-content: center;
background-color: #fe4;
height: 10em;
}
.flex1 p{
margin:0 !important;
text-align:center;
}
</style>
テキストの横位置（右端、左端、中央）を指定する
デモ
テキストの横位置の調整は簡単。
左寄せ
右寄せ
中央
サンプルコード
<p style="text-align: left;">左寄せ</p>
<p style="text-align: right;">右寄せ</p>
<p style="text-align: center;">中央</p>
テキストを折り返す際にインデントを付ける
デモ
本のように文章を見せたいときに使えます。WEBではあまり使わないかな。ちなみに文章の先頭にスペースは入れてないよ。
サンプルコード
<p style="text-indent: 1em;">本のように文章を見せたいときに使えます。WEBではあまり使わないかな。ちなみに文章の先頭にスペースは入れてないよ。</p>
テキストが長すぎた場合に横スクロールさせる
デモ
あえて狭い枠を作ってます。スマホ用サイトのヘッダーナビとかで使えそう。
サンプルコード
<p style="width: 10em; height: 3em; white-space: nowrap; overflow: auto;">あえて狭い枠を作ってます。スマホ用サイトのヘッダーナビとかで使えそう。</p>
テキストのホバー（hover）時にエフェクトを設定する
デモ
カーソルを乗せるとテキストが変化します。
サンプルコード
<p id="ht">カーソルを乗せるとテキストが変化します。</p>
<style>
#ht:hover{color: red;}
</style>
テキストを折り返さない方法（改行させない方法）
デモ
テーブルのタイトル項目でよく使います。
改行させるかどうかは、white-spaceプロパティを使用します。
改行禁止の指定なしの場合（white-space: normal;）
| タイトルAタイトルAタイトルAタイトルAタイトルA | 内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。 |
|---|---|
| タイトルBタイトルBタイトルB | 内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。 |
改行禁止の指定ありの場合（white-space: nowrap;）
| タイトルAタイトルAタイトルAタイトルAタイトルA | 内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。 |
|---|---|
| タイトルBタイトルBタイトルB | 内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。内容です。 |
サンプルコード
<th style="white-space: normal;">タイトルAタイトルAタイトルAタイトルAタイトルA</th>
<th style="white-space: nowrap;">タイトルAタイトルAタイトルAタイトルAタイトルA</th>
テキストを回り込みさせる
ポイントは回り込まれる要素（下記のデモではimg）をfloatで浮かせることです。
デモ
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
サンプルコード
img{
float: left;
}
テキストを回り込みさせない
かんたんに実現させるなら親要素にdisplay:flexを指定して、子要素のサイズを調整する方法があります。
少し手間がかかりますが、floatをブロックレベル要素を横に並べる方法もあります。
デモ
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
サンプルコード
<div style="display: flex;">
<img src="abc.jpg">
<p>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>
以上、CSSのサンプル集でした。
今後も新しいテキストの表現方法を見つけたら追加していきます。
コメント