ホームページ作成

【ホームページ作成】テキストの配置・装飾 (HTML,CSS)

テキストの配置・装飾 (HTML,CSS)

HTMLやスタイルシート（CSS）を使ったテキストの配置、装飾方法について解説しました。

各行の右端も揃う！両端揃えで表示する方法

標準では文章は左端から「左寄せ」で表示されますので、何もしなくても各行の左端は揃います。しかし、右端は揃わない可能性があります。CSSを使って「両端揃え」を指定すれば、左右の両端を揃えることができます。

ガイド：西村文宏
Webで使える「 ’ 」と「 " 」以外の引用符

HTMLタグ内やCSSなどで使う引用符は「 ' 」と「 " 」だけですが、ウェブ上でも文章中で使える引用符にはもっと種類があります。開始と終了で向き合う形の引用符や、下付きの引用符なども表示させられます。

ガイド：西村文宏
文章を縦書きで表示する方法

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

ガイド：西村文宏
文字にルビ（フリガナ）を振る

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

ガイド：西村文宏
スタイルシートでドロップキャップを作る

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

ガイド：西村文宏
行間(行の高さ)を調節するなら単位はナシで

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

ガイド：西村文宏
1行内に左寄せと右寄せを同時に書きたい

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

ガイド：西村文宏
段落の先頭1文字を別デザインに

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

ガイド：西村文宏
絶対指定ではない方法で　文字サイズを微調整したい！

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

ガイド：西村文宏
強調部分に二重線を引きたい！

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

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！