趣味でいろんな事やってます。今はテンプレートやカスタマイズ方法 HTML CSSについて書いています。『完成!』とか『クリア!』と達成感を味わいたい。 そんなこんなで へたのヨコズキ 趣味紹介ページです。
 
 
 
 
 
 
スポンサーサイト
 
 
【--/--/-- --:--】
 
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
テキストやリンク文字の指定
 
 
【2006/03/13 10:36】
 
 
テキストやリンク文字のスタイル、色、フォント指定のやり方を紹介しています
文字色の設定
スタイルシートで文字色を指定するにはcolorを使います。
例)
p {
color : #666666
}

上の例)はP要素部分のテキストが#666666(グレー色)になります。


文字の大きさを指定
font-sizeで指定します。文字の大きさの単位はptpxなど色々な単位で指定できますのでお好きな単位でやってください。
例)
p {
color : #666666;
font-size : 12pt
}

上の例)はP要素部分のテキストが12ptの大きさになります。


行の高さを指定
line-heightで指定します。
例)
p {
color : #666666;
font-size : 12pt;
line-height : 1.2em
}

上の例)はP要素部分の行高さが1.2em(文字の1.2倍)になります。

行の高さの単位
em その時のフォントの大きさを1とした時の大きさ
% 100%で文字の大きさと行の高さが同じになります。
normal ブラウザが勝手に大きさを指定します。
単位無し 文字の大きさを1とした時の割合になります。(emと同じなのかも)


行揃え
text-alignを使ってテキストの行揃えを指定します。
例)
p {
color : #666666;
font-size : 12pt;
line-height : 1.2em;
text-align : center
}

上の例)はP要素の文字が中心揃えになります。

この方法での揃え方の種類は下の3種類のいずれかです。
center 中心揃え
left 左揃え
right 右揃え


行に対する上下方向の文字位置指定
vertical-alignを使って文字を上付き文字にしたり 下付き文字にしたり 画像に合わせて文字の位置を指定できます。
例)
p {
color : #666666;
font-size : 12pt;
line-height : 1.2em;
text-align : center;
vertical-align : top
}

上の例)はP要素の文字が上付き文字になります。

上下方向の文字位置指定の種類
baseline ベースラインに揃える(標準)
super 上付き文字
sub 下付き文字
top 上に揃える
middle 真ん中に揃える
bottom 下に揃える

super(上付き) baseline(標準) sub(下付き)

top(上揃え)
middle(中揃え)
bottom(下揃え)
IE6.0にはインラインレベル要素に対するbottomは対応していません。

上のソースは下記の様になっています。
<span><img src="http://blog-imgs-18.fc2.com/h/e/t/hetanoyokozuki/img2.gif" style="vertical-align:揃え位置">文字</span>




文字のデコレート
文字に下線をつけたり上線をつけたり 点滅させたりできます。
underline 下線
overline 上線
line-through 取り消し線
none デコレート無し

例)
要素 {
text-decoration : underline overline
}

上の例)は上下線になります。
上下線
デコレートを組み合わせて 色んなタイプを作れます。
上下線



リンクのスタイル指定
疑似要素を使ってテキストリンクした時のマウスの動作によって色が変わったり様にできます。
記述の順番を守らなければならないようで
a:link まだ見ていないページへのリンク
a:visitid すでに見たページへのリンク
a:hover リンクにマウスが重なった時
a:activ リンク部分をクリックした瞬間
の順番で記述してください。
要素と組み合わせたりしても使えます。

例)
a:link {
color : #666666
}
a:visitid {
color : #ff0099
}
a:hover {
color : #0000cc
}
a:activ {
color : #009900
}


スタイルにtext-decorationなどを使って下線や上線を出したりもできます。
指定の仕方は上記を参照してください。
スポンサーサイト

 賞金クリックランキング ブログランキング・にほんブログ村へ FC2ブログランキング 人気ブログランキング
 
 
 
▲TOP
 
 
 
 
この記事に対するコメント
 
 
はじめまして
テンプレート早速お借りいたしました。
そこで質問なのですが、記事中の文字にリンクをしたところ、文字サイズが小さくなってしまうのですがどうすれば良いでしょうか?fontサイズの数字を変えたところ一応サイズは変わったのですが、マウス(矢印)を重ねると元の大きさに(小さく)なってしまいます。リンクさせる場合には、他のサイズも何か変えないといけないのでしょうか?ご回答宜しくお願いいたします。
【2008/02/07 03:38】 URL | うにひん #nOdClviI [ 編集]

 
 
 
▲TOP

 
 
 
 
この記事に対するコメント投稿
 
 















 
 
 
▲TOP

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。