1. 1文字ずつ(文字単位で)装飾を変化させる方法

カラフルに装飾しようと考えたなら、「1文字ずつ異なる装飾を施したい」と思うこともあるでしょう。CSSには、残念ながら1文字ずつ装飾を変化させる方法はありません。しかし、jQueryとCSS3を組み合わせると、1文字ずつ装飾を変えることも簡単です。

1文字ずつ色を変えるなど、文字単位で装飾する方法

ウェブ上のテキストを、「1文字ずつ異なる色でカラフルに表示させたい」と思ったことはないでしょうか。CSSだけでは1文字ずつ色を変えることはできませんが、ほんの数行のjQueryを同時に使えば「1文字ごとに別々の装飾を施す」ことは簡単にできます。jQuery+CSS3で、1文字ずつ色(装飾)を変える方法を解説。

出典: 1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About

2. 文字を扇形や円形に配置してデザインする方法

文字列を扇形や円形に配置したい場合でも、画像として作成する必要はありません。検索可能・コピー可能・修正容易というテキストの利点を活かしたままで扇形や円形に配置できる、凝ったデザインを実現する方法があります。

文字列を扇形にカーブさせたり円形に配置させる方法

文字列を扇形にカーブさせて表示する方法をご紹介。jQueryを使ったスクリプト「Arctext.js」を活用すれば、テキストを画像化することなく、自由な角度で扇形に整形できます。上向き・下向きの扇形を組み合わせれば、コーヒー店のロゴのように文字を円形に配置させることも可能です。

出典: 文字列を扇形にカーブさせたり円形に配置させる方法 [ホームページ作成] All About

3. 長体(縦に細長い文字)や、平体(横に平べったい文字)も簡単

文字を縦に潰したり横に潰したりする「長体」や「平体」といった書体も、CSS3を使えば簡単に実現できます。

CSS3のtransformで、文字を長体や平体で表示する方法

CSS3のtransformプロパティを使うと、ワープロソフトなどでは簡単に実現できる「長体」(縦に細長い文字)や「平体」(横に平べったい文字)をウェブ上でも簡単に作れます。長体や平体を実現する方法と注意点等をご紹介。

出典: CSS3のtransformで、文字を長体や平体で表示する方法 [ホームページ作成] All About

4. 読みやすく行間を調節する方法

ブラウザの標準設定では、必ずしも読みやすい行間が空くとは限りません。特に長い文章を表示する場合は、行間は広めに取られている方が望ましいでしょう。CSSを使えば簡単に行間サイズを調整できます。

スタイルシートで文章の行間を調節する方法

長い文章は適切な行間隔があれば読みやすくなります。HTMLタグとCSSを使ってホームページの文章の行間を自由自在に指定する方法をご紹介。スタイルシートのline-heightプロパティで簡単調節!

出典: スタイルシートで文章の行間を調節する方法 [ホームページ作成] All About

5. 右寄せと左寄せを同時に使って省スペースにデザインする方法

CSSを使えば、文章を簡単に「左寄せ」や「右寄せ」で表示できます。しかし、1行内に「左寄せの文字列」と「右寄せの文字列」を混在させたい場合もあるでしょう。そんな装飾も簡単です。

1行内に左寄せと右寄せを同時に書きたい

1行内に「左寄せ文字列」と「右寄せ文字列」を混在させたいと思ったことはありませんか? 通常、1行は左寄せか右寄せのどちらか一方しか指定できません。しかし、スタイルシートを使えば、両方の混在が可能です。

出典: 1行内に左寄せと右寄せを同時に書きたい [ホームページ作成] All About

6. テキストリンクに「押し下がる」効果を加える方法

文字列で作ったリンク(=テキストリンク)にも、ボタンのように押し下がる表示効果があると、クリック可能であることが分かりやすくなるかも知れません。

マウスが乗ると押し下がるテキストリンクの作り方

ボタンはクリックすると押し下がりますね。でも、テキストリンクは押し下がったりしません。テキストリンクもボタンのように押し下げられるようにしてみませんか? 方法はとっても簡単。スクリプトは使いません。

出典: マウスが乗ると押し下がるテキストリンクの作り方 [ホームページ作成] All About

7. 望みのフォントで文字を表示する方法

CSSを使えば表示フォント名を指定することは可能ですが、その場合は「閲覧者の環境に指定のフォントがインストールされている」ことが必須です。しかし、ウェブフォントという仕組みを使えば、ブラウザにフォントファイルをダウンロードさせることで、望みのフォントで文字を表示できます。

望みのフォントで表示できる!ウェブフォントの使い方

CSS3で追加された「ウェブフォント」機能なら、指定フォントがインストールされていない環境でも、ブラウザがフォントファイルをダウンロードして使ってくれるため、望みのフォントで表示させられます。ウェブフォントの使い方をご紹介!

出典: 望みのフォントで表示できる!ウェブフォントの使い方 [ホームページ作成] All About

8. 文字サイズを分かりやすく指定する方法

文字サイズは「90%」などのように割合で指定することも多々あるでしょう。しかし、HTMLの構造(階層)が複雑だと、結局「どれくらいの大きさで表示されるのか」が把握しにくいことがあります。CSS3で追加された新単位なら、そんな問題も解決です。

CSS3の新単位remで、文字サイズの指定を分かりやすく

単位emや%を使って相対的に文字サイズを指定すると、複数のボックスを経由した先などでの表示サイズが把握しにくいことがあります。CSS3の新単位「rem」を使えば、常にルート要素の文字サイズが基準になるため、文字サイズを分かりやすく指定できます。

出典: CSS3の新単位remで、文字サイズの指定を分かりやすく [ホームページ作成] All About

9. 行単位で装飾を変化させる方法

長いリストや表を掲載する際は、1行ごとに装飾を変えておくと、見やすさが向上します。「奇数行だけ」・「偶数行だけ」や「3行ごと」など、一定のパターンで装飾を繰り返すことも、CSS3なら簡単です。

CSS3で偶数行・奇数行など「n番目」を限定装飾する

リストやテーブルなど、たくさんの項目が連続する要素は、1行おきに装飾を変えると見やすくなります。CSS3で用意された「nth-child疑似クラス」を使えば、装飾対象を「偶数番目のみ」・「奇数番目のみ」などに簡単に限定できます。他にも「3つおき」や「先頭の5つ」など柔軟に指定できる便利なCSSです。

出典: CSS3で偶数行・奇数行など「n番目」を限定装飾する [ホームページ作成] All About

10. 1行ごとにアニメーションさせる方法

同時に全部を見せる必要はないが、たくさんの情報を提示したい、という場合には、一定秒数ごとに1行ずつアニメーション表示する「ティッカー」を作ると面白いのではないでしょうか。

数秒ごとに1行ずつ縦スクロールするティッカーを作る

1行または数行単位で、「指定した数秒間は静止」→「縦方向にスクロールするアニメーションで次の1行を表示」……を繰り返す「ティッカー」を掲載する方法をご紹介。jQueryを活用したスクリプト「vTicker」を使うことで、ブロックレベル要素をまるごと垂直方向に流せます。

出典: 数秒ごとに1行ずつ縦スクロールするティッカーを作る [ホームページ作成] All About

番外. 文字を画像化する前に

凝ったデザインで文字を表示したい場合、画像化してしまう方が簡単に思えることも多々あるでしょう。しかし、文字を画像として表示してしまうと、様々なデメリットがあります。どんなデメリットがあるのかを押さえておくと、迷ったときに「本当に画像化しても良いかどうか」が判断しやすくなるでしょう。

文字を画像化するデメリット

文字を画像化していませんか? ロゴなどはデザインも重要ですから、ある程度の画像化は仕方がないでしょう。しかし、あまり画像化しすぎるのは禁物です。文字を画像化した場合の10個のデメリットをご紹介致します。

出典: 文字を画像化するデメリット [ホームページ作成] All About