
付属画像の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>

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html/cssの、navを2段にする...
-
ページを開いているときのリン...
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
リストを横並びにするとマーカ...
-
divタグ内のコンテンツが重なっ...
-
jQuery-もっと見るボタンをスマ...
-
Tableの1セル内に画像・テキス...
-
HTMLで組織図を作成する方法
-
透明のボックスにリンクを貼りたい
-
jQuery:マウスオーバーで画像...
-
htmlの<ol>タグで、数字などを...
-
レスポンシブWebデザインでリン...
-
スマホの実機でレイアウトが崩...
-
テーブル内のプルダウンの下に...
-
箇条書きがずれて表示されてし...
-
【Html CSS】<a>の上に文字を配...
-
ボタンを横に並べて表示させる方法
-
番号付きリスト(<Ol><Li>・・...
-
リストの数字のフォントサイズ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
html/cssの、navを2段にする...
-
liタグの中に<p>タグやら<dl>を...
-
divタグ内のコンテンツが重なっ...
-
htmlの<ol>タグで、数字などを...
-
ドロップダウンメニューが隠れ...
-
<li>タグの数が増えすぎたので...
-
番号付きリスト(<Ol><Li>・・...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
list-style-type部分だけ大きく...
-
<ul><li></li></ul>にするメリ...
-
複数行にまたがる括弧を表示し...
-
リンク文字同士の間隔を開ける...
-
画像にリンクを張ると画像がず...
-
テーブル内のプルダウンの下に...
-
html <li>の中の文字一部に色を...
-
ページを開いているときのリン...
-
IEで<td>の全角を有効にする方法
おすすめ情報