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

テキストボックスや画像ボックスの角を丸める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「border_radius」を使って、テキストボックスや画像ボックスの角を丸める方法について、解説致します。
講師:
05:32

字幕

このレッスンでは border-radius ― という CSS プロパーティーを使って テキストボックスや画像ボックスの― 角を丸める方法について解説していきます まずはダウンロードしてきた border-radius ― というフォルダの中に入っているこちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして これがそれらの ファイルを開いた状態です そして こちらの右側では こちらの index.html ファイルを― ブラウザで表示させています これらのファイルを使って今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは こちらの index.html ファイルの方を― 確認していきましょう こちらの index.html ファイルには 三つの要素があります まずは id="textbox” が 付いた p タグ そして その p タグの中には テキストが入っています そして 二つ目は id=”photo-01”が 付いた div タグ こちらにはイメージが含まれています 同じく最後に id="photo-02" の div タグがあって こちらも同様に― イメージが設置されています そして こちらの p id=”textbox” ですが― こちらはブラウザ上で見ると こちらの部分となります そして 次の photo-01 id が 付いた div タグはこちらのもの― そして 最後の photo-02 という id が付いた div タグは― こちらの部分となります ここまで確認できたら 次は style.css ファイルを― 見ていきたいと思います こちらのファイルを開きます それでは 順番に見ていきましょう まずは p id="textbox" から その部分はこちらになります まずは width と height で 300 ピクセルの正方形を作っていますね そして バックグラウンドカラーで 背景の色をこういった黄色の色にしています そして 注目して頂きたい部分は こちらの部分となります ここに border-radius: 50% と書いていますね この border-radius というのは ボックスの四隅の角を丸める― といった機能を持った CSS プロパーティーとなります そして そこに設定している値が その丸める範囲を示しています このように border-radius: 50% ― と書くことによってこのように角を丸めて 円形のボックスに変更することが出来ます また こちらの次には overflow: hidden ― としていますね この overflow: hidden を 指定していないと ここの角が― 丸められた部分にテキストが そのまま表示されてきます それでは 逆にこのような形で overflow: hidden ― と書いてあげることによってこの丸められた 角の部分に本来表示されていたテキストを― 隠すことが出来ます このように記述することでこのような 形の物を作ることが出来ます では 次に 二番目の div#photo-01 を― 見ていきたいと思います ブラウザではこちらの部分ですね こちらも基本的には同様です width と height で 384 ピクセルを指定して― まずは正方形を作っています そして border-radius を 50% と設定します そして overflow: hidden と 書くことによって― このように端が丸められた円形の 写真を作り出すことができます 最後にこちらの div#photo-02 をみていきましょう ブラウザですと こちらの部分となります こちらも同様に width と height 384 ピクセルを設定して― まずは正方形を作っています そして 次 border-radius: 100% 0px 100% 0px;― としていますね このように書く事で四隅それぞれ別に その丸める範囲を指定することができます 左から順番に左上 そして 右上 そして 右下 そして 左下― という形になります 今回ですと 左上は 100% 右上は 0px そして― 右下は 100% 左下は 0px といった形になります そして 最後に overflow: hidden ― という形でこれまでどおり 食み出した部分を 隠す処理を入れています このようにすることでこういった形の スケーを生成することできます このように border-radius を 使用することによって四隅の角を丸めて― 丸みを持ったボックスを表現することが 可能になるわけですね この border-radius は 丸角のボタンを作る際にも頻繁に利用する物― となってきますので しっかり覚えておきましょう 以上で レッスンは終了です 今回は border-radius を 使って テキストボックスや― 画像ボックスの角を丸める 方法について解説致しました 以降のレッスンでは box-shadow ― という CSS プロパーティーを使って ボックスに影の効果を付ける方法について― 解説していきますので そちらも合わせてご覧下さい

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

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

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

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

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

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