前提・実現したいこと
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}