画像、テキストの左右配置

divのboxというタグで囲っているfood1.pngと<p>のテキストがあり、pngを左、テキストを右に配置したいです
またboxには背景に薄く透明のbackgroundを使っており写真とテキストの背景を薄く透明な灰色で覆いたいのですがどうすればよろしいでしょうか

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- baneではなくname -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/meanmenu.min.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!--インストールしたfontawesomeを読み込む-->
  <link rel="stylesheet" href="css/styles.css">
  <!--作ったCSSを読み込む-->
  <meta bane="viewport" content="width=device-width, initial-scale=1.0">
  <!--スマホで開いたとき度の幅で描画するかの設定-->

  <title>menu</title>
</head>

<body>
<header>

  <div class="aburasoba_main">
  <div class="aburasoba_main_about">
    <img src="img/wallpaper.jpg">
  </div>
  </div>

  <div class="aburasoba_main2">
  <div class="aburasoba_main_about2">
    <img src="img/wallpaper.jpg">
  </div>
  </div>

  <div class="container">
  <!--  <i class="fa fa-bars mobile-menu" aria-hidden="true"></i>-->
    <ul class="pc-menu">
      <li>トップ</li>
      <li>メニュー</li>
      <li>アクセス</li>
    </ul>

    <ul class="pc-menu2">
      <li><a href="#">トップaa</a></li>
      <li><a href="#">メニュー</a></li>
      <li><a href="#">アクセス</a></li>
    </ul>
  </div>

<div class="box">
      <img src="img/food1.png" width="300" height="190">
<p>“元気を食べてもらいたい ──”<br>
これが「ばんから」の原点であり、創業以来の精神です。<br>
麺、スープ、具。ラーメンというシンプルな料理ゆえ、これまで幾多もの苦労や苦難にぶつかるたびに、全力で向き合いながら“最高の一杯” を追い求めてきました。そのスタンスは、今も変わることはありません。<br>
「おいしかったよ」<br>
このひと言がうれしくて、私たちは常に考え、工夫を凝らし、試行錯誤を繰り返しながら、日々おいしさに磨きをかけています。<br>
</p>
</div>

</header>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.meanmenu/2.0.6/jquery.meanmenu.js"></script>
  <script>
      $(function () {
          $("div.container").meanmenu({});
      });
  </script>

  <footer>
    <div class="sita">
        <img src="img/footer.png">
    </div>
  </footer>

</body>

</html>

css
1/*１----------------------------------------------------------------------------------*/
2@charset "utf-8";
3/*common*/
4
5body{/*初期設定、余計なmargin,paddingを0に*/
6font-size: 14px;
7font-family: Verdana, sans-serif;
8margin: 0;
9padding: 0;
10color: #F2F2F2;
11background: #F2F2F2;
12/*初期設定*/
13}
14p{/*行間がゆったりする*/
15line-height: 2;
16}
17
18.container{/*ここで90％の意味はmysiteという上の文字や写真、写真のコメントなどをかこんでいて
19  左右に一定の空きができる*/
20  width: 90%;
21  margin: 0 auto;
22}
23
24header{
25  /*背景画像*/
26  background-image: url("../img/background.jpg");
27  background-repeat: no-repeat;
28  background-attachment: fixed;/*背景を固定している*/
29  background-position: center;/*背景が中央に設定される*/
30  background-size:cover;/*背景画像をちゃんと表示*/
31  padding-bottom: 50px;/*ここでpaddingを設定したからsectionのpaddingが無効に*/
32}
33
34
35/*aburasoba_main トップの背景*/
36.aburasoba_main{
37  background-color: black;
38  /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/
39}
40
41.aburasoba_main_about img{
42
43   display: block;
44   margin-left: auto;
45   margin-right: auto;
46   max-width: 100%;
47}
48
49/*aburasoba_main トップの背景のウィンドウを小さくしたときに表示させたいやつ*/
50.aburasoba_main2{
51  background-color: black;
52  /*margin: 10px;*//*ここにマージンを入れるとblackの余白を入れられる*/
53  padding-left: 50px;
54  padding-right: 50px;
55}
56
57.aburasoba_main_about2 img{
58
59   display: block;
60   margin-left: auto;
61   margin-right: auto;
62   max-width: 100%;
63}
64
65/*header-mobile-menuはアイコン右寄せ*/
66.mobile-menu{
67float: right;
68font-size: 24px;
69cursor: pointer;
70}
71
72.pc-menu{
73display: block;/*要素の表示形式をしていするっぽい、ブロック要素を表示,,*/
74/*46行目にheader-pc-menuを見えない設定をして、ここで820px以上いくとここで表示させる*/
75list-style: none;
76padding: 10px;
77margin: 0;
78/*余計なマージンパディング取る、*/
79float: center;/*mysiteも入っているpc-menuの中に右にする設定*/
80text-align: center;
81/*
82background:rgba(51,51,51, 0.85);
83font-weight: bold;*/
84}
85
86.pc-menu2 {
87    display: flex;/*追加*/
88    width: 100%;
89    margin: 0;
90    list-style-type: none;
91    flex-wrap: nowrap;/*追加*/
92    padding: 0;
93}
94
95
96.pc-menu > li {
97display: inline-block;/*横にする設定*/
98width: 60px;
99text-align: center;
100cursor: pointer;
101}
102
103.pc-menu2 li {
104    padding: 0;
105    margin: 0;
106    text-align: center;
107    flex-grow: 1;/*追加*/
108}
109.pc-menu2 li a{
110  width: auto;
111  color:#fff;
112  font-size:12px;
113  font-weight:bold;
114  padding: 10px 0;
115  text-decoration:none;
116  display:block;
117  background:#666;
118}
119.pc-menu2 li a:hover{
120  background: #555;
121}
122
123/*sita ...imgと指定すれば画像が指定できた*/
124.sita img {
125  display: block;
126  height: 90px;
127  margin: 0 auto;
128  width: 160px;
129}
130
131/*レスポンシブデザインの3本線の設定*/
132.mean-container a.meanmenu-reveal span {
133 display: block;
134 background: #cccccc;
135 height: 3px;
136 margin-top: 3px;
137}
138
139/*テキストの枠組みの設定*/
140/*box*/
141.box {
142margin: 2em 0;/*線？*/
143margin: 50px;/*左右余白*/
144}
145.box .box-title {
146font-size: 1.2em;
147background:rgba(51,51,51, 0.85);
148padding: 4px;
149text-align: center;
150color: #cccccc;
151font-weight: bold;
152letter-spacing: 0.05em;
153}
154
155.box img{
156  width:45%;
157  height: 45%;
158}
159
160.box p {
161padding: 15px 20px;
162margin: 0;
163background:rgba(51,51,51, 0.85);
164color: #cccccc;
165}
166
167.box img{
168padding: 15px 20px;
169margin: 0;
170background:rgba(51,51,51, 0.85);
171color: #cccccc;
172}
173
174.box h2 h3 {
175padding: 15px 20px;
176margin: 0;
177background:rgba(51,51,51, 0.85);
178color: #cccccc;
179}
180
181/*food*/
182
183
184/*レスポンシブルデザイン設定①*/
185/*幅の大きさが変わる設定*/
186/*画面が414px以下になったとき*/
187@media (max-width: 414px){
188  .pc-menu{
189  color:#cccccc;
190  }
191  .aburasoba{/*アイコンを消す*/
192  display: none;
193  }
194  .pc-menu2{
195    display: none;
196  }
197/*.pull-right*/
198.right-side{
199    float: right;
200    padding-left: 5%;
201}
202/*.pull-left*/
203.left-side{
204    float: left;
205    padding-right: 5%;
206}
207
208.news .container{
209    display: flex;
210    justify-content: space-between;/*均等に余白が空く設定*/
211}
212.news .item{/*newsに入っている画像と文字に対して30%*/
213    width: 30%;
214}
215.news .item img{/*画像が30％だとちゃんと見えないので画像だけ100%に*/
216    width: 100%;
217}
218.aburasoba_main_about img{
219  display: none;
220}
221
222}
223/*画面が414px以上になったとき
224min-widthが〇〇以上、max-widthが〇〇までという認識*/
225@media (min-width: 414px){
226.container{
227    width: 414px;
228}
229.mobile-menu{/*アイコンを消す*/
230display: none;
231}
232
233.pc-menu{
234  display: none;
235}
236
237.aburasoba_main_about2 img{
238  display: none;
239}
240
241}
242/*
243
244/*footer*/
245
246footer {
247    text-align: center;
248    padding: 10px 0;
249}
250

行動規範の内容に同意します

回答2件

ベストアンサー

≫pngを左、テキストを右に配置したい
下記のようにすれば良いでしょう。

CSS
1.box{
2display:flex;
3}

その方が、「float: left;」による回り込みで次のボックスまで回り込んでしまうので、回り込みの解除の
「clear:both;」を入れないといけない。
でも、「display:flex;」は、回り込み解除しなくても出来ます。

≫.boxに単にbackground-colorでアルファチャンネルつきのカラーを指定してあげればよいのではないでしょうか。

投稿2017/10/26 08:45

amaryllis

総合スコア179

単純に左右に配置するだけなら下記のCSSでうまくいくと思います。
背景に色をつけるというのの完成系がいまいちわからないのでなんともいえないのですが、.boxに単にbackground-colorでアルファチャンネルつきのカラーを指定してあげればよいのではないでしょうか。

css
1
2.box img {
3    float: left;
4}
5
6.box p {
7    float: right;
8}
9
10.box:after {
11    content:" ";
12    display:block;
13    clear:both;
14}
15