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

段組(マルチカラム)レイアウトが簡単に作成できるCSS3本文を3段組にした例(段の間には罫線が引かれ、各段の高さは自動で揃う)CSS3で新たに追加された「columns」プロパティなどを使えば、「段組(マルチカラム)」レイアウトが、短い記述だけで簡単に作れます。「3段組」や「4段組」のように、段の個...続きを読む

スクリプト不要！CSSだけでアニメーションを作成できるCSS3では、スクリプトを併用することなく、CSSだけで簡単なアニメーションが作れます。文字を動かしたり、表示色を徐々に変えたりなど、CSSで作った装飾を自由自在に変化させられます。実現方法は、CSSソース中に、アニメーションの条件を指定する「a...続きを読む

目立つ、しましま(ストライプ)柄の枠線を引きたいしましま(ストライプ柄)の枠線CSS3では、枠線の描画に画像を使う「border-image」プロパティが追加されました。枠線は、従来からCSSの「border」プロパティを使って引けましたが、線種は「実線・破線・点線・二重線」の4種類しかありませんで...続きを読む

表の列(縦方向)を一括装飾したいHTMLで作った表を装飾したいとき、行(横方向)単位だけでなく列(縦方向)単位で一括装飾したい場合があります。例えば下図の赤丸で示したように数値を掲載している列では、列全体を右寄せで表示したいでしょう。また、特定の列だけを強調したい場合には、縦方向に一括して背景色を加...続きを読む

CSSを使えば、好きな要素に自由な形式で「連番」を追加できる自由な表記形式で連番が振れるCSS(スタイルシート)には、任意の要素に「連番」を付加する機能があります。さほど新しいわけではなく、CSS2.1からある仕様です。「counter-reset」プロパティと「counter-increment」...続きを読む

文字列を円形に配置したり、アーチ状（扇形）にカーブさせたりするWebページ上で、文字列をアーチ状（扇形）にカーブさせて配置したいと思ったことはないでしょうか。ワープロソフトや年賀状ソフトなどにはよく、文字列をアーチ状に配置してカラフルに装飾する機能があります。そのような装飾は、下図のようにWebペー...続きを読む

文字単位で異なるCSSを適用し、1文字ずつ色やスタイルを変える方法HTMLに書いた文字の色をCSS（スタイルシート）で指定する際には、ある要素に含まれる文字全体の色を一括指定するのではなく、1文字ずつが異なる文字色で表示されるように指定できると便利な場合があります。例えば下図のようにです。もしこのよ...続きを読む

ワープロのように、ウェブ上でも文字を平たくしたり細長くしたりしたいワープロなら平体も長体も簡単ワープロソフトでは、文字の横幅だけを伸縮させ、横に平べったい文字(平体)や、縦に細い文字(長体)を作れます。このような文字をウェブ上でも表示させたいと思ったことはないでしょうか。従来なら、文字を画像化してか...続きを読む

各行の左端だけでなく右端も揃えて、両端揃え(均等割り付け)にしたいウェブページ上にの文章は、標準では左端から表示され始めます(※)。そのため、各行の左端は揃って表示されます。しかし、文章中に含まれる文字の種類や使われているフォントの種類によっては、各行の右端は揃わないことがあります。※言語によっては...続きを読む

FontAwesomeとは？FontAwesomeとは、CSSのWebフォント機能を使うことで数千種類のアイコンをテキスト(文字)として表示可能にしたアイコンセットのことです。単なるアイコン画像集とは異なり、あくまでも文字としてアイコンを表示できる絵文字フォントなので、自身のウェブページ上に自由なサ...続きを読む