以下のCSSをレスポンシブデザインに対応させたいと思っております。
PCでは元のデザイン、スマホ・タブレットでは画面サイズに合わせて伸縮させたデザインに、といった感じなのですが、
自分で色々とやってみたのですが、imgとh3の要素を同じ比率で表示されなかったり、上部に大きなスペースができたりと上手くいきませんでした。
ご教授よろしくお願いいたします。
css
1#profile{ 2 padding: 0px; 3 margin: 0px auto; 4 text-align:left; 5} 6 7#profile h2{ 8 text-align: center; 9 font-size: 2.0rem; 10 background-color: #8B8B8B; 11 color: #ffffff; 12 border-radius: 0.5em; 13 padding: 0.5% 1%; 14 margin: 0.5%; 15 white-space: nowrap; 16} 17 18#profile ul#charcters{ 19 margin: 0px auto; 20 padding: 0px; 21 list-style: none outside; 22 width:801px; 23} 24#profile ul#charcters li{ 25 display: block; 26 width:801px; 27// height:177px; 28 29 padding:0px; 30 margin: 0px auto 30px; 31} 32#profile ul#charcters li img{ 33 vertical-align: top; 34 display:inline-block; 35 margin:0px; 36 padding:0px; 37} 38#profile ul#charcters li div{ 39 display:inline-block; 40 margin:0px; 41 padding:0px 0px 0px 0px; 42 max-width:655px; 43} 44#profile ul#charcters li h3{ 45 border: 1px solid #202020; 46 border-left: 5px solid #404040; 47 border-right: 1px solid #808080; 48 border-top: 1px solid #808080; 49 background-color: #808080; 50 color: #ffffff; 51 max-width:655px; 52 min-width:655px; 53 height: 30px; 54 font-size: 20px; 55 line-height: 24px; 56 text-indent: -3px; 57 padding: 4px 0px 0px 0px; 58} 59 60#profile ul#charcters li p{ 61 padding: 2px 4px; 62 font-size: 18px; 63 line-height: 24px; 64}
HTML
1 <div id="profile"> 2 <h2>登場人物紹介</h2> 3 4 <ul id="charcters"> 5 <li> 6 <img src="img/icon-hoge.png" width="129" height="177" alt=""> 7 <div> 8 <h3>ほげ</h3> 9 <p> 10 ほげほげ 11 </p> 12 </div> 13 </li> 14 </div>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/07 02:26