CSSでボタンのロールオーバーをデザインする【1】：CSS 3分コーディング
CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。 はじまりはじまり。 今回のテーマ：CSSでボタンのロールオーバーをデザインする【1】 マウスカーソルを重ねたときに、デザインが変わるボタンをCSSだけでデザインする方法をご紹介します。 :hover疑似クラスとbackground-imageを使います。CSSの基礎知識がある方やCSS講座を受けていただいた方ならさくっとお気付きかもしれませんが、ちょっとした工夫があったりします。先日の講座でもご質問いただいたので改めてご紹介します。 まず、根本の発想は「マウスカーソルが重なったときにbackground-imageで画像を切り替える。」わけですが、「別の画像ファイル」ではなく、「同じ画像ファイル」を使います。 ポイントは、背景画像をずらす！です。 このようにします。 <ul> <li
CSSでボタンのロールオーバーをデザインする【2】
CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。 はじまりはじまり。 「CSSでボタンのロールオーバーをデザインする【1】」とは違う方法をご紹介します。 以前ご紹介した方法は、ロールーオーバーする前、した後、いずれもbackground-imageで画像を配置していました。つまり、HTMLソース内には画像はありません。 ソースはこんなかんじでした。 <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> 今回は、img要素を使って画像を配置していて、なおかつCSSのみでロールオーバーをデザインする方法をご紹介します。 このように、背景画像ではなくimg要素を使いたいケースもある
m-School 公式ブログ - 短期集中講座のアドビ認定校、企業研修も 検索結果
こんにちは。ブログにはご無沙汰な感じのエンディーです。 先日、m-School新講座 CSS3と未来のWebデザイン実践講座 が開催されました。 講座の詳細はこちら CSS3と未来のWebデザイン実践講座 この講座に参加された受講者より受講後の感想をいただきました！ 詳細な感想をいただき誠にありがとうございます そこで、いただいた感想をご紹介致します。 受講しようかどうか迷っている方は、参考になさってください。 受講後の感想 4月26日にCSS3と未来のWebデザイン実践講座を受講しました。 以下、内容と感想です。 使用ソフト Dreamweaver CS5 最初にCSS3の記述のみで、見栄えのするボタンの作成をしました。 グラデーション、角丸、ボックスシャドウ、テキストシャドウなどの効果を記述します。 すると、従来、画像編集ソフトで作成していたモノがCSSの記述のみでできます。 また、マ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
