質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1551閲覧

Bootstrapを利用したら@mediaが適応されないのを解消したい。

0623_top

総合スコア8

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2018/06/29 11:43

Bootstrapバージョン4.11を利用してホームページを制作しています。
グリットレイアウトなどを採用してトップページを制作中しています、レスポンシブ対応のデザインをするため、スマホサイズの画面の時に文字のサイズなどを変更したく、自分で作成したCSSファイルに@medeiaでそれぞれの画面サイズごとに文字サイズを変更しようとしたのですが、ブラウザで確認したところ、適応されていませんでした。

HTML

1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta name="description" content="会社の説明をここに記述"> 5 <meta name="keywords" content="#"> 6 <!-- Required meta tags --> 7 <meta charset="utf-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 9 10 <!-- Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> 12 13 <link rel="stylesheet" type="text/css" href="style.css"> 14 <title>HP</title> 15 </head> 16 <body> 17 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 18 <a class="navbar-brand" href="#">Navbar</a> 19 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> 20 <span class="navbar-toggler-icon"></span> 21 </button> 22 <div class="collapse navbar-collapse justify-content-around" id="navbarNav"> 23 <ul class="navbar-nav"> 24 <li class="nav-item active mr-5"> 25 <a class="nav-link" href="#">ホーム</a> 26 </li> 27 <li class="nav-item mr-5"> 28 <a class="nav-link" href="#">サービス内容</a> 29 </li> 30 <li class="nav-item mr-5"> 31 <a class="nav-link" href="#">制作実績</a> 32 </li> 33 <li class="nav-item mr-5"> 34 <a class="nav-link" href="#">ご利用料金</a> 35 </li> 36 <li class="nav-item mr-5"> 37 <a class="nav-link" href="#">スタッフ紹介</a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="#">お問い合わせ</a> 41 </li> 42 </ul> 43 </div> 44 </nav> 45 <div class="top-content container-fluid"> 46 <div class="row"> 47 <div class="col-xl-7 col-lg-6 col-md-5 pl-5"> 48 <h1><span class="small-font">最新のおしゃれなデザイン</span><br>ホームページ制作<br>を格安で<span>ご提供いたします。</span></h1> 49 <button type="button" class="btn btn-primary btn-lg">無料で相談してみる</button> 50 </div> 51 <div class="col-xl-5 col-lg-6 col-md-7"> 52 <img src="img/smf1.png" class=" img-smf mt-3"> 53 54 <div id="carouselExampleSlidesOnly" class="carousel slide carousel-position" data-ride="carousel"> 55 <div class="carousel-inner"> 56 <div class="carousel-item active"> 57 <img class="d-block smf-carousel" src="img/tesla1.jpg" alt="First slide"> 58 </div> 59 <div class="carousel-item"> 60 <img class="d-block smf-carousel" src="img/tesla2.jpg" alt="Second slide"> 61 </div> 62 <div class="carousel-item"> 63 <img class="d-block smf-carousel" src="img/tesla3.jpg" alt="Third slide"> 64 </div> 65 </div> 66 </div> 67 </div> 68 </div> 69 </div> 70 71 72 73 74 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 75 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 76 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> 77 </body> 78</html>

CSS

1.top-content { 2 height: 670px; 3 background-image: url("./img/wood.jpg"); 4} 5 6.top-content h1 { 7 padding-top: 140px; 8 padding-left: 80px; 9 color: #ffffff; 10 font-size: 75px; 11 font-weight: bold; 12} 13 14.top-content h1 span { 15 font-size: 25px; 16} 17 18.small-font { 19 font-size: 20px; 20} 21 22.btn { 23 margin-top: 50px; 24 margin-left: 160px; 25 padding-right: 100px; 26 padding-left: 100px; 27} 28 29.img-smf { 30 margin-left: 65px; 31} 32 33.col-5 { 34 position: relative; 35} 36 37.carousel-position { 38 position: absolute; 39 top: 91px; 40 left: 175px; 41} 42 43.smf-carousel { 44 width: 257px; 45 height: 465px; 46} 47 48 49 50@media (max-width: 575.98px) { 51 h1 { 52 font-size: 7px; 53 } 54} 55 56@media (max-width: 767.98px) { 57 h1 { 58 font-size: 12px; 59 } 60} 61 62@media (max-width: 991.98px) { 63 h1 { 64 font-size: 10px; 65 } 66} 67 68@media (max-width: 1199.98px) { 69 h1 { 70 font-size: 15px; 71 } 72} 73 74
退会済みユーザー👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2018/06/30 00:49

既に回答で出ていますが、CSSが効かない場合の多くは「優先度」に関わっていますので、ここを意識して組まれると良いかと思います。(単に誤記述も多々あります。) また、HTMLのhead部分等の各要素も併せて見直されると良いかと思います。
guest

回答2

0

ベストアンサー

.top-content h1 が指定されているので、@mediaにおいて h1 に指定するのではなく.top-content h1 に指定しては?

【!importantはもう使わない!CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ】
http://creator.aainc.co.jp/archives/4947

あとはデベロッパーツールで確認しながら調整してみてください。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿2018/06/29 15:42

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0623_top

2018/06/30 00:47

解決することができました。 ありがとうございました。
guest

0

  • 綺麗ではないですが、自分で書いたccsのサイズなどの優先度をあげる(!important付与)でどうでしょう?

  • ここなどを見ても、bootstrapでmediaクエリが使えないことはないようです。http://photoshopvip.net/69687

投稿2018/06/29 15:23

mats0228

総合スコア219

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問