電子書籍の厳選無料作品が豊富！

レスポンシブで困っています・・

受付中

  • 質問者：謎の訪問者
  • 質問日時：
  • 回答数：2件

レスポンシブデザインについて勉強中なのですが
自作したウェブサイトへの導入で躓いています、、
主に画像やテキストの中央揃えなのですが
当初、firefoxで作成時はcssにて中央に揃っていたのが
googlechromeでレスポンシブを確認したところ
きちんと反映されているものもあれば効果が出ていないものもあり頭を抱えております、、
使うブラウザ、又、pcとスマホ or ipadではそれぞれcss反映に違いが出てくるものなのでしょうか。。
下記はhtmlコード
画像はcssコードになります。
説明が分かりづらくてすみません、、、

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1">
<title>〇〇教室</title>
<link rel="stylesheet" type="text/css" href="css/project1.css">
<link rel="stylesheet" type="text/css" href="css/project1.responsive.css">
</head>

<body>
<header id="header">
<div class="inner">
<h1 class="logo">
<a href="file:///C:/Users/81806/Desktop/html/project1.html"><img src="images/project/title1.png" alt=""></a>
</h1>
<nav>
<ul>
<li><a href="#cast">講師紹介</a></li>
<li><a href="#business-info">教室内容</a></li>
<li><a href="#gallery">教室風景</a></li>
<li><a href="#news">更新履歴</a></li>
<li><a href="#mail">お問い合わせ</a></li>
</ul>
</nav>
<div class="icon">
<a href="https://www.instagram.com/aki4190210/" target="blank" rel="noopener noreferrer"><img src="images/project/instagramkuro.png"></a>
<a href="https://x.com/aki4190210" target="_blank" rel="noopener noreferrer"><img src="images/project/twitterkuro.png"></a>
</div>
</div>
</header>

<main>
<section class="mainvisual">
<img src="images/project/piano1.jpg">
</section>

<section id="cast" class="wrapper">
<h2 class="menu-title">講師紹介</h2>
<div class="cast-image">
<img src="images/project/project1-cast.png" alt="テキストテキストテキスト">
<div class="cast-info">
<p>
<span>名前</span>：田中　太郎<br>
<span>誕生日</span>：1991/12/24<br>
<span>血液型</span>：Ｂ型<br>
<span>出身地</span>：北海道<br>
<span>経歴</span>　：北海道出身、昭和音楽大学大学院卒業。<br>
　　　　５歳からピアノを始め、以来、国内のコンクールを多数受賞。 <br>
<span>愛車</span>：ＣＢＲ２０００<br>
<span>趣味</span>：バイク・料理・旅行・人間観察<br>
<span>好きな食べ物</span>：うどん　豚の角煮<br>
<span>座右の銘</span>：Be yourself<br>
<span>コメント</span>：初心者から経験者までのお子様が<br>
　　　　　楽しみながら上達できるよう指導致します。<br>
</p>
</div>
</div>
</section>


<section id="business-info" class="wrapper">
<h2 class="menu-title">講座内容</h2>
<div class="line"></div>
<div class="business-info">
<p>
<span>開講日</span>：毎週水曜日<br>
<span>時間</span>：１４時～１７時<br>
<span>場所</span>：大阪府〇〇市◇◇区☆丁目♡番▢号<br>
<span>費用</span>：６,０００円/回<br>
<span>参加資格</span>：小学１～６年生対象<br>
<span>その他</span>：大阪駅から徒歩５分圏内<br>
</p>
</div>
</section>

<section id="gallery" class="wrapper">
<h2 class="menu-title">教室風景</h2>
<div class="line"></div>
<ul>
<li><img src="images/project/piano2.jpg" alt="テキストテキストテキスト"></li>
<li><img src="images/project/piano3.jpg" alt="テキストテキストテキスト"></li>
<li><img src="images/project/piano4.jpg" alt="テキストテキストテキスト"></li>
<li><img src="images/project/piano5.jpg" alt="テキストテキストテキスト"></li>
<li><img src="images/project/piano6.jpg" alt="テキストテキストテキスト"></li>
<li><img src="images/project/piano7.jpg" alt="テキストテキストテキスト"></li>
</ul>
</section>

<section id="news" class="wrapper">
<h2 class="menu-title">更新履歴</h2>
<div class="line"></div>
<ul>
<li>　　2025.03.01<span></span>ウェブサイトを開設しました。</li>
<li>　　2025.03.05<span></span>講師紹介を更新しました。</li>
<li>　　2025.03.06<span></span>レッスン風景を更新しました。</li>
<li>　　2025.03.07<span></span>教室内容を修正しました。</li>
<li>　　2025.03.08<span></span>問い合わせページを作成しました。</li>
</ul>
</section>
<footer>
<div class="footer">
<p>©2025 〇〇教室</p>
</div>
</footer>
</body>

「レスポンシブで困っています・・」の質問画像
通報する
質問の本文を隠す
  • 画像を添付する （ファイルサイズ：10MB以内、ファイル形式：JPG/GIF/PNG）
  • 今の自分の気分スタンプを選ぼう！
あと4000文字

A 回答 (2件)

No.2

  • 回答者： rera1016
  • 回答日時：

Firefoxでしか適用できないスタイルを使っているなら反映しません。


https://developer.mozilla.org/ja/docs/Web/CSS/Mo …
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： princeigor
  • 回答日時：

ブラウザで挙動に差異が出るのはよくある。


GeminiやChatGPTに聞くといいですよ。
この質問を丸ごとコピーでOKです。
コードはすべてテキストで与えてください。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報