CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法

CSSのtext-transformプロパティを使うと、要素内のテキストの大文字・小文字の表示形式を簡単に制御できます。指定できる値は、capitalize、lowercase、uppercase、full-width、full-size-kana、noneの6種類です。

構文

CSSのtext-transformプロパティの構文は以下のとおりです。

Selector {
   text-transform: /*value*/
}

指定できる値の一覧

  • capitalize … 各単語の先頭文字を大文字にします
  • uppercase … すべての文字を大文字にします
  • lowercase … すべての文字を小文字にします
  • full-width … 半角文字を全角文字に変換します
  • full-size-kana … 小さいかな文字を全角のかな文字に変換します
  • none … 変換を行いません（デフォルト値）

サンプルコード

以下の例は、CSSのtext-transformプロパティの基本的な使い方を示したものです。見出しにはuppercase、引用文にはcapitalize、段落にはlowercaseをそれぞれ指定しています。

<!DOCTYPE html>
<html>
<head>
<style>
h2 {
   text-transform: uppercase;
}
.demo {
   text-transform: lowercase;
}
q {
   text-transform: capitalize;
   font-style: italic;
}
</style>
</head>
<body>
<h2>WordPress</h2>
<q>WordPress is open source software you can use to create a beautiful website, blog, or app.</q>
<p class="demo">34% of the web uses WordPress, from hobby blogs to the biggest news sites online.</p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法

サンプルコード

次に、複数の要素に異なる値を組み合わせて指定した例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   background-color: lightgreen;
   margin: auto;
   text-align: center;
}
p {
   width: 80%;
   background-color: aquamarine;
   text-transform: uppercase;
}
article {
   background-color: darksalmon;
   text-transform: lowercase;
}
</style>
</head>
<body>
<h2>What is Magento?</h2>
<div>
<p>Magento is an open-source e-commerce platform written in PHP.</p>
<article>
Build your own branded store powered by Magento Commerce and Amazon. Choose from 4,600 themes and extensions in the Magento Marketplace as well as more than 300,000 Magento developers.
</article>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのtext-transformプロパティでテキストの大文字・小文字を変換する方法

まとめ

text-transformプロパティを活用すれば、HTMLのテキストをそのままに、見た目上の大文字・小文字だけをCSSで柔軟に切り替えられます。SEOやアクセシビリティの観点からも、マークアップは元のテキストのまま保ち、表示の変換はCSSに任せるのがベストプラクティスです。

  1. CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

    テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange

  2. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {