ホームページカスタマイズ Tips
Sep
さて、今まではCSSだけでナビゲーションを作ってきましたが、CSSだけではやれることに何かと制限が多いので画像を取り入れたナビゲーションを作ってみます。 今回は前回使ったCSSナビゲーションに背景の画像を入れて見栄えをも […]
今回は、li aの横幅を固定したタイプのナビゲーションを作ってみようと思います。 このタイプは、1つのli aに入りきる文字数を見計らいながら設定しなければいけません。今まで使ってきた文字列は入りきれなかったので、文字列 […]
前回までは、縦に項目が伸びていく縦軸のナビゲーションでしたが、今回はちょっとればるアップして横に項目を並べていく横軸のナビゲーションを作成します。 今回のポイントは、#menu04 li のdisplay: をinlin […]
今回はナビゲーションにボタンのような効果を付けてみます。 今回のポイントはborderプロパティでoff時にoutset、hover時にinsetを使う事でボタンのエンボス(出っ張り)のような表現を演出する事にあります。 […]
今回は先日作ったナビゲーションをちょっとアレンジしてみます。 基本的には先日作成したものと同じ仕様ですが、今回は見た目をシンプルにして、ロールオーバーした時のアクションに一工夫加えてみます。 <div id=&qu […]
ナビゲーションメニューはホームページ制作において必要不可欠なパーツと言えます。 ※大前提として、マージンその他もろもろの設定はbass.cssでリセットしているものとします。詳しくは、CSS初期設定のリセットをご覧下さい […]
背景でノートの画像を入れて日記風のデザインにするのは間々見かけますが、今回はCSSでunderlineを引いて日記風のデザインを作ってみます。 しかし、単純にtext-decoration: underline;で下線を […]
行の折り返し位置を指定した見出しをデザインしてみます。 #h2-headline03 { width: 10em; height: 2.5em; margin-top: 3em; line-height: 1.2em; […]
ドロップキャップで使った:first-letter 擬似クラスを使って見出しをデザインしてみます。 #h2-headline02 { color: #600; border-bottom: 1px solid #600; […]
CSSで便箋風の見出しをデザインしてみます。 backgroundで背景色を指定、colorでテキストカラーを見やすい適当なカラーにして、border-leftで付箋の感じを演出、border-bottomで立体感を出し […]
© COPYRIGHT 2015. "Source Marine " All Rights Reserved.