Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） - スタイルシート 定番テクニック集 - （1）背景画像を使ったボタンの作り方
|
初心者webデザイナーさんのための、ホームページ制作無料講座です。Dreamweaver8を使ったXHTML＋CSSコーディングの方法を紹介します。
スタイルシート初心者の方に役立つように作ってみました。
※Adobe® Dreamweaver® はAdobe Systems Incorporated（アドビ システムズ社）の商標です。
|
（1）背景画像を使ったボタンの作り方
|
6分0秒
 |
|
|
|
|
Tweet |
|
|
解説
スタイルシートを使ったwebデザインの定番ともいえるテクニックをいくつか紹介していこうと思います。スタイルシートなので、もちろん、エディタだけを使って作ってもokですが、この講座はDreamweaverの講座なので、ドリームウィーバーのエディタ機能を使って効率よくやってみましょう。 １回目は、画像を使ったボタン。マウスオーバーで色が変わります。 CSSでの背景画像を使って、マウスオーバー時には、背景画像の位置指定を変えて、色が変わるような動きをつけています。 ボタンのテキストは、text-indentで大きな数字を入れて飛ばして、一見非表示にしています。 動画の最後で、画像をどんなふうに作ってあるかも紹介してますので、参考にしてみてくださいね。 ＊＊＊＊＊ 最近作った大阪のポータルサイトです。 京橋タウンガイド グローバルナビゲーションの上にある３つのボタンは、今回の動画で紹介した方法で作りました。 ＊＊＊＊＊ このサイトはxoopsで構築しました。 地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。 URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。 xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。 デザイン：webの森 協力／xoopsシステム構築：A-XYZ |
 |
|
カテゴリー内最新記事
マニュアル カテゴリ一覧
マニュアル エントリ一覧