はじめてのHTML&CSS入門

CSS3の使い方(2)

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グラデーションやアニメーションのCSSをご紹介します。また、ブラウザに関する注意点もご紹介します。
講師:
09:02

字幕

このレッスンでは CSS3 で新しく追加されたグラデーションと動きをつけるトランジションについて学びます。では Chapter03 lesson15 のファイルをブラウザで見てみましょう。final のファイルを見てみるとこの「詳しくはこちら」というボタンがあります。このボタンにマウスをホバーさせると角が丸くなってそして色が変化しています。また、色味も明るい色から暗い色へのグラデーションがついているので立体感があるように見えます。begin の方と見比べてみるとやはりボタンの立体感が違う気がしますね。ではこの CSS を早速書いてみましょう。Sublime Text に切り替えてbegin のスタイルシートを編集していきます。ボタンは a というリンクのタグで作られています。そして既にボタンの形となる CSS は入っていますのでここにグラデーションの CSS を書いていきましょう。グラデーションは background の一部となっています。ですので、この下に background という記述をして少し特殊な書き方を学びましょう。webkit というものを書いてlinear-gradientこれで webkit というブラウザエンジンを使ったブラウザにきくように書かれたことになっています。 そして gradient の中身を( ) の中に書いていきます。まず上からを示す topそしてカンマで別の値を書くことができます。ここに色を書きます。今回は #fb4 そして半角スペース0% 、上の0%真上の位置からカンマそして終点の #また色を書きます。f90 半角スペース終点までという意味の100%と書きます。そして終点ではセミコロンです。このように線形のグラデーションはlinear-gradientそして中身に上からこの色で下までこの色で、というような書き方ができます。では、上書き保存をしてブラウザの方で見てみましょう。ブラウザを更新します。更新するとわずかですが明るいオレンジの色が入ったことによってこのボタンに立体感がついたようになりました。それでは、マウスをホバーさせた時に別のグラデーションを指定してみましょう。また Sublime に戻ります。Sublime に戻りましたらこの複雑な書式を書くのは大変ですのでこの行を選択してコピーそしてその下にある「リンクにマウスがホバーした時」というセレクタが既に書いてありますのでここにペーストします。ペーストしたら色味だけを変えてみましょう。 f88 そして次の色こちらを f75としました。それでは上書き保存をしてブラウザの方で見てみましょう。一度更新をします。そしてマウスで触ってみると明るいピンクから少し深いピンクに行くようなさりげないグラデーションがかかっています。こういったさりげないグラデーションを使った方が派手なグラデーションよりも立体感を演出したり上品な雰囲気にすることができます。次はアニメーションをかけてみましょう。Sublime Text に戻ります。アニメーションするにはまず準備が必要です。今回はボタン a タグに対してその準備をします。transition というプロパティを書きます。そして中身は transition というのは移り変わりという意味です。CSS で移り変わりあるものをアニメーションとして表現してくれます。そしてその移り変わりの対象を例えば padding だけもしくは border だけというように指定できるのですが今回は all としてあげれば全てのものをアニメーションの対象としてくれます。そしてアニメーションは時間がありますのでここに 0.1 秒これは 0.1 second の S を単位として使えます。 そしてアニメーションの加速度つまりだんだん速く動くのかゆっくりからスタートするのかそういったイージングの効果をつけることができますが今回は linear という等速で動くアニメーションを指定しました。ただ、これだけでは準備が完了しただけですのでホバーしたときに何らかの変化を与えてあげたいと思います。なので、今回は既に丸みがあるborder-radius をもっと丸めてみるというプロパティを書いてみます。border-radius そして値の方は20px としました。つまりもともと 10px だったものがマウスをホバーした時に20px に変わるもしも transition を指定していなければマウスがホバーした瞬間に一瞬で 20px になりますがtransition を指定したことによって0.1 秒という間をもって変化することができます。それでは上書き保存をしてブラウザで確認してみましょう。更新をします。ブラウザを更新してマウスをボタンに重ねるとこのように 0.1 秒で border-radius の丸みがアニメーションします。他にも高さをコントロールしたり幅をコントロールしたり余白をコントロールしたりと非常に応用が利くプロパティです。 では又、Sublime Text に戻ります。ただ、今回のような書き方ベンダープレフィックスのベンダーはブラウザの開発元です。今回は webkit となっていますけれども例えば Firefox の場合はMozilla Firefox ですのでMozilla というベンダープレフィックスをつけてあげなければいけません。ですので、またこの行をコピーしてFirefox 用の行を追加します。ペーストをして行を複製しました。そしてこの webkit という所をmoz と書き換えます。こうすることで Firefox 用の指定になりました。そして同様にホバーの方のグラデーションもコピーをとって、ペーストをしてそして webkit の部分を moz と書いてあげます。そして保存をして今度はブラウザで又、確認をしますけれどもwebkit でできている Chrome では今まで通り変化はありません。それでは Firefox でもファイルを見てみましょう。レッスンの begin フォルダを開きHTML をドラッグ&ドロップでFirefox のアイコンに落とします。そうすると Firefox でファイルが開くので同じようにマウスをホバーしたりグラデーションが、かかっているかどうかを確認します。 このように CSS3 はベンダープレフィックスが必要なものがまだまだあります。まずはプロパティ名で検索をしてちゃんと、どのように使ったら良いかを調べてから使うようにしてみてください。このレッスンでは CSS3 の新しいプロパティについて学びました。

はじめてのHTML&CSS入門

Webデザインの基本はHTMLとCSSにあると言っても過言ではありません。ブラウザにそのページの論理構造を正しく伝えるためのHTMLと、そのページをいかに見せるかを設定するCSSの二本柱をきちんと理解する必要があります。このコースでは前半でHTMLとCSSの基本を学んだのち、後半ではCSSの実際の応用の仕方や各種ツールの使い方などについて学びます。

3時間35分 (38 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。