ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。 ※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい [...]
~2008/09/12~
背景でノートの画像を入れて日記風のデザインにするのは間々見かけますが、今回はCSSでunderlineを引いて日記風のデザインを作ってみます。 しかし、単純にtext-decoration: underline;で下線を [...]
~2008/09/11~
行の折り返し位置を指定した見出しをデザインしてみます。 #h2-headline03 { width: 10em; height: 2.5em; margin-top: 3em; [...]
~2008/09/08~
ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。 #h2-headline02 { color: #600; border-bottom: 1px [...]
~2008/09/07~
CSSで便箋風の見出しをデザインしてみます。 backgroundで背景色を指定、colorでテキストカラーを見やすい適当なカラーにして、border-leftで付箋の感じを演出、border-bottomで立体感を出し [...]
~2008/09/05~
段落の間を分かりやすくする事で可読性を上げられます。 <hr />要素にCSSでデザインを入れます。、これにはborderプロパティを使って罫線を作ります。 .line01 { bord [...]
~2008/09/04~
CSSでボタンを作ってみます。ボタンが作れればナビゲーションも割と簡単に作れるようになります。 まず、普通にリンクテキスト同じCSSを作ります。 .button01 a { color: c00; [...]
~2008/09/02~
リンクに要素の位置を指定するpositionプロパティを組み合せてロールオーバーした時にテキストを少し動かしてボタンを押したようなアクションを作ってみます。 リンクのboxを作ってその中のリンクに対してこの効果を有効にす [...]
~2008/09/01~
リンク要素は、擬似クラスで訪問済みと未訪問のテキストの色を変更したり、リンク領域のマウスオーバー時のアクションなど色々な表現が可能です。例えばリンクテキストの下線を消してまったり、マウスオーバー時に色を変えるなどの方法な [...]
~2008/08/31~
スモールキャピタルは小文字に対してサイズはそのまま大文字として表示させられる技術です。ちょっとしたアクセントに使えます。 スモールキャピタルは font-variantプロパティで使用します。 #small-capas [...]
~2008/08/27~
前回のナビゲーションは各項...
ナビゲーション画像を一枚に...
今までは、CSSベースでナビゲ...
WP Cumulus Flash tag cloud by Roy Tanck and Luke Morton requires Flash Player 9 or better.