Q&A
コードは画像で提示されても再現確認できませんので
テキストでマークダウンのcode機能にてご提示ください。
https://teratail.com/questions/238564
提示内容だけではcssがどこに書かれていてどう連携させているのか分かりませんので
HTMLは全体、ファイルが複数あるなら位置関係が分かる情報も提示してください。
前提・実現したいこと
imgのサイズを変更したい。
発生している問題・エラーメッセージ
cssでサイズを指定するが反映されない。
該当のソースコード
html,css
```css @charset"utf-8" /*oromoサイトロゴ*/ .h{ display: inline-block ; width: 500px ; height: 500px; } /*contactボタン*/ .contact { position : relative; top: } .button_top { font-size : 1.0em; border-radius: 5px; background-color : transparent ; padding : 15px 50px ; } .button_top:hover { background-image: none ; background-color : black ; color : white ; }
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE-edge" /> 6 <meta name="viewport" content="width=device-width,initial-scale=1" /> 7 <title>OROMO</title> 8 <link rel="stylesheet" href="./css/style.css"> 9 </head> 10 11 <body> 12 <!--ヘッダー--> 13 <header> 14 <!--ロゴ--> 15 <p class="h"> 16 <a href="./link" title="株式会社"><img src="./img/oromo_top.png" alt="OROMO!" class="h"></a> 17 </p> 18 <!--contact--> 19 <div class="contact"> 20 <a href="./link" title="お問い合わせ"> 21 <button type="button" title="お問い合わせ" class="button_top">Contact</button> 22 </a> 23 </div> 24 <div></div><!--線--> 25 <ul class="link"> 26 <li><a href="./link" title="ホームへ戻る">Home</a> 27 <li><a href="./link" title="私たちについて">About</a> 28 <li><a href="./link" title="サービス">Service</a> 29 <li><a href="./link" title="お知らせ">News</a> 30 <li><a href="./link" title="採用情報">Recruit</a> 31 </ul> 32 </header> 33 34 <main> 35 <!--トップページ--> 36 <section id="top"> 37 <img src="./img/oromo1.jpg" alt="メイン画像" class="main_img"> 38 <h1>For the best smile.</h1> 39 <p>あたらしいモノ・たのしいモノ・うれしいモノで社会に笑顔を増やすために、<br> 40 私たちは最高のエンターテイナーであり続けます。</p> 41 <div class="scroll">Scroll</div> 42 <img src="./img/scroll.png" alt="スクロール" class="scroll"> 43 </section> 44 45 <!--ニュース--> 46 <section id="news"> 47 <img src="./img/oromo2.jpg" alt=""> 48 <h3>News</h3> 49 <div>お知らせ</div> 50 <ul> 51 <li>2020.12.18 52 <p class="news">2020年度の年末年始休暇のお知らせ</p> 53 <hr class="news_line"> 54 <li>2020.10.12 55 <p class="news">オロモのサイトをリニューアル致しました</p> 56 <hr class="news_line"> 57 </ul> 58 <div class="more">More</div> 59 <img src="./img/more.png" alt="more" class="more"> 60 </section> 61 <!--アバウト--> 62 <section id="about"> 63 <h3>About</h3> 64 <div>私たちについて</div> 65 <img src="./img/oromo3.jpg" alt="" class="about_img"> 66 <img src="./img/oromo4.jpg" alt="" class="about_img"> 67 <h2>We are</h2> 68 <p>結果にこだわり続ける。</p> 69 <p>あらゆるグラフィックやシステムを通じてお客様の魅力を最大限引き出すだけでなく、マーケティングも取り入れ結果にこだわります。<br><br> 70 「妥協なきクオリティと結果。」は、私たちのポリシーです。</p> 71 <div class="more">More</div> 72 <img src="./img/more.png" alt="more" class="more"> 73 </section> 74 <!--サービス--> 75 <section id="service"> 76 <h3>Service</h3> 77 <div>サービス</div> 78 <!--サービス01--> 79 <img src="./img/oromo5.jpg" alt="" class="left"> 80 <div>01</div> 81 <h4>Project Design</h4> 82 <hr> 83 <div>プロジェクトデザイン</div> 84 <p>コラボレーション、スピード感、柔軟性、そしてイノベーティブな発想を、品質・コスト・スケジュール・スコープに意識を集中し、ストーリーのある活動的なビジュアルを表現します。</p> 85 <div class="more">More</div> 86 <img src="./img/more.png" alt="more"> 87 <!--サービス02--> 88 <img src="./img/oromo6.jpg" alt="" class="right"> 89 <div>02</div> 90 <h4>System</h4> 91 <hr> 92 <div>システム</div> 93 <p>会計、販売、調達在庫、人事、給与などすべての機能を完全統合しデータの整合性や操作の一貫性を向上させることで、業務プロセスの改善と業務効率化を支援します。</p> 94 <div class="more">More</div> 95 <img src="./img/more.png" alt="more" class="more"> 96 <!--サービス03--> 97 <img src="./img/oromo7.jpg" alt="" class="left"> 98 <div>03</div> 99 <h4>Photography</h4> 100 <hr> 101 <div>フォトグラフィ</div> 102 <p>ヒトやモノを通した”想い”が写る”良い写真”を気軽にオーダーできる撮影サービスがあります。打ち合わせから撮影〜レタッチ〜納品までプロのPhotographerが担当します。</p> 103 <div class="more">More</div> 104 <img src="./img/more.png" alt="more" class="more"> 105 </section> 106 107 <!--リクルート--> 108 <section id="recruit"> 109 <img src="./img/oromo8.jpg" alt=""> 110 <h3>Recruit</h3> 111 <div>求める人物像</div> 112 <p>オーダー以上のサービスを提供したい。感動してもらいたい。OROMOにあえてよかったと本気で思ってもらいたいという純粋な気持ちが仕事の原動力です。<br><br> 113 そのような想いを共感して、仕事に妥協なく、一緒に未来をワクワクしながら考えられる仲間を募集しています。 114 </p> 115 <div class="more">More</div> 116 <img src="./img/more.png" alt="more" class="more"> 117 </section> 118 119 <!--問い合わせ--> 120 <section id="contact"> 121 <img src="./img/oromo9.jpg" alt="お問い合わせ"> 122 <h3>Contact</h3> 123 <div>お問い合わせ</div> 124 <p>制作のご質問・ご相談はお電話または、<br> 125 以下のContact Formよりお問い合わせください。 126 <a href="tel:0665331114" title="0665331115へ電話をかける">06-6533-111</a> 127 <p>平日 9:00 - 18:00</p> 128 <button type="button" title="お問い合わせページへ" class="button">Contact Form</button> 129 </section> 130 131 <footer> 132 <ul> 133 <li><a href="./link" title="ホームへ戻る">Home</a> 134 <li class="link"><a href="./link" title="株式会社について">About</a> 135 <li class="link"><a href="./link" title="サービス">Service</a> 136 <li class="link"><a href="./link" title="採用情報">Recruit</a> 137 <li class="link"><a href="./link" title="お知らせ">News</a> 138 </ul> 139 <button type="button" title="お問い合わせ" class="button_top">Contact</button> 140 <a href="./link" title="株式会社"><img src="./img/oromo_top.png" alt="OROMO!"></a> 141 <p>株式会社</p> 142 <p>〒 550-0015</p> 143 <p></p> 144 <p>©︎ 2020 OROMO lnc.</p> 145 <div class="pt"> </div><!--ページトップ--> 146 <p class="pt">page top</p> 147 </footer> 148</html>
試したこと
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
ベストアンサー
CSSの先頭行の@charset"utf-8"の末尾に;が抜けているせいで、直後のhクラスに対するスタイルが読まれていないのでは。
Diff
1-@charset"utf-8" 2+@charset "utf-8";
投稿2021/03/01 15:38
編集2021/03/01 15:40
総合スコア11990
0
構文チェックした感じ
Another HTML-lint
CSS Validation Service
間違ってないし、HTMLに直書きすると指定の幅になったので、
css正しくリンクできてないのでは。
ありがちな内容なので過去質問も参考にしてください。
投稿2021/03/01 14:59
総合スコア80875
あなたの回答
tips
プレビュー
