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

CSS3でロゴの作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
CSS3を使って、簡単なロゴマークを作成する方法について、解説致します。
講師:
03:53

字幕

このレッスンでは CSS3 を使って 簡単なロゴマークを作成する方法について― 解説していきます まずはダウンロードしてきたこちらの logo-with-css3 ― というフォルダの中に入っているこちらの index.html ファイルと― style.css ファイルを エディタで開いて下さい そして こちらがそのファイルを 開いた状態です そして こちらの右側に表示されているのが こちらの index.html を― ブラウザで表示させたものとなっています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 今回のレッスンはこれまでのレッスンで 学んできた CSS3 を使って― 一つの簡単なロゴマークを作ってみよう といったものになります 今回はこちらに表示されている この様なロゴマークを作ってみたいと思います それでは まず index.html の方から― 見てみましょう こちらのファイルには まず div タグがあって― その中にフォントーサムの専用の HTML タグ i タグが入っています そして こちらの i タグには fa-pagelines ― というアイコンが指定されていますね これを指定することによってこのような 植物のアイコンを表示させる事が可能です それでは 次にこちらの style.css ファイルを見てみましょう こちらの部分でこのロゴマークの 円形の部分ですね こちらの部分を定義しています まずは width と height を それぞれ 250 ピクセルにして― 正方形を作っています そして line-height: 250px ― として こちらに表示されている こちらのアイコンフォントですね これを円の中心に持ってくるようにしています そして color プロパティを使って こちらのアイコンフォントの色を― 白色に設定しています そして こちらのフォントサイズ 210 ピクセルで― こちらのアイコンフォントの 文字の大きさを決定しています 更には text-align: center; ― とすることでこのアイコンフォントを 横幅のちょうど真ん中に― 設置するようにしています そして 次に border-radius を指定して― そして 四隅全てに 50% を指定しています こうすることによってブロックの四隅の 部分が丸められてこういった円形を― 作り出す事が可能です 更に background-color ということで― こちらの円の中の背景部分の色ですね こちらの色を緑色にしています そして 最後にこちらの box-shadow ですね こちらの部分でまずは こちらの白い枠線ですね この部分を作っています これがこちらの部分ですね そして 次に 更にその周りにある 緑の枠線 この部分を定義しています そして 最後にこちらの部分 この部分でこの枠の外にあるわずかな影 ドロップシャドーですね こちらを作り出しています このように書く事でこういった簡単な ロゴマークを CSS だけで― 生成する事が可能です 以上でレッスンは終了です 今回は CSS3 を使って 簡単なロゴマークを作成する方法について― 解説致しました 今回のレッスンをもって この CSS3 のコースは終了となります これまで学んできたように CSS3 を使えば 様々な表現を― ウェブ上で行う事ができるようになります 是非 積極的にウェブサイトの制作に 取り入れていきましょう

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

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

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

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

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

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