付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように灰色のリストの左側の真ん中に３

解決済

質問者：pjdmgam
質問日時：2021/06/02 08:06
回答数：1件

付属画像がwebの表示画像ですが、その画像の赤い丸で囲ってあるように
灰色のリストの左側の真ん中に３行ほど文字を入れたいです。

コードは以下でです。
回答よろしくお願いいたします。

<!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%;
}
</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>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2021/06/02 08:57

pjdmgam さん

　･････左側の真ん中に３行ほど文字を入れたい･････

例えば、

<!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%;
}
.wrap .wrap_inner_right .txtbox {
height:420px;
display: flex; justify-content:center; align-items: center;
}
</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="txtbox">
<span>付属画像がwebの表示画像ですが、<br>
その画像の赤い丸で囲ってあるように<br>
灰色のリストの左側の真ん中に３行ほど文字を入れたいです。</span>
</div>
</div>
</div>
</body>
</html>