WebデザイナーのためのCSS3実践講座

要素の透過処理

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「rgba()」を使って、要素を透過させる方法にて解説致します。
講師:
03:15

字幕

このレッスンでは rgba を使って 要素を透過させる方法について― 解説していきます まずはダウンロードしてきたこちらの transparent ― というフォルダの中に入っている こちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして こちらがそれらの ファイルを開いた状態です そして こちらの右側では こちらの index.html ファイルを― ブラウザで開いた状態となっています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずはこちらのブラウザの方から 見ていきましょう こちらの写真は背景画像となっていて そして その上に div タグで― 白い枠を作っています そして その中にこの枠が透過されます といったテキストを置いています html ファイルで見ると ちょうど こちらの部分ですね そして こちらのブラウザの方では この白いブロックが透過されて― 後ろの背景写真が透けて見えていますね 今回はこの透過をさせる方法について みていきたいと思います それでは style.css ファイルの方を開きます そして 今回注目して頂きたい部分は こちらの部分となります そして まず 背景色を設定する為の background-color ― という CSS プロパティを 書いていますね そして この後です 本来であれば こちらの上の部分に 書いてあるようなカラーコードで― #ffffff といったように白を 指定するような形ですが― 今回はこのように rgba と書いて ( ) (括弧 括弧閉じる) と書いています この rgba は rgba モデルで 色を指定する方法となっています この括弧の中の左から順番に 赤を表す数値 そして 緑を表す数値― そして 青を表す数値となっていて 一番最後のこちらの値は― 透明度を表す数値となっています このように 255 255 255 とすると 白を表す形になります そして 最後のこちらの透明度ですが 1 が完全に不透明な状態― そして 0 が完全に透明な状態となります 今回は 0.8 という形で設定しているので 微かに透過している状態を― 作り出すことが出来ます このように rgba を使えば 通常の色だけではなくて― その要素に対して透明度を 設定する事が出来る為 このような形で― 後ろの要素が透けて見えるような 表現を行うことが可能です 以上でレッスンは終了です 今回は rgba を使って 要素を透過させる方法について― 解説致しました 以降のレッスンでは 滑らかな要素の動き いわゆる トランジションを― CSS3 で実装する方法について 解説していきますので― そちらも合わせてご覧下さい

WebデザイナーのためのCSS3実践講座

このコースでは、実際にWebデザインを行うときに頻繁に利用するCSS3の新機能と使い方を解説します。具体的にはWebフォント機能やFont Awesomeを使ったアイコンの表現方法、マルチカラムレイアウトや丸角ボックスの作成方法、アニメーションができるトランジション機能やトランスフォーム機能について紹介します。

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

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

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

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