- ベストアンサー
css -webkit-flex;の意味
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは、グラフィックデザイナーです。 -webkit-っていうのは「ベンダープレフィックス」のひとつです。 CSSの実装を予定しているけれど正式採用ではなかったり、 ベンダーがブラウザ独自の表示・機能を盛り込んだ場合、 -webkit- とあわせてプロパティの指定をすることで使える機能だと思っていただければ。 -webkit- 以外に -moz-とか -ms- とか ブラウザごと、ベンダーごとにいろいろありますので 一度検索してみてください。 また、その機能が使えるかどうかを調べるのに使えるサイトがあります。 https://caniuse.com これを見ていただければ、どのブラウザでどんな機能が使える／使えないかがわかります。 このベンダープレフィックスを活用することによって、 たとえばEdgeだけどうしてもCSSが反映されない場合なんかに、Edge用の記述を別途CSSに加えることができたりします。 HTMLが4の頃は、ブラウザごとの挙動が違いすぎてウェブ関係者は頭を抱えまして、ベンダープレフィックスを使うことでなんとか凌いでいた、なんてこともありました。 簡単なサイトなら最近は使わなくても済むみたいですが、知っておいて損はないですね。
その他の回答 (1)
- Nobu-W
- ベストアンサー率39% (725/1832)
https://mamewaza.com/support/blog/howto-use-flex.html 読んでみて下さい m(_ _)m
補足
そのサイトを見て、理解できなかったので、ここで質問した次第です。 ul { display: flex; } なら分かるのですが、なぜ、display: -webkit-flex;も記述するのでしょうか？なにか理由でもあるのでしょうか？
関連するQ&A
- AndroidブラウザでCSSのFlexbox
デスクトップ向けや比較的新しいスマートフォンブラウザでは、Flexboxを使用できますが、Android 4.0などの標準ブラウザでは用意されていないようです。こういったブラウザで垂直に並べて折り返すようなレイアウトを再現する方法、もしくはjQueryライブラリなどはありますでしょうか。 .flex { display:-ms-flexbox; display:-webkit-flex; display:-moz-box-flex; display:flexbox; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; -ms-flex-line-pack:start; -webkit-align-content: flex-start; align-content: flex-start; }
- ベストアンサー
- CSS
- FlexboxのレシポンシブCSSで困ってます。
Flexboxのレシポンシブの書き方で困ってます。各クラスのitemをPC版での場合は横並びで幅は20％、20％、60％。スマホ版では各itemが100%の画面横一杯に縦並びに表示したいです。他のCSSの関係上@media screen and (max-width:567px) の書き方は変えないでおきたいのですが上手くできません。 どなたか教えて下さい。宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100% } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 20%; } .infofl-item3 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl-item1 { display: block; } .infofl-item2 { display: block; } .infofl-item3 { display: block; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : green;">フレックスアイテム1</div> <div class="infofl-item2" style="background-color : fuchsia;">フレックスアイテム2</div> <div class="infofl-item3" style="background-color : silver;">フレックスアイテム3</div> </div> </body> </html>
- ベストアンサー
- CSS
- FlexboxのレシポンシブCSSで困ってます2
Proof4さんスミマセン！再度質問させてください。教えて頂いた通りにしたらboxのレシポンシブ化は出来たので、infofl-item2にｈ3とリストを作成したらinfofl-item2のリストがｈ3の下に来なくて右横に来てしまいました。どこが悪いのかわかりません？お手数ですが教えて下さい。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>Introduction to CSS(flex-basis)</title> <script src="js/flexibility.js"></script> <style> <!-- .infofl{ display: -webkit-flex; display: flex; padding:0; width:100%; } .infofl-item1 { display: -webkit-flex; display: flex; flex-basis: 40%; } .infofl-item2 { display: -webkit-flex; display: flex; flex-basis: 60%; } @media screen and (max-width:567px) { .infofl{ display: block; } .infofl > div{ width: 100%; } } --> </style> </head> <body> <div class="infofl"> <div class="infofl-item1" style="background-color : yellow;"> <dl> <dt>■test1 <dd>test <dd>test <dt>■test2 <dd>test <dd>test <dt>■test3 </dl> </div> <div class="infofl-item2" style="background-color : silver;"> <h3 style="color : white;background-color : #212121;padding-top : 0.5em;padding-left : 0.5em;width : 98%;height : 1.5em;">お知らせ・新着情報</h3> <dl> <dt>■test1 <dd>test <dt>■test2 <dt>test <dt>■test3 <dt>■test4 <dt>■test5 </dl> </div> </div> </body> </html> 何度お尋ねしてもうしわけありまんがよろしくお願いいたします。
- ベストアンサー
- CSS
- WebKitって何がすごいの？
最近スマートフォン関連のブラウザの情報を みていると、よくWebKitという言葉を目にしますが 何がすごいんですか？ スマートフォンにおける、あるいみデファクタースタンダード とまで言われてきているみたいですが、何がすごいのか？ また、他と何が違うのか、分かりません。 教えてください！よろしくお願いします。
- ベストアンサー
- iPhone・iPad・iOS
- WebKitの使い方を教えてください。
WebKit.appの使い方を知っている方いましたら教えてください。 当方で調べたのですが 使い方が分かりません。 どなたかご存知の方いましたらよろしくお願い致します。
- ベストアンサー
- AJAX
- ナナオのFlex Scan M170
今度パソコンを購入するときに液晶ディスプレイも購入したいと考えています。３Ｄのゲームをしたいと思っていて、ディスプレイはナナオのFlex Scan M170を予定しているのですが、このディスプレイに色の表示が遅いなどの弱点はあるでしょうか。些細なことでも構いませんので、長所や短所を教えていただけるとありがたいです。 御回答、よろしくお願いします。
- ベストアンサー
- ディスプレイ
- Trojan.Webkit!htmlって？？？
Trojan.Webkit!htmlというのがシマンテックで発見されました。 クリーニング 失敗 : 検疫 失敗 : 削除 正常に完了 : アクセスが拒否されました こう出ています。 放っておいていいのでしょうか？ 悪さしないでしょうか？
- 締切済み
- ウィルス・マルウェア
- FlashとFlex
当方、JavaやC#などのサーバサイドをメインで業務をおこなっており、 Flexは多少経験があるものの、Flashは全くの未経験者です。 最近、社外のデザイナの方と話した際、 「FlexでできることはFlashですべてできる」と言われたのですが、 これは本当でしょうか。 （このデザイナの方はデザインだけでなく、ActionScriptが書け、 Flash、Flexにそれなりに詳しい方です） Flash素人の私からすると、ぱっと見た感じでは Flexで標準で容易されている各コンポーネントが Flashでは見当たらないのですが、FlashでもActionScriptで がんばってごりごり書けばすべて実現できるのでしょうか。 尚、環境はFlex3を利用しています。 簡単なサンプルのURL等根拠になるものを提示していただけると大変助かります。 宜しくお願い致します。
- ベストアンサー
- Flash
- Flexサーバー
Flash Builderを主に使って、Flexプログラムを作りたいと思ってます。海外のレンタルサーバーを使って勉強してみたいと思ってるのですが、サーバーに何か特殊な機能がないとFlexは使えないのでしょうか？「この機能がないと正常に動かないよー」というのがあれば、是非教えてください。宜しくお願いします。
- 締切済み
- ハードウェア・サーバー
- Flex Scan M170について
今回自分のＰＣを買おうと思い、eMachinesのＪ6446とナナオのディスプレイのFlex Scan M170にしようかと現在思案中なのですが・・・・・ 自分でとにかく情報収集をしようと色々なサイト等を巡っては様々な評価を見ているのですが、eMachinesはまだわかったほうなのですが、Flex Scan M170が良いのか悪いのかよく分かりません・・・ 実際に使っておられる方や自分はこう思う！という方、宜しかったらご意見をいただけないでしょうか？ ちなみに当方はＤＶＤ鑑賞、ネット、アップスキャンコンバータにつないでＰＳ2、少し興味のある3Ｄゲーム等をしようと考えています。 よろしくお願いします。
- ベストアンサー
- ディスプレイ
お礼
コメントありがとうございます。 ブラウザ独自の表示対応でしたか。理解できました。