テキストの配置・装飾 (HTML,CSS)(2ページ目)

ウェブ上での文章中にも使える様々な引用符の書き方を解説。キー入力できるアポストロフィ「'」やクォーテーションマーク「"」以外にも多数の引用符があります。シングルクォーテーションマーク、ダブルクォーテーションマーク、ダブルミニュート記号などの引用符には、記号の向きや位置に複数のバリエーションがあります。引用に使われる括弧であるギュメの書き方もご紹介。

ウェブ上での表示は「横書き」が基本です。しかし、Internet Explorerだけではありますが「縦書き」で文章を表示させることもできます。スタイルシートのプロパティ1つを使うだけで、簡単に縦書き表示を作れます。

漢字の読み方を示したり、英単語の発音を示したりするのに、「ルビ」（フリガナ）が使われますね。XHTMLには、漢字などにルビ（フリガナ）を振る要素が用意されています。これを使えば、簡単にルビを表示できます。

雑誌などでよく使われる「先頭の1文字を大きくして下の数行に食い込ませる」装飾(ドロップキャップ)を作ってみましょう。スタイルシートを使えば簡単です。first-letter疑似要素・first-child疑似クラスを使います。

長文を読みやすくするには行間を広めに設定する方が望ましいでしょう。その行間（行の高さ）の指定を、単位付きの数値で記述していませんか？ 単位を付けて指定すると、上下の行と重なってしまうことがあります。

CSSで左寄せ・中央寄せ・右寄せする方法を解説。同一行内に左寄せと右寄せを共存させたり、左寄せ・中央寄せ・右寄せ全部を同じ行に共存させることもできます。複数の文字寄せの共存もfloatプロパティを使うなど少しの工夫で実現できます。1行の文字寄せ方向の指定ならtext-alignプロパティを使うだけ。

雑誌などを読んでいると、段落の先頭1文字だけが大きな反転文字になっているデザインを見かけることがあります。これをホームページ上でも実現してみたいと思いませんか？ スタイルシートを使えばとっても簡単です。

文字サイズの指定方法に満足していますか？「smallより大きくmediumより小さくしたい」と思った場合、どうしますか？ スタイルシートには、文字サイズを細かく微調整する指定方法もあるのです。

「文字の下に二重線を引いて強調したい！！」と思ったことはありませんか？ 文字を強調する手段は太字だけではありません。スタイルシートを使えば、二重線を引いて強調することもできます。

本文中に蛍光ペンを引きたい！と思ったことはありませんか？ 紙と同じように、ホームページ上の文章にも蛍光ペン効果を出すことができます。ペンの種類も自由自在。お手軽「蛍光ペン効果」をぜひ試してみて下さい。