戻る
CSS3でデザインをカスタマイズする
Webページのデザインをカスタマイズするには、CSS3の設定を既存の設定に追加します。たとえば、ナビゲーションバーのデザインをCSS3の角丸とグラデーションの機能でカスタマイズする場合、以下のようにbackground-radiusとbackgroundの設定を追加します。
nav ul {font-size: 0.75em;
margin-top: 0;
margin-bottom: 10px;
margin-left: 0;
padding-left: 0;
height: 30px;
background-color: #333333;
border-radius: 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#777777), color-stop(50% #444444), color-stop(51% #333333), to(#555555));
background: -webkit-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%);
background: -moz-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%);
background: -o-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%);
background: -ms-linear-gradient(#777777 0%, #444444 50%, #333333 51%, #555555 100%)}
既存のCSS2.1の設定でナビゲーションバーを表示したもの。
CSS3の設定を追加してデザインをカスタマイズしたもの。
なお、CSS3に未対応のブラウザではCSS3の設定は無視され、既存のCSS2.1の設定を利用して表示されますので、レイアウトが崩れるといった心配をする必要はありません。
Internet Explorer 8以前での表示。既存のCSS2.1の設定で表示されます。