※回答一覧

 出題者   カテゴリ   作成日

赤間　公太郎		 ウェブ制作担当 2014-06-24 17:54:55
 問題   ヒント   回答数 
■使えるCSS3プロパティ・セレクタ

CSS3では、角丸やグラデーションなどこれまでは画像を用いたりJavaScriptを駆使して行っていたデザインをCSSのみで表現できるようになりました。
そこでCSS3で使ってみた(もしくは使ってみたいと思っている)プロパティ・セレクタで「これは便利!これは使える!」と思ったものを教えてください。

1.　便利・使えるプロパティ・セレクタ
2.　何を行う目的で使用しましたか?もしくは使ってみたいと思っていますか?
3.　以前はその目的を実現するためにはどのようにやっていましたか?(JavaScript・画像など?)		 CSS3まだ使ったことないよ！という人は、ぜひ下記などをご覧ください。対応ブラウザなどの注意はありますが、便利な機能は多いです。

▼CSS3 レイアウトに使える便利なbox系プロパティ
http://zxcvbnmnbvcxz.com/css3-layout/

▼CSS3の新機能をご紹介！CSS3プロパティまとめ（サンプル付）
http://www.hp-stylelink.com/news/2013/08/20130822.php		 5

 

メンバーの回答一覧　お疲れ様でした！
※講師コメント詳細は冊子に掲載されています。

なるほど
票数		 回答 講師コメント
1 chichichi
1.　便利・使えるプロパティ・セレクタ
「box-shadow」、「border-radius」
「opacity」

2.　何を行う目的で使用しましたか?もしくは使ってみたいと思っていますか?

・「box-shadow」 一覧などの小ぶりな写真が複数並ぶときに使用。
・「border-radius」 ちょっとした囲みボックスが簡単に作れる。
・「opacity」 imgタグへのロールオーバー代用。

後で色や設定も簡単に変更できて、便利です。

3.　以前はその目的を実現するためにはどのようにやっていましたか?(JavaScript・画像など

・「box-shadow」「border-radius」
　　…背景画像で作ったり、一枚の影付き画像にしたり。
・「opacity」
　　… ロールオーバー用画像を作ったり、または何もしない(ロールオーバー効果なし)。		 金 (赤間　公太郎)
box-shadowとborder-radiusは、CSS3が注目されるきっかけになったプロパティでもありますね。これまでは画像でしか表現できなかったものを、同等のクオリティでCSSで表現できるようになりました。 画像と同等の仕上がりになりますが、手法が変わるだけで、手直しや追加など、後々の調整が格段にしやすくなります。 そして、opacityはロールオーバー効果に使用できる、非常に使い勝手のよいプロパティですね。以前のロールオーバーといえば、画像を差し替えてわりと大げさな変化で表現するものが多かったのですが、最近では少しの変化を加える程度のシンプルなものが主流です。 たった1行で視覚効果をコントロールできるので、opacityは重宝しますね。
0 yukko
今まで利用したことがなかったので今後使ってみたいと思います。
使えそうだなと思ったのプロパティ・セレクタはborder-radiusです。ボタンなどの作成に便利そうだなと思いました。
0 kamino
ここ1年ちかくまともにコーディングをしておりませんので・・・、「角丸」について思ったことです。
以前は画像を用意していましたが、CSS3では画像を用意する必要もありませんし、
数値を変えるとすぐに形を変えることができますので、画期的だなと思った記憶があります。		 なし (赤間　公太郎)
border-radius（角丸）は、「特定の角または四隅を丸くする」という考え方のほかに、「ほんの少しだけ角をとって固さを軽減する」という考えでも利用できます。 小さめな数値（3pxや5px）を付けてて「角をとる」表現もぜひ試してみてください。 自由に数値を変えて、すぐに表示結果を確認できるのが便利ですね。
0 YN
これまで利用したことがなかったのですが、これを機に試してみたいと思います。

1. 便利・使えるプロパティ・セレクタ
角丸(border-radius)やグラデーション(linear-gradient)を組み合わせてボタンを作成してみたいと思います。

2. 何を行う目的で使用しましたか?もしくは使ってみたいと思っていますか?

立体的で目立つボタンをサイトに設置し、ファイルのダウンロードを促したいと思います。

3. 以前はその目的を実現するためにはどのようにやっていましたか?(JavaScript・画像など?)
通常、画像を使っており、配色やサイズの調整に難儀していますが、css3を使えば微調整やホバー設定も簡単にできそうです。ただし、対応ブラウザの問題など、お客様の利便性に気を配りながら進めたいと思います。		 注目 (赤間　公太郎)
ぜひ、CSS3を積極的に採用してみてください。いままで作業に費やしていた時間の短縮はもちろんのこと、直しに強いものができあがるはずです。 ただ、グラデーションを表現するlinear-gradientは、作りたいグラデーションによっては記述方法が複雑になり、ゼロからコードを書くことは難しくもあります。 このような場合、「ジェネレーター」と呼ばれるオンラインサービスを利用すると、簡単にボタンを作成することができます。 http://css3buttongenerator.com/ こういったツールは、古いWebブラウザにもある程度配慮したコードを生成しますので、よく表示確認のうえ採用してみましょう。
0 gabber1090
1.　便利・使えるプロパティ・セレクタ
CSS3なら断然「border-radius」です。

2.　何を行う目的で使用しましたか?もしくは使ってみたいと思っていますか?
テキストボタンの角丸化に使いました。

3.　以前はその目的を実現するためにはどのようにやっていましたか?(JavaScript・画像など?)
以前は背景画像を角丸にして角の部分は背景色にしたり、透過画像を使っていました。あの頃が懐かしい…

他には「opacity(透過)」や「rgba()」などもヘビーユースしています。透過は特にリンクのオンマウスで変化をつけるときに非常に手軽に使えるので重宝しています。Sassを使う場合も増えているためrgba()も常用しています。		 銅 (赤間　公太郎)
角丸効果をつけることにより、単純な長方形であっても、ボタンのような雰囲気にすることができます。 デザイン的な効果の付与以外にも、ボタンのように見えるなど、機能面でも効果も期待できます。 以前は、これを表現するには画像でなければいけませんでした。ブラウザベンダー（GoogleやMozilla）の努力と技術の進化のおかげで、このような快適なCSSプロパティが使えるようになりました。 現在では、Webサイトはスマートフォンにも考慮しないといけませんので、こういった新しい技術はどんどん学んで、積極的に取り入れていきたいものです。