- ベストアンサー
CSS3はもう使っても良い？
anonymous（@phantom0112358）の回答
個人的にはCSS3はどんどん普及してもらいたいのですが、自分のもらう案件ではまだまだIE7に対応させろと無茶ぶり言われるので未だにCSS2で後方互換を持たせています。 要はターゲット次第ですね。 実際のモダンブラウザのシェアは9割以上ですし、IE7を使っているようなユーザーが収益を生むとも考えられません。 まだまだCSS3には草案があふれています。border-関連のような確定したものなら使ってもいいと思いますが、草案段階のもの（ベンダープレフィックス必須）は使わないほうがいいと思います。
関連するQ&A
- CSS3の新しい書き方教えてください。
ネットで見ていたところ以下の記述を見つけました。 どうやらCSS3の記述らしいのです。 border: 1px solid #333; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 3px; という記述は何となく分かるのですが、その頭にある・・・。 -webkit- という記述は何を意味するのでしょうか？？ -moz- もそうですね・・・。 先頭の、border: 1px solid #333; に付随する記述だよ！みたいな感じでしょうか？ どなたかお分かりになる方いらっしゃいましたらアドバイスをお願いします。 また、何か参考になるサイトなどもご存知であれば、合わせてお教えいただけますと幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- CSS
- DreamweaverCS6でのCSS3について
DreamweaverCS6を使っています。CSS３でかなりの表現ができるようになったと思いますし、今勉強していますが、DreamweaverCS6でGUIでCSS3の操作はできないのでしょうか？いろいろと例えば角丸の枠を書くときなどはborder-radiusで書けると思うのですが、これは手入力していかなければ駄目なのでしょうか？実際そうだと割りきってしまえば良いのでしょうが、もしかしてできるのであれば活用したいと思うのですが。
- ベストアンサー
- CSS
- IEで角丸を表示させるには？
ワードプレスを使用してHPを作りました。 HP制作初心者です。 角丸がIEでも表示されるように、 こちらのサイト↓ http://kruz-graphix.com/2010/02/css3_radius_shadow_for_ie/ を参考に、htcファイルを読みに行くよう スタイルシートを編集したのですが、どうしても効きません。 詳しい方…コーディングをチェックして、 原因を解明していただけるととても助かります…（＞＜） 制作したHPはこちら http://ogosechurch.minibird.jp/ CSSファイルは以下 http://ogosechurch.minibird.jp/wp-content/themes/responsive/style.css?ver=1.8.7 ※編集したコードは1150行目、セレクタ名「menu li」です。 リンクしているPIEファイルは以下です。 http://ogosechurch.minibird.jp/PIE/border-radius.htc よろしくおねがいいたします。
- 締切済み
- HTML
- CSSコードをブログに書く時に
CSSコードをブログに書く時に こんな書き方したのをよくみます。（コードの背景です） http://www.css-lecture.com/log/css3/css3-border-radius.html http://blog.xaxxi.net/2010/04/border-radius-htc使ってみた/ これってどうやってるんですか？ 同じ書き方をどこのブログでも見かけるんですがテンプレートがあるんですか？ おしえてください
- ベストアンサー
- ブログ
- css3でボタンの中にアイコンを表示するには？
css3でリンクボタンのデザインを作っています。 グラデーションや角の丸め、影の付け方はわかりました。 しかしボタンの中にアイコンを入れる方法がネットを探しても全く見つかりません。 アイコン画像を用意して、どのようにしてボタンの中に表示させればよいのでしょうか？ （画像の赤い矢印で示した部分です） 作っているcssは以下のような感じです。 a{ border-top: 1px solid #57b4ff; border-left: 1px solid #57b4ff; border-right: 1px solid #0d78ff; border-bottom: 1px solid #0d78ff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 2px #a2c1dc; -moz-box-shadow: 1px 1px 2px #a2c1dc; background: -moz-linear-gradient(top, #fff, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc)); } よろしくお願い致します。
- ベストアンサー
- CSS
- cssのボタンについて（IEで背景が表示されない）
リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか？ どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; ｝
- ベストアンサー
- CSS
- [CSS3] last-childについて
html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }
- ベストアンサー
- CSS
- 「>」を使った記述はCSS3からのもの？
とあるサンプルサイトのCSSを見たところ、 #global-nav > ul > li:first-child a { border-radius:6px 0 0 0; } というCSS3の角丸設定のものがありました。 一番最初にあるリンクが貼られているli要素に角丸を設定というのは何となく分かるのですが、「#global-nav > ul > li」の「>」を使ったような記述を初めて見ました。 これはどういった意味を表しているのでしょうか？ 「#global-nav」にある「ul」の「li」という意味のものであれば、「>」は別に記載する必要性はないと思うのですが…また、この記述もCSS3からのものなのでしょうか？ ご存じ方、ご教授いただければ幸いです。 よろしくお願いします。
- ベストアンサー
- HTML
- iモードにおけるCSS
現在PCサイトの携帯版を制作しております。 auのEzwebブラウザはCSSをサポートしているようですが、DoCoMoのi-modeでは CSSは使えないのでしょうか？「iモードシミュレータ」というDoCoMo配布のソフトを使ってみたところ全くCSSを読んでくれません。 DoCoMoのサイトを見るとi-CSSというものもあるようですが具体的仕様が載っていなくて良く分かりません。これを解説しているサイトを知ってる方いらっしゃいましたら教えて下さい。
- ベストアンサー
- HTML
- CSS3グラデーションで、右端だけフェードする線を
CSS3グラデーションで、右端だけフェードする線を作成したいのですが、どうすれば良いでしょうか？ ・下記リンク先では、中央に位置した線の両端がフェードアウトしているのですが、 これを左端に位置させ、線の右端部分だけをフェードアウトさせたいのですが、どうすれば良いでしょうか？ ▽[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック | コリス http://coliss.com/articles/build-websites/operation/css/css-tutorial-fading-dark-gradient-by-cyberap.html できれば、この部分を解説して欲しいのですが、アレでしたら、完成形だけでもどこかに上げていただけないでしょうか？ background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -o-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -o-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -o-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -ms-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -ms-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -ms-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -moz-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -moz-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -moz-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%); background-image: -webkit-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0.1) 50%, rgba(0,0,0,0)), -webkit-linear-gradient(0deg, rgba(214,198,175,0), rgba(214,198,175,0.8) 50%, rgba(214,198,175,0)), -webkit-radial-gradient(50% 100%, ellipse cover, rgba(0,0,0, 0.05), rgba(0,0,0,0) 50%);
- ベストアンサー
- CSS
お礼
回答ありがとうございます 要望があれば対応せざるを得ませんね ベンダープレフィクスを基準に判断 というのは参考にさせてもらいます 未だにIE7とかを使っているようなユーザが 収益を生むとは思えないというのは予々同意です