付属画像の右側のような配置にしたいのですが、上手くいきません。 ◎◎ 付属画像の左側が現在のコードの

解決済

質問者：pjdmgam
質問日時：2021/05/29 09:04
回答数：1件

付属画像の右側のような配置にしたいのですが、上手くいきません。

◎◎ 付属画像の左側が現在のコードのwebでの表示画面なのですが、テーブル（灰色）の位置が上に行かず中途半端な位置になってしまいます。これをテーブルの幅や大きさを変えずに上げてたいです。

◎◎
画像が大きいせいか、画像がテーブル（灰色）にかぶさっています。これをテーブル（灰色）の大きさを一切変えずに、付属画像のように適切な位置に配置したいです。元の画像のサイズは幅1794、高さ1024の大きさです。

困っています。回答よろしくお願いいたします。

<!DOCTYPE html>

<html>
<head>
<meta content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="seo.css">

</head>
<body>
<div class="box">正方形

</div>
<div class="mainlyrics1">
<img src="apurilyrics1.png">

</div>
<table>

<tr><td class="td-css1">使い方・マニュアル</td></tr>

<tr><td class="td-css2"></td></tr>
<tr><td class="td-css2"></td></tr>
<tr><td class="td-css2">・・高度翻訳機能・・</td></tr>
<tr><td class="td-css2">英語</td></tr>
<tr><td class="td-css2">中国語</td></tr>
<tr><td class="td-css2">スペイン語</td></tr>
<tr><td class="td-css2">フランス語</td></tr>
<tr><td class="td-css2">ロシア語</td></tr>
<tr><td class="td-css2">アラビア語</td></tr>
<tr><td class="td-css2">a</td></tr>
<tr><td class="td-css2">a</td></tr>
<tr><td class="td-css2">ヘルプ</td></tr>
<tr><td class="td-css2">b</td></tr>
<tr><td class="td-css2">c</td></tr>
<tr><td class="td-css2">d</td></tr>
<tr><td class="td-css2">e</td></tr>
<tr><td class="td-css2">f</td></tr>
<tr><td class="td-css2">g</td></tr>
<tr><td class="td-css2">h</td></tr>
<tr><td class="td-css2">w</td></tr>
<tr><td class="td-css2">s</td></tr>
<tr><td class="td-css2">mmmm</td></tr>
<tr><td class="td-css2">ログアウト</td></tr>
</table>
</body></html>
◎◎◎ｃｓｓのコード（seo css)

/* 余白を無くすコード一番うえに記載で適応 */
body{
margin: 0px;
}
/* ヘッダボックスのデザイン */
.box{
height:56px;
width:100%;
background-color: rgb(0, 255, 221);
}
table {
border-collapse: collapse;
background-color:hsl(0, 9%, 96%);
}
.td-css1 {
color: rgb(68, 68, 68);
}
.td-css2{
border-left-style:none;
margin-left: 0%;
color: rgb(68, 68, 68);
}
/* 線のデザイン */
table td {
border: solid 1px #53535352;
width: 300px;
height: 30px;
}
/* 画像のデザイン */
.mainlyrics1{
height: 300px;
width: 100px;
margin-right: 100%;
margin-left: 200px;
margin-bottom: 0px;
}