スタイルシートマニア
ホームページカスタマイズ Tips
21
Aug
2008
リストマーカーのバリエーション
ol要素やul要素を使ったリスト（箇条書き）の先頭に表示されるリストマーカーは、list-style-typeで自在に変更できます。 .lisr-style ul { list-style-type: dis […]
20
Aug
2008
画像の隣にくるテキストの縦揃え
画像に続いて文字を表示させる時の縦の位置を調整するスタイルです。 縦方向の位置を調整する場合は、vertical-alginプロパティを使います。 .vertical-algin_middle img { v […]
19
Aug
2008
段落の始めに一文字分のインデント
段落の始めにインデント付けるなんて「スペース入れときゃいいじゃん」なんて思う事もありますが、htmlで表示方法を指定すると言うことになるので厳密に言う間違いです。 段落のインデントには、テキストを含むブロック要素にtex […]
18
Aug
2008
文字と文字の間隔を調整する
文字が多いホームページなどは、文字と文字の間隔を適度に取ってあげるとより読みやすくできます。 文字間隔を調整するには、文字間隔を調整したいテキストを含むブロック要素でletter-spacingプロパティを使って調節しま […]
17
Aug
2008
文字の行揃え
文字の行揃えも基本的なデザイン要素の１つです。 文章の行揃えはテキストを含むブロック要素に対してtext-alginプロパティで「left（左）」「center（中央）」「right（右）」で指定します。 .text- […]
17
Aug
2008
行の間隔を調整する
行の間隔で文字の読みやすさは格段に変わります。 行間を調節するには、テキストを含む要素に対してline-heightプロパティで間隔距離を指定します。 body { line-height: 1.5em; } […]
15
Aug
2008
文字の背景に色をつける
今回は文字の背景に色をつけてみます。 テキストを含む要素に対してbackground-colorプロパティで売りを指定します。 .text-bg01 { background-color: #f00; […]
14
Aug
2008
文字に罫線を引く
以前、text-decorationを使って文字にラインを引きましたが、これだと文字の上下だけにしかラインが引けない上に装飾パターンも全く選べないただラインを引く事しかできませんでしたが、borderプロパティを使うこと […]
13
Aug
2008
CSSで文字サイズ変更
実際ブラウザで文字サイズを変更できる事をしっているのは、我々ホームページ制作にかかわる人間か、そこそこパソコンが使い慣れた人間で、ほとんどの人は文字サイズが変えられる事を知らないまま使っているのではないかと思います。 そ […]