記事本文を飾り付けてみよう「（その２９）CSS超入門３」

　今回はCSSを利用して、文字をいろいろと飾り付けてみましょう。CSSでは飾り付けの設定も細かくできるようになっているのですが、基本的な部分だけをピックアップしてご説明します。
　それでは、始めましょう。

※CSSを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

強調　→　font-weight:bold;
斜体　→　font-style:italic;
上線　→　text-decoration:overline;
取消線　→　text-decoration:line-through;
下線　→　text-decoration:underline;
点滅　→　text-decoration:blink;

という感じになります。（":"コロンと";"セミコロンの違いに注意！！）

テーブルに関して詳しくは
Wiki超入門１３「テーブルを表示させる方法」
Wiki超入門１４「テーブルの大きさと色を変える方法」
Wiki超入門１５「テーブル中の文字の位置を変える方法」
Wiki超入門１６「テーブルのセルを結合する方法」
をご覧ください。

■文字を強調する（font-weightがboldの場合）

文法）
||<#ffffff' style=font-weight:bold; ``こんにちは||

※補足　分かりやすくするために、セルの色は白に設定しています。以下も同様。

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字を斜体にする（font-styleがitalicの場合）

文法）
||<#ffffff' style=font-style:italic ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字に上線をつける（text-decorationがunderlineの場合）

文法）
||<#ffffff' style=text-decoration:overline; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字に取消線をつける（text-decorationがline-throughの場合）

文法）
||<#ffffff' style=text-decoration:line-through; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字に下線をつける（text-decorationがunderlineの場合）

文法）
||<#ffffff' style=text-decoration:underline; ``こんにちは||

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■文字を点滅させる（text-decorationがblinkの場合）

文法）
||<#ffffff' style=text-decoration:blink; ``こんにちは||

※注　この設定はブラウザによっては、上手く表示されないかもしれません。

結果）

こんにちは

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

今回の設定も、スタイルシートの基本的なことが理解できていれば、そんなに難しくないと思います。
ただ、点滅のところでもご説明しましたが、ブラウザによっては上手く表示されないことがありということを頭に入れておいてくださいね。
いつもの事ながら、いろいろと試してみてくださいね。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「京都写真日記：Wiki文法を使いこなそう」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「京都写真日記：Wiki文法を使いこなそう」さんのページにて、ボタンをお願いします。
「京都写真日記：Wiki文法を使いこなそう」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。