ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング