- ベストアンサー
レスポンシブのサイトにbootstrapは使うか？
主にレスポンシブのためにbootstrapを使うと思いますが、こだわりだすと普通のcssよりも融通がきかないです。 レスポンシブ部分を自分で作るのは難しいでしょうか？ スマホとｐｃで分けたいのですが、境界線をどこに設定すればいいですか？。
- inudaisukidesu
- お礼率0% (14/5695)
- CSS
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
Bootstrap はレスポンシブデザインのためのモノでは無く、レスポンシブデザインにも対応できるフロントエンドフレームワークです。 レスポンシブだけが目的ならCSSだけで作る方が簡単で融通が利くでしょう。
その他の回答 (2)
- AsarKingChang
- ベストアンサー率46% (3467/7472)
メディアクエリそのものにツールは元々いらないと思いますよ。 使っちゃダメって事もないのでそこは、好みですが。
- AsarKingChang
- ベストアンサー率46% (3467/7472)
ブレイクポイントについての質問であってましたかな？ https://daib-log.com/responsive/ これらをメディアクエリで制御でしょうね。 PCのみのレスポンシブと、 PC/SPのレスポンシブでもまた違うので、 そこは、デザイン次第でしょうけど。 ツールとしての紹介部分では、以前私の方、 SCSSを使ったりもしてましたが。 あれ、逆にわけわからなくなるので、 もっぱら、素のCSSで書いてますね。
補足
bootstrapを使うまでもなく、２つのデバイスのブレイクポイントを分けるだけなら、そんなに難しくないでしょうか？
関連するQ&A
- 大きいサイトでレスポンシブってありえますか
小さいながらビジネス関連のスクールのサイトを、リニューアルして作成する予定です。量的には、中規模くらいといえるかと思います。私自身はサイト作成については、初心者より多少はできるレベルです。社内で作って自分で少しずつ更新・追加していく予定です。更新の容易さ、スマホ対応の必要性から、レスポンシブで作ろうと思います。しかしレスポンシブは、どちらかといえば、大きな写真などを多用し、視覚重視の製品・サービスのサイトに適している感じがします。また、ですから情報量がある程度多く、また、ある程度固めのイメージを出したく、またいちいちスクロールせずに、必要な情報を見られるような感じのサイトにしたい場合、レスポンシブで作成するのは適していないのかなと思ったりします。レスポンシブのデモサイトを見てみると、非常にゆったりしたスペースを使っているのが多いように思います。レスポンシブでありながら、情報量の多い（例えばビジネス系の）サイト、の例などあれば教えて下さい。何かアドバイスがいただければ有難いです。 去年からWixでサイトを作り、１年位たちますが、なにせ重いので、自分で作ったほうがよいと思っています。 宜しくお願い致します。
- 締切済み
- CSS
- Bootstrapとbootswatchの設定
Bootstrapとbootswatchを使ってみたいと思い、ネットで調べながらやってみました。 Bootstrapまでは使えるようになったのですが、bootswatchが反映できていないようが気がします。 初期設定？まで行えるよう、具体的な手順を教えて頂けないかと思っております。 【行った手順】 1.Bootstrapをダウンロード 2.index.phpのhead箇所から bootstrap.min.css を読み込み 【使用したいテンプレート】 ・bootswatchのSimplex 【疑問点】 「ダウンロード」に様々なファイルがあるのですが、どれが必要なのか、どうやったらbootswatchのSimplexが使えるようになるのか、分かっていません。 【回答の欲しい事柄】 index.phpに記入するhead部分のソースを教えて下さい。 【どのような結果を求めているか】 bootswatchのSimplexと同じ、もしくは同じようなページを自分のレンタルサーバーで表示できるようになりたい。 その他、何かアドバイスなどありましたら併せて頂けましたら幸いです。 よろしくお願い致します。
- ベストアンサー
- CSS
- レスポンシブがよくわからない
■質問1 PC、タブレット、スマホで一つのhtmlとcssでレスポンシブに変更する場合、 @media screen and (min-height: 600px) を使って変更すると説明している解説サイトが多いです。 しかし端末は年々高解像度になっていますし、解像度は端末毎にみんなバラバラですよね？ 解像度が低いとスマホ、中位だとタブレット、高解像度だとPCみたいな別け方ですが、 最近のスマホはかなり高解像度でPC並だと思うのですが、なぜこのcssで 振り分けができるのでしょうか？ 自分が思うのは、スマホの横解像度が1024pxだったとしてもスケールが影響して @media screen and (min-height: 600px)に収まるようになっているとかでしょうか？ このへんを説明しているサイトがなく、単に@media screeを使うとしか解説していないので教えて もらえると助かります。 ■質問2 端末によって横解像度が違うのでdivブロック内の文章がどの文字でdivの右端で折り返されるかは 端末毎に変わるのは仕方のないことですよね？ 取引先の担当者に、改行や右端での折り返しが端末ごとに異なると怒られたのですが、なるべく見やすく 文字をremで指定しているし、そもそもフォント自体の幅が端末毎に違うので折り返しがまちまちなのは仕方のないことなのでしょうか？ それとも同じにできるのでしょうか？ どうぞよろしくお願い致します。
- ベストアンサー
- CSS
- レスポンシブ対応のサイト制作について
レスポンシブ対応サイト制作中の者です。制作自体は以前から行っていますので、それ自体に疑問はないのですが、たまにPCでウィンドウ幅を変更してもスマホ画面や、タブレット画面にならないサイトを見かけます。これはどのように実現させているのでしょうか？その場合、chromeの要素検証でスマホ画面環境を作ってやると、きちんとスマホ対応画面になるのですが。 よろしくご回答お願いいたします。
- ベストアンサー
- CSS
- レスポンシブwebデザインでのIE対応について
レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。 お詳しい方々、是非アドバイスをお願いします。 現状の対応としては・・・ IE9 → 他ブラウザ同様にレスポンシブ対応 IE8 → レスポンシブ非対応・IE専用CSS（PCサイズ版）を適用 IE7 → 完全無視 （IE7はttp://www.ajike.co.jp/2012/08/browse_share201207/やその他複数のデータを基に、完全無視で問題ないと判断しました） としております。 そこで作っていてふと想ったのですが、タブレット端末やスマートフォン端末では実質的にIEではなくなるので、結局IE9をレスポンシブ対応させる意味がないのではないか？ なら、IE8と同様にIE用のCSSを適用させるだけで良いのではないか？ と想ったのですが、どうなんでしょうか？ ここはやはり将来性を鑑みてIE9は現状のままレスポンシブ対応させておくべきなのか・・・ それともIEは9だろうと8だろうと一括でIE専用CSSを適用させてレスポンシブ対応させないのか・・・ 初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。 いったいどうしたら良いでしょうか？ 是非ぜひ、ご教授願います。
- ベストアンサー
- CSS
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- レスポンシブWeb 右側の表示が切れてます
レスポンシブWebデザインのサイトを作っています。 スマホの画面では右側の表示がきれてしまいます。 marginとpaddingは左に効いても、右には効きません。 PCの画面では想定どおりに表示します。 <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/common-l.css"> <link rel="stylesheet" href="css/common-s.css" media="only screen and (max-width:599px)"> PC用のcommon-l.cssを使わずスマホ用のcommon-s.cssだけを使うと表示は正常 でmarginとpaddingも効きます。common-l.cssが影響しているのはわかりました。 ためしにPC用のwidthを削るとスマホ画面の表示は正常になりました。当然PC用 画面の表示はおかしくなりますが。 なお「width: 650px;」を「width: 72.22%;」にしても結果は同じです、 //// PC用 common-l.css ////////////////// #content{ float: left; width: 650px; ←この行を削るとうまくいきます background-color: #FFFFFF; } //// スマホ用 common-s.css ////////////////// p{width: 100%;} #content{ width: 100%; background-color: #FFFFFF; margin: 10px 50px 10px 10px; } 原因まではわかりましたが、対策がわかりません。PC用とスマホ用の両方の表示を まともにするにはどうすればいいでしょうか？ 心当たりがあればお答えください。
- ベストアンサー
- CSS
- レスポンシブＷｅｂデザインに詳しい方
ＰＣ、スマホサイトを運営しています。A業者さんに、レスポンシブwebデザインで制作していただきました。今回、リニューアルをする予定なんですが、B業者に、PC版のみ制作してもらった場合、自動でスマホ版も更新されるのでしょうか？もしされない場合、B業者が作ったHPを、別の業者にレスポンシブwebデザインにて変更していただくことは可能なんでしょうか？諸事情で、A業者さんには頼めません。B業者は、レスポンシンブでは作れないとのことです。
- 締切済み
- CSS
- ブログパーツをレスポンシブ化したい
下記のようなブログパーツをレスポンシブ化したいです。 <script type="text/javascript" src="URL&width=500&height=500"></script> 上記のようにPC用サイトにあわせてサイズを指定すると、スマホのページではみ出してしまいます。 スマホのページでもPCのページでもサイトの幅にぴったり収まるように幅を自動調整させたいのですが、どうすればいいでしょうか。
- ベストアンサー
- JavaScript
- レスポンシブ対応でPCとスマホで違う画像を使う
レスポンシブ対応でPCとスマホで違う画像を使う方法はたくさん有りますが。 最近現場ではどの方法を取っていますか？ srcsetでいけるようにもうなっていますかね？ IE8がまだかな？
- ベストアンサー
- CSS
補足
しかし、レスポンシブを作るためにbootstrapを使う人は多いですよね。CSSで簡単に実装出来るのなら、わざわざbootstrapを使う理由はなんでしょうか？