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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

1回答

2191閲覧

リンクに画像を指定した場合のサイズ変更の仕方

mgm1989

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2018/09/08 10:31

編集2022/01/12 10:55

前提・実現したいこと

PC用に組んだものをレスポンシブデザインでスマホにも適用させたく…

3つのリンクの部分の文字を画像で読み込んでおり、
本来であれば文字数に応じて画像の幅が違うものなのですが、
横幅が3つのリンクで同じ数値に固定され、縦の高さはバラバラで…と縦横比が崩れてしまいます。
高さは同じで、幅が変わるようにしたいです。
PC版ではデザインが多少違いますがこの部分は問題ありませんでした。

少しずついじってはみたのですが、
全体のサイズは変更できても文字数による変化が付けられませんでした。
どこかのコードで指定してしまっているのでしょうか?

ゼロから組んだのが初めてなので
不自然な点が多々あるかと思いますが
よろしくお願い致します。

※修正
各画像のサイズは以下の通りです。

PROFILEspmenu.png 310×70px
WORKSspmenu.png 282×70px
CONTACTspmenu.png 334×70px

%で少し調整してます。

追加情報遅くなりすみません。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 6 <title>DESIGN WORK。</title> 7 <link rel="stylesheet" href="index.css"> 8 <script type="text/javascript" src="//typesquare.com/3/tsst/script/ja/typesquare.js?5b8a09b4cbd441a8840b470cac1e02ec" charset="utf-8"></script> 9 </head> 10 <body> 11 <header> 12 <img class="pc" src="images/logo.png" alt="DESIGN WORK。"> 13 <img class="sp" src="images/logosp.png" alt="DESIGN WORK。"> 14 </header> 15 <div class="main-contents"> 16 <div class="profile"> 17 <a href="profile/profile.html"> 18 <img class="pc" src="images/PROFILE.png"> 19 <img class="sp" src="images/PROFILEsp.png"> 20 </a> 21 </div> 22 <div class="works"> 23 <a href="http://designwork-j.tumblr.com/" target="_brank"> 24 <img class="pc" src="images/WORKS.png"> 25 <img class="sp" src="images/WORKSsp.png"> 26 </a> 27 </div> 28 <div class="contact"> 29 <a href="contact/contact.html"> 30 <img class="pc" src="images/CONTACT.png"> 31 <img class="sp" src="images/CONTACTsp.png"> 32 </a> 33 </div> 34 </div> 35 <footer> 36 <img class="pc-f" src="images/CopyRight%20DESIGN%20WORK%20All%20Rights%20Reserved.%20.png"> 37 <img class="sp-f" src="images/CopyRight%20DESIGN%20WORK%20All%20Rights%20Reservedsp.png"> 38 </footer> 39 </body> 40</html>

CSS

1body { 2 background-color:rgb(255,255,255); 3 width: 100% 4 height: auto; 5} 6 7header { 8 padding: 91px 23px 0 96px; 9} 10 11.main-contents { 12 padding-left: 96px; 13} 14 15a:hover img { 16 opacity: 0.6; 17} 18 19.pc { display: block !important; } 20.sp { display: none !important; } 21 22.pc-f { display: block !important; } 23.sp-f { display: none !important; } 24 25footer { 26 float:right; 27 padding: 119px 23px 24px 0; 28 position: fixed; 29 right: 0; 30 bottom: 0; 31} 32 33@media (max-width: 320px) { 34 35 body { 36 width: 100%; 37 height: auto; 38 } 39 40 img { 41 width: 100%; 42 height: auto; 43 } 44 45 header { 46 width: 100%; 47 padding: 60px 30px; 48 box-sizing: border-box; 49 } 50 51 .main-contents { 52 padding: 50px 30px; 53 } 54 55 a:hover img { 56 opacity: 1; 57 } 58 59 .pc { display: none !important; } 60 .sp { display: block !important; } 61 62 .profile { 63 width: 50%; 64 height: auto; 65 padding-bottom: 60px; 66 box-sizing: border-box; 67 } 68 69 .works { 70 width: 50%; 71 height: auto; 72 padding-bottom: 60px; 73 box-sizing: border-box; 74 } 75 76 .contact { 77 width: 50%; 78 height: auto; 79 box-sizing: border-box; 80 } 81 82 .pc-f { display: none !important; } 83 .sp-f { display: block !important; } 84 85 footer { 86 width: 100%; 87 height: auto; 88 position:static; 89 float: none; 90 margin: 0 auto; 91 text-align: center; 92 padding: 120px 80px 10px 80px; 93 box-sizing: border-box; 94 } 95 96}

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

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

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

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

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

spookybird

2018/09/09 01:55

状況を再現させるために各画像をData URIでご提供いただくか、各画像のサイズを教えてください。
TONGARI

2018/09/10 09:22

ブレイクポイントをうってもダメでしたでしょうか(;O;)
TONGARI

2018/09/10 09:22

ブレイクポイントをうってもダメでしたでしょうか(;O;)
guest

回答1

0

CSS

1@media (max-width: 320px) { 2 3 ... 4 5 img { 6 width: 100%; 7 height: auto; 8 } 9 10 ... 11 12 .profile { 13 width: 50%; 14 height: auto; 15 padding-bottom: 60px; 16 box-sizing: border-box; 17 } 18 19 .works { 20 width: 50%; 21 height: auto; 22 padding-bottom: 60px; 23 box-sizing: border-box; 24 } 25 26 .contact { 27 width: 50%; 28 height: auto; 29 box-sizing: border-box; 30 } 31 32 ... 33 34 } 35 36}

を,

CSS

1@media (max-width: 320px) { 2 3 ... 4 5 //例えばこのくらいの値でしょうか. 6 a img { 7 //画像の高さのみを同じに. 8 height: 2em; 9 //ついでに間隔の大きさも同じに. 10 padding: 1em; 11 } 12 13 ... 14 15 .profile { 16 //削除 17 } 18 19 .works { 20 //削除 21 } 22 23 .contact { 24 //削除 25 } 26 27 ... 28 29 } 30 31}

 widthの%が効いていたのが原因です.

投稿2018/09/13 03:04

IKIX

総合スコア142

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問