文章を中央寄せにする

 文字装飾  No Responses »
10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<p class=”tcenter”>このclass=”tcenter”を記述したタグ内に記述された文章を中央寄せで表示する。<br/>改行すると良く分かるかも？</p>

CSSソース

.tcenter {text-align:center;}

サンプル表示

このclass=”tcenter”を記述したタグ内に記述された文章を中央寄せで表示する。
改行すると良く分かるかも？

解説

HTMLソース

文章を中央寄せにしたい箇所のタグに、スタイルシートで設定したclassを指定します。
ここでは、<p class=”tcenter”>～文章～</p>としています。

CSSソース

.tcenter {text-align:center;}と記述します。
これは、class=”tcenter”を指定したタグでくくられた文章を「中央寄せで表示する」という意味です。
text-alignがテキストをどこ寄せにするのかを指定する部分で、centerで具体的に中央に寄せるということを指定しています。

文字に下線を引く

 文字装飾  No Responses »
10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

このclass=”ub”を記述したタグ内に記述された<span class=”ub”>文字に下線(アンダーバー)</span>を引く。

CSSソース

.ub {text-decoration:underline;}

サンプル表示

このclass=”ub”を記述したタグ内に記述された文字に下線(アンダーバー)を引く。

解説

HTMLソース

文字に下線を引きたい箇所のタグに、スタイルシートで設定したclassを指定します。
ここでは、<span class=”ub”>文字に下線(アンダーバー)</span>としています。

CSSソース

.ub {text-decoration:underline;}と記述します。
これは、class=”ub”を指定したタグでくくられた箇所に「下線を表示する」という意味です。
underlineが下線ということを指定しています。
なお、文字の上に線を引きたい場合はunderlineの代わりにoverlineと書けばOKです。
例)文字の上に線を引きたい時のCSS
.ob {text-decoration:overline;}

文字の大きさを固定する

 文字装飾  No Responses »
10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

<div class=”fixsize”>このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。</div>
<div>ブラウザメニュー「表示」→「文字のサイズ」を変更して、その他のエリアとの差をご覧下さい。</div>

CSSソース

.fixsize {font-size:14pt;}

サンプル表示

このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。
ブラウザメニュー「表示」→「文字のサイズ」を変更して、その他のエリアとの差をご覧下さい。

解説

HTMLソース

文字の大きさを固定したい箇所のタグに、スタイルシートで設定したclassを指定します。
ここでは、<div class=”fixsize”>このclass=”fixsize”を記述したタグ内のみ、文字の大きさを固定化する。</div>としています。

CSSソース

.fixsize {font-size:14pt;}と記述します。
これは、class=”fixsize”を指定したタグでくくられた箇所の文字を「フォントサイズ14pt(ポイント)で表示する」という意味です。
なお、14という数字を小さくすれば小さい文字で固定、大きくすれば大きい文字で固定することも可能です。

注意

小さすぎる文字で固定してしまうと目の悪い方には非常に見づらいページとなってしまいます。
デザイン上どうしてもメニュー幅又は高さを固定したくて・・・。等といったやむをえない場合を除いては固定はしない方が良いと思います。
また、FireFox1.5やOpera9等の新しいブラウザでは、上記の様に文字サイズを固定しても、文字サイズの拡大・縮小が出来るようになっています。
もう、文字サイズの固定という考え方自体が古いものになりつつあるのかもしれません。

文字を斜体にする

 文字装飾  No Responses »
10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

class=”stritalic”が記述されたspanタグで囲んだ文字だけが<span class=”stritalic”>斜体に</span>なる。

CSSソース

.stritalic {font-style:italic;}

サンプル表示

class=”stritalic”が記述されたspanタグで囲んだ文字だけが斜体になる。

解説

HTMLソース

文字を斜体にしたい箇所のみspanタグでくくって、スタイルシートで設定したclassを指定します。
ここでは、<span class=”stritalic”>斜体に</span>としています。

CSSソース

.stritalic {font-style:italic;}と記述します。
これは、class=”stritalic”を指定したタグでくくられた箇所の文字を斜体にするという意味です。
なお、font-style:italic;だけでなく、font-style:oblique;でも斜体を表示することができます。

文字を太字にする

 文字装飾  No Responses »
10月 122011
 

灰色背景がサンプルソース薄緑背景が実際の見た目

サンプルソース

HTMLソース

class=”strbold”が記述されたspanタグで囲んだ文字だけが<span class=”strbold”>太字に</span>なる。

CSSソース

.strbold {font-weight:bold;}

サンプル表示

class=”strbold”が記述されたspanタグで囲んだ文字だけが太字になる。

解説

HTMLソース

文字を太字にしたい箇所のみspanタグでくくって、スタイルシートで設定したclassを指定します。
ここでは、<span class=”strbold”>太字に</span>としています。

CSSソース

.strbold {font-weight:bold;}と記述します。
これは、class=”strbold”を指定したタグでくくられた箇所の文字を太字にするという意味です。

 Older Entries  Newer Entries