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

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

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

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

Q&A

解決済

1回答

275閲覧

laravel+tailwindCSSでレスポンシブが上手くいかない

ratezou

総合スコア55

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

tailwindcss

tailwindcssとは、Webサイト・Webアプリケーションを作成するためのCSSフレームワークの一つ。ユーティリティファーストな点が特徴です。汎用的なクラスが多数用意されており、独自のデザインを自由に組み立てることができます。

0グッド

0クリップ

投稿2023/05/27 15:56

編集2023/05/28 11:52

実現したいこと

デベロッパーツールで見たスマホプレビューをスマホ実機でも実現したい。

前提

デベロッパーツールで見た画面。
イメージ説明
スマホの実機で見た画面
イメージ説明

デベロッパーツールで見る限りエラーは出ていません。

該当のソースコード

head/header部分

1<head> 2 <meta charset="UTF-8" /> 3 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 5 <title>PureLeaf</title> 6 <link rel="stylesheet" href="{{ asset('css/tea/style.css') }}" /> 7 <link rel="icon" type="image/png" href="/images/tea/tea.png" /> 8 <link 9 rel="stylesheet" 10 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" 11 integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" 12 crossorigin="anonymous" 13 referrerpolicy="no-referrer" 14 /> 15 @vite('resources/css/app.css') 16</head> 17<body> 18<!-- header section --> 19<header class="hero h-[100vh] relative"> 20 <!-- shop name --> 21 <h1 22 class="plus absolute top-[1rem] left-[1rem] text-4xl md:text-6xl z-10" 23 > 24 PureLeaf 25 </h1> 26 <p 27 class="fixed top-[1rem] right-[1rem] text-xl md:text-3xl z-10 reserve hover:cursor-pointer" 28 > 29 ご購入 <i class="fa-solid fa-cart-shopping"></i> 30 </p> 31 <!-- policy --> 32 <div class="policy-container relative z-10"> 33 <h2 34 class="header-policy absolute top-[8rem] md:top-[12rem] left-[1rem] md:left-[4rem] text-4xl md:text-7xl" 35 > 36 100%オーガニック 37 </h2> 38 <h2 39 class="header-policy absolute top-[11rem] md:top-[18rem] left-[1rem] md:left-[4rem] text-xl md:text-2xl" 40 > 41 茶葉の栽培に厳しいオーガニック基準を適用しています。 42 </h2> 43 </div> 44 <img 45 class="absolute top-[15rem] md:top-[13rem] right-[-5rem] md:w-[40vw] md:h-auto object-cover ml-auto me-[5rem]" 46 src="{{ asset('images/tea/hero.jpg') }}" 47 alt="hero" 48 /> 49 <!-- sns --> 50 <ul 51 class="absolute bottom-[1rem] md:bottom-[1rem] ml-[1rem] list-none z-10 plus list-none" 52 > 53 <li class="sns text-xl hover:cursor-pointer"> 54 <i class="fa-brands fa-twitter me-2"></i>Twitter 55 </li> 56 <li class="sns text-xl hover:cursor-pointer"> 57 <i class="fa-brands fa-instagram me-2"></i>Instagram 58 </li> 59 <li class="sns text-xl hover:cursor-pointer"> 60 <i class="fa-brands fa-line me-2"></i>LINE 61 </li> 62 </ul> 63</header>

試したこと

・きちんと「npm run dev」してます。
・スマホのキャッシュの削除もしました。

補足情報(FW/ツールのバージョンなど)

・レスポンシブで無ければ、(通常のmdサイズのときは)きちんと表示されています。

以上、よろしくお願いいたします。

追記1)

<script src="https://cdn.tailwindcss.com"></script>

CDNにしたら上手く行きました。
ただ、mdのときは上手く動作しているのでインストールミスとは考えにくいです。

追記2)
サーバーを再起動したら変化がありましたが、表示が崩れています。
イメージ説明

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

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

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

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

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

guest

回答1

0

自己解決

npm run buildしてませんでした。
お騒がせしました。

投稿2023/05/28 02:52

ratezou

総合スコア55

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問