スタイルシートマニア

ホームページカスタマイズ Tips

年月の記事

ナビゲーションメニュー(実用編Ⅰ)

28

Sep

2008

ナビゲーションメニュー(実用編Ⅰ)

さて、今まではCSSだけでナビゲーションを作ってきましたが、CSSだけではやれることに何かと制限が多いので画像を取り入れたナビゲーションを作ってみます。 今回は前回使ったCSSナビゲーションに背景の画像を入れて見栄えをも […]

Author:hideo
Comments:0
ナビゲーションメニュー(応用編Ⅱ)

21

Sep

2008

ナビゲーションメニュー(応用編Ⅱ)

今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。 このタイプは、1つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列 […]

Author:hideo
Comments:0
ナビゲーションメニュー(応用編Ⅰ)

18

Sep

2008

ナビゲーションメニュー(応用編Ⅰ)

前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。 今回のポイントは、#menu04 li のdisplay: をinlin […]

Author:hideo
Comments:0
ナビゲーションメニュー(基本Ⅲ)

16

Sep

2008

ナビゲーションメニュー(基本Ⅲ)

今回はナビゲーションにボタンのような効果を付けてみます。 今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス(出っ張り)のような表現を演出する事にあります。 […]

Author:hideo
Comments:0
ナビゲーションメニュー(基本Ⅱ)

14

Sep

2008

ナビゲーションメニュー(基本Ⅱ)

今回は先日作ったナビゲーションをちょっとアレンジしてみます。 基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。 <div id=&qu […]

Author:hideo
Comments:0
ナビゲーションメニュー(基本Ⅰ)

12

Sep

2008

ナビゲーションメニュー(基本Ⅰ)

ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。 ※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい […]

Author:hideo
Comments:0
罫線を使って日記風テキスト

11

Sep

2008

罫線を使って日記風テキスト

背景でノートの画像を入れて日記風のデザインにするのは間々見かけますが、今回はCSSでunderlineを引いて日記風のデザインを作ってみます。 しかし、単純にtext-decoration: underline;で下線を […]

Author:hideo
Comments:0
行の折り返し位置を指定した見出し

08

Sep

2008

行の折り返し位置を指定した見出し

行の折り返し位置を指定した見出しをデザインしてみます。 #h2-headline03 { width: 10em; height: 2.5em; margin-top: 3em; line-height: 1.2em; […]

Author:hideo
Comments:0
CSSで見出しをデザイン(擬似クラス:first-letter)

07

Sep

2008

CSSで見出しをデザイン(擬似クラス:first-letter)

ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。 #h2-headline02 { color: #600; border-bottom: 1px solid #600; […]

Author:hideo
Comments:0
CSSで見出しをデザイン(付箋風)

05

Sep

2008

CSSで見出しをデザイン(付箋風)

CSSで便箋風の見出しをデザインしてみます。 backgroundで背景色を指定、colorでテキストカラーを見やすい適当なカラーにして、border-leftで付箋の感じを演出、border-bottomで立体感を出し […]

Author:hideo
Comments:0