はじめてのHTML&CSS入門

CSS3の使い方(1)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
実際にWebサイトで普及しているCSS3をご紹介します。角丸や、影をつける方法を学びましょう。
講師:
07:27

字幕

このレッスンでは CSS3 という新しい規格で登場したプロパティについて学びます。それでは chapter03 lesson14 のファイルをブラウザで見てみましょう。まず begin と final を交互に見てみましょう。これが beginこちらが final です。begin と final。final では影がついていたり1の数字が丸くなって少し移動していたり三重県の文字が少し浮き上がっているように見えていたり更に、この見出しの背景の黒い所が少し透けています。また、このボタンにしてもbegin では角ばっているのに対してfinal では丸まっているこれはすべて画像ではなくてCSS3 によって実現できます。それでは begin のファイルを開いてSublime Text で記述をしていきましょう。まず数字の1の部分を装飾していきましょう。数字の1は ranking というクラスがついています。ですので、この ranking のクラスの終点の所で改行、そして新しいプロパティborder-radiusハイフンが要ります。border ハイフン radiusそしてコロンそしてサイズを 15pxと入力してみます。 そして保存をしてブラウザの方を開いて確認です。更新します。そうすると少し丸まったように見えますがこれを正円にできる方法があります。また Sublime に戻ります。この ranking というエリアは幅が 40 の、高さが 40 です。そして角は4つあります。なので、この丸みが20であればぴったり正円になるというデザインにすることができます。また、位置を動かすためには基準位置が今左上になっていますのでtop 0、left 0 ではなくマイナス方向に20そして単位はピクセルleft もマイナス方向に20ピクセルと入れてブラウザで確認します。ブラウザで更新をします。そうするとこのように位置も動き丸の形になりました。では今度はテキストシャドウという影をつけるプロパティをこの「三重県」にかけていきましょう。Sublime Text を開き今度は area の位置の終点でtext-shadow と打ちます。そしてプロパティの値ですがまず最初の数字がX 軸のオフセットオフセットというのはズレです。影を右の方向に 2px ずらすという意味です。そして縦方向にも 2px ずらします。そして影のぼかしを設定できますのでここに 5px最後は影の色を指定することができます。 影の色は #900 と打ち込んで上書き保存。そしてブラウザに切り替えて更新をしてみます。そうすると僅かですが文字の後ろにちょっと影がついて浮き上がったように見せることができました。更に、この囲っている place の箱も装飾していきます。では Sublime Text に戻りplace というクラスを捜してここに追行していきます。まず丸みをつけるborder-radius を10px そして箱に影を付ける時はbox-shadow というプロパティがあります。こちらも右方向のずらし縦方向のずらしなどを入れてぼかすこともできますので入れてみましょう。まずは、 3px 右方向にずらして更に 3px 下方向にずらしてそして影のぼかし具合を10px と指定して影そのものの色味を #ccc とグレーを指定そして上書き保存をしてブラウザで見てみましょう。更新、するとこのように影がついたと思います。丸みもついていますね。では Sublime に入って今度はボタンの装飾もしていきましょう。ボタンはリンクです。リンク は a タグでできていますのでplace の中の a を見つけてあげます。そして丸みをつけるプロパティborder-radiusそして丸みを 10pxそして上書き保存をしてブラウザに切り替えて更新。 それでは最後に「伊勢神宮」の後ろの黒い帯を透明にしてみたいと思います。それでは Sublime Text に戻ってタイトル は place の hi ですのでこちらの背景色をコントロールします。背景色を rgba と書いて( ) で、そして中に 0,0,0この3つが RGB 位置なんですが更にカンマを追加して 0.7これが透明度になります。70%の透明度ということになりますので上書き保存をしてブラウザの方で更新をすると3割だけ透過という状態になっています。うまく使うと奥行のあるデザインなどが可能になります。CSS3 はInternet Explorer の9以降であれば問題なく動作しますしモダンブラウザいわゆるFirefox や Chrome、スマートフォンでも問題なく動作します。是非使ってみてください。このコースでは CSS3 の新しいプロパティを紹介しました。

はじめてのHTML&CSS入門

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

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

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

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

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