スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeHTML&CSS講座 > CSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて

CSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて

投稿日:2012年12月18日   レベル:初心者    ソフトウェア:

このチュートリアルではCSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて紹介します。


Step1:はじめに

このチュートリアルではCSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて紹介します。

ここで紹介する役に立つクリエイティブなテクニックは、CSS3(カスケードスタイルシート)の使い方についての記事をベースにしています。これらの方法は、ウェブサイト開発に使うのに役立つ方法で、現代のウェブ開発においては、この種の進んだ開発手法を使いこなす必要があります。

今後もCSS3の基本的なヒントや手法をシェアし続けるつもりです。私たちは、もっとトリッキーな方法について発信する準備をしていますので、モチベーション維持のためにご自身の経験をシェアしてください。

Step2:CSS3で端を角丸にする

このチュートリアルではCSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて紹介します。

簡単な方法を使って「角丸」を追加します。うまくいけば、別のCSS3のテクニックが開発の最前線でさらに役に立つでしょう。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 and CSS3 Combinations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rounded-corners {
margin: 50px auto;
width:500px;
color:#fff;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
border:2px solid;
border-radius:25px; -moz-border-radius:25px;
}
</style>
</head>
<body>
<div id="rounded-corners">Rounded Corners by CSS3</div>
</body>
</html>





Step3:CSS3で長方形の影をつける

このチュートリアルではCSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて紹介します。

CSS3について学ぶのにこの記事を役立ていただいていると思いますが、短いコードでできる「長方形の影の効果」は是非ともシェアすべきテクニックです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 and CSS3 Combinations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rectangle-shadow {
box-shadow: 10px 10px 5px #888888;
width:500px;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
margin:0 auto;
color:#ffffff;
}
</style>
</head>
<body>
<div id="rectangle-shadow">Rectangle Shadow by CSS3</div>
</body>
</html>

目次へ戻る

Step4:CSS3を使って画像で作る縁

このチュートリアルではCSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて紹介します。

ここではCSS3で境界線の画像を使って、下の画像を元に、上のような効果を作ります。

このチュートリアルではCSS3を使ったバナーの縁の作り方とCSS3の簡単なテクニックについて紹介します。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 and CSS3 Combinations</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#border-image {
border-image:url(border.png) 30 30 round; -moz-border-image:url(image-border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
width:500px;
padding:5px;
text-align:center;
font-size:20px;
margin:40px auto;
color:#21759b;
}
</style>
</head>
<body>
<div id="border-image">Borders with Image by CSS3</div>
</body>
</html>

目次へ戻る

引用:Web Design Library  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング