スタイルシートマニア
ホームページカスタマイズ Tips
04
Sep
2008
罫線をデザインする
段落の間を分かりやすくする事で可読性を上げられます。 <hr />要素にCSSでデザインを入れます。、これにはborderプロパティを使って罫線を作ります。 .line01 { b […]
02
Sep
2008
リンクをボタンにする
CSSでボタンを作ってみます。ボタンが作れればナビゲーションも割と簡単に作れるようになります。 まず、普通にリンクテキスト同じCSSを作ります。 .button01 a { color: c00; font-weight […]
01
Sep
2008
おもしろリンクアクション
リンクに要素の位置を指定するpositionプロパティを組み合せてロールオーバーした時にテキストを少し動かしてボタンを押したようなアクションを作ってみます。 リンクのboxを作ってその中のリンクに対してこの効果を有効にす […]
31
Aug
2008
link要素の操作
リンク要素は、擬似クラスで訪問済みと未訪問のテキストの色を変更したり、リンク領域のマウスオーバー時のアクションなど色々な表現が可能です。例えばリンクテキストの下線を消してまったり、マウスオーバー時に色を変えるなどの方法な […]
27
Aug
2008
CSSでスモールキャピタル
スモールキャピタルは小文字に対してサイズはそのまま大文字として表示させられる技術です。ちょっとしたアクセントに使えます。 スモールキャピタルは font-variantプロパティで使用します。 #small-capas […]
26
Aug
2008
欧文を使うときの注意
デザインとして欧文で大文字だけを使って単語を表記したり小文字だけを使って表記したりする場合が間々ありますが、これはＮＧです。しつこいようですが、htmlで表示方法を指定してはいけないのです。そして、この欧文に関しては、音 […]
25
Aug
2008
spanを使ったドロップキャップ
firs-letter を使ったドロップキャップはマークアップ時の手間が少ない分、何かと制限が多くていまひとつ思い通りにできない場合があります。そこで、一文字目をspanで囲ってもっと自由な表現が可能なドロップキャップを […]
24
Aug
2008
first-letter擬似要素を使ったドロップキャップ
本文の一文字目を大きくして以後に続く文字を普通のサイズで表現するドロップキャップは雑誌などでよく使われる手法です。 CSSなら、first-letter擬似要素を使って一文字目にスタイルを適用させることができます。 .d […]
23
Aug
2008
読みやすい文字色と背景色
紙媒体に比べるとモニター画面で文字を読むと目が疲れるということが大なり小なり起こります。そこで、テキストと背景色の明度の差を上手く調節して文字を読みやすくさせましょう。 テキストを読みやすくするためには、背景色と文字色の […]