※ ChatGPTを利用し、要約された質問です(原文:付属画像の1794×400の画像の下の)
画像の下の高さを200pxに変更する方法
このQ&Aのポイント
1794×400の画像の下にある1794 ×200の高さを200pxに変更する方法を教えてください。
CSSのクラス名kodai2の高さを200pxに変更しても上の画像の高さが適応されてしまう問題について解決策を教えてください。
HTMLとCSSを使用して、上の画像の高さはそのままで、下の画像の高さのみ200pxに変更する方法を教えてください。
付属画像の1794×400の画像の下の1794 ×200の高さを200pxにして表示させたいのですが、高さを200pxに変更しても上の画像の高さが適応されてしまいます。上の画像 1794×400高さと幅はそのままで、下の画像の高さのみ変更するにはどうしたらよいでしょうか?.kodai2{
height: 200px;反映されません。
コード以下にあります。回答よろしくお願いいたします。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title></title>
<style>
* { margin : 0;
padding : 0;
-webkit-box-sizing : border-box;
box-sizing : border-box;
}
.box {
height : 56px;
width : 100%;
background-color : #0fd;
}
.wrap{
width : 100%;
display : -webkit-box;
display : -ms-flexbox;
display : flex;
-ms-flex-wrap : nowrap;
flex-wrap : nowrap;
padding-bottom : 30px;
}
.wrap .wrap_inner_left {
width : 300px;
}
.wrap .wrap_inner_left ul {
width : 300px;
}
.wrap .wrap_inner_left ul li {
color : #444;
list-style-type : none;
width : 300px;
height : 30px;
line-height : 30px;
padding-left : 20px;
border-bottom : solid 1px #53535352;
background-color : #f6f4f4;
}
.wrap .wrap_inner_left ul li:first-child {
border-top : solid 1px #53535352;
}
.wrap .wrap_inner_right {
width : 100%;
}
/* トップの画像のスタイル */
.wrap .wrap_inner_right img {
width : 100%;
height: 400px;
}
.kodai2{
height: 200px;
}
/* 画像の下の右の太文字タイトル */
.mozi1{
font-size: 36px;/* 文字の大きさ */
font-weight: 900;/* 文字の太さ */
text-align: center;/* 文字を中央に配置 */
color: #63e02d;
margin-top: 19px;/* 上の余白 */
}
</style>
</head>
<body>
<div class="box">正方形</div>
<div class="wrap">
<div class="wrap_inner_left">
<ul>
<li>使い方・マニュアル</li>
<li></li>
<li></li>
<li>翻訳機能</li>
<li>英語</li>
<li>中国語</li>
<li>スペイン語</li>
<li>フランス語</li>
<li>ロシア語</li>
<li>アラビア語</li>
<li>a</li>
<li>a</li>
<li>ヘルプ</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>w</li>
<li>s</li>
<li>mmmm</li>
<li>ログアウト</li>
</ul>
</div>
<div class="wrap_inner_right">
<img src="https://placehold.jp/1794x400.png">
<div class="kodai2">
<img src="https://placehold.jp/1794x200.png">
</div >
</div> </div>
</body> </html>