
レスポンシブデザインについて勉強中なのですが
自作したウェブサイトへの導入で躓いています、、
主に画像やテキストの中央揃えなのですが
当初、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>:B型<br>
<span>出身地</span>:北海道<br>
<span>経歴</span> :北海道出身、昭和音楽大学大学院卒業。<br>
5歳からピアノを始め、以来、国内のコンクールを多数受賞。 <br>
<span>愛車</span>:CBR2000<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>:14時~17時<br>
<span>場所</span>:大阪府〇〇市◇◇区☆丁目♡番▢号<br>
<span>費用</span>:6,000円/回<br>
<span>参加資格</span>:小学1~6年生対象<br>
<span>その他</span>:大阪駅から徒歩5分圏内<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>

A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
Firefoxでしか適用できないスタイルを使っているなら反映しません。
https://developer.mozilla.org/ja/docs/Web/CSS/Mo …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 動画と画像&タイトル2列を横並びにするにはどうすればよいでしょうか? 2 2025/03/06 22:51
- HTML・CSS 初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。 1 2023/12/18 19:52
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- HTML・CSS HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ 3 2023/12/25 16:07
- HTML・CSS スライダーの枠に動画を収めるにはどのように修正すれば良いでしょうか? 1 2024/08/10 20:23
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- その他(プログラミング・Web制作) Selenium4でボタンをクリックできない 1 2024/03/09 16:07
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
このQ&Aを見た人はこんなQ&Aも見ています
-
JavaScriptを本で勉強しています。 ほんとのほんとの序盤なのですが、 本の内容に、vscod
JavaScript
-
プログラミングに興味があるのですが、作りたいものはありません。 ゲーム機とかパソコンの中身(ソースコ
その他(プログラミング・Web制作)
-
パイソンのソースコードをChatGPTで書いてもらうのを独学でやろうと思うとどういう方法がオススメで
その他(プログラミング・Web制作)
-
-
4
CSVファイルの複数行削除
その他(プログラミング・Web制作)
-
5
Web初心者です。 簡易的なWebページを作成し
その他(プログラミング・Web制作)
-
6
プログラミングの進学について
その他(プログラミング・Web制作)
-
7
jsで質問です。 formをsubmitしてサーバー側で処理が行われて処理が完了したら、フロント側で
JavaScript
-
8
以下のプログラムの実行結果はどうなると思いますか? その理由も教えてください。
Visual Basic(VBA)
-
9
プログラマー達は何故、プログラムを入れるフォルダーに容量制限があるのを知らない?
C言語・C++・C#
-
10
Dreamweverは今も主流なんですか? 昔使われてたツールだって言う人もいたけど、殆どの会社はこ
HTML・CSS
-
11
改行文字「vbCrLf」とは
Visual Basic(VBA)
-
12
ワードプレスでのHP製作はなぜ多いでしょうか?どんなメリットあるのでしょうか?
SEO
-
13
グーグルの検索結果ってこの頃は評判が悪くなっているのですか?
SEO
-
14
エクセルの改行について
Visual Basic(VBA)
-
15
vbsでのwebフォームへの入力制限?
Visual Basic(VBA)
-
16
phpの問い合わせフォームを作ったのですが・・
PHP
-
17
ホームページの制作について教えてください‥cssの指定がブラウザではきちんとなっているのですが
HTML・CSS
-
18
chatGPTみたいに画像生成出来るサイトを教えてください!無料で、!! cheatGPTのプライム
CGI
-
19
OS入ってる機器のソフト・アプリの作成(プログラム)って
その他(プログラミング・Web制作)
-
20
数学、プログラミング、物理、化学など理系の方に質問 プログラミング言語、数式、化学式などで会話をしよ
その他(プログラミング・Web制作)
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
スマホ(android)のタッチパネ...
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
初心者html・CSS ウィンドウを...
-
WEBページを強制的に横画面で見...
-
HTML &CSSとHTML5&CSS3 違い
-
CSSデータの作成方法について(...
-
メモ帳の段落の揃え方
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
GoogleSearchControlにホームペ...
-
htmlの<input type=”file”>でア...
-
HTML&CSS メディアクエリにつ...
-
HTML&CSSについて。
-
Webサイトの「デザインのみ(コ...
-
webディベロッパーについて詳し...
-
iPhoneで HTMLファイルを閲覧
-
HTML&CSSとHTML5&CSS3の違い...
-
HTML&CSSとHTML5&CSS3の違い...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
おすすめ情報