↓HTMLはこんな感じ(共通部分)
<div class="menu-item"> <img src="img/tart.jpg" alt="タルトの写真" width="340" height="300"> <div class="menu-text"> <p>大海原を悠然と泳ぐクジラの姿を見たことがあるでしょうか。そのゆったりとした動きや優しい眼差しを見ていると、慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっと過ごしたひとときの心の充実を、私は今も忘れません。</p> <p>そんなゆったりとした時間を過ごせるカフェがあったら……そんな思いでつくったのが、このKUJIRA CAFEです。古材を活用した味わいのある内装、花と緑に囲まれたテラス。旬の味覚をふんだんに使ったタルトや、地元の野菜にこだわったキッシュは、どれも手作りです。コーヒーは注文をいただいてから焙煎し、挽きたての香りをお楽しみいただいております。</p> <p>天気のいい日には、自然を感じられるテラス席もおすすめ。テラス席のみ、ペットの同伴もOKです。おひとり様もお子様連れの方も、お気に入りのお席で、思い思いの時間をゆったりとお過ごしください。</p> <p>カフェでの時間をより楽しいものにしていただくべく、フラワーアレンジメントの講座や絵本の読み聞かせ、作品展やライブなど、さまざまなイベントも開催しております。スケジュールは<News>で告知いたしますので、ご確認くださいませ。</p> <p>皆さまのお越しを心よりお待ちしております。</p> </div> </div>
↓CSSはこんな感じ。(共通部分)
/* わく全体囲み */ .menu-item { background-color: #fbfaf5; /* 背景色 */ border: solid 3px skyblue; /* わく線 */ margin-bottom: 50px; /* 余白下 */ } /* 文字部分 */ .menu-text { border: solid 1px red;/* わく線 */ } /* 画像 伸縮させる */ img{ max-width: 100%; /* 横幅 最大100% */ height: auto; /* 高さ 自動指定 */ border: solid 2px blue; /* 枠線 */ padding-right: 1em; /* 1文字分間をあける */ }
↓CSS 共通部分に付け足して フレックスボックスを使用
/* ---------------------------------------------- フレックスボックス で回り込み ------------------------------------------------*/ /* わく全体囲み */ .flex-box{ display: flex; /* フレックスボックス */ align-items: flex-start; /* これを入れないと画像が縦に伸びる */ /* align-itemsのデフォルトが align-items:stretch;(伸縮して揃える) になっているので高さいっぱいまで広がってしまうため align-items: flex-start;で上に揃えて配置にする */ }
↓HTMLはこんな感じ(共通部分に flex-box クラス追加)
<div class="menu-item flex-box"> <img src="img/tart.jpg" alt="タルトの写真" width="340" height="300"> <div class="menu-text"> <p>大海原を悠然と泳ぐクジラの姿を見たことがあるでしょうか。そのゆったりとした動きや優しい眼差しを見ていると、慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっと過ごしたひとときの心の充実を、私は今も忘れません。</p> <p>そんなゆったりとした時間を過ごせるカフェがあったら……そんな思いでつくったのが、このKUJIRA CAFEです。古材を活用した味わいのある内装、花と緑に囲まれたテラス。旬の味覚をふんだんに使ったタルトや、地元の野菜にこだわったキッシュは、どれも手作りです。コーヒーは注文をいただいてから焙煎し、挽きたての香りをお楽しみいただいております。</p> <p>天気のいい日には、自然を感じられるテラス席もおすすめ。テラス席のみ、ペットの同伴もOKです。おひとり様もお子様連れの方も、お気に入りのお席で、思い思いの時間をゆったりとお過ごしください。</p> <p>カフェでの時間をより楽しいものにしていただくべく、フラワーアレンジメントの講座や絵本の読み聞かせ、作品展やライブなど、さまざまなイベントも開催しております。スケジュールは<News>で告知いたしますので、ご確認くださいませ。</p> <p>皆さまのお越しを心よりお待ちしております。</p> </div> </div>
↓CSS 共通部分に付け足して フロートを使用
/* ---------------------------------------------- フロート で回り込み ------------------------------------------------*/ /* わく全体囲み */ .float { overflow: hidden; /* フロート解除 */ } /* わく内 画像部分 */ .float img{ float: left; /* フロート 左 */ }
↓HTMLはこんな感じ(共通部分に float クラス追加)
<div class="menu-item float"> <img src="img/tart.jpg" alt="タルトの写真" width="340" height="300"> <div class="menu-text"> <p>大海原を悠然と泳ぐクジラの姿を見たことがあるでしょうか。そのゆったりとした動きや優しい眼差しを見ていると、慌ただしい日常が遠い世界のできごとのように感じられるのです。時間が経つのも忘れて、ただただクジラを眺めてぼーっと過ごしたひとときの心の充実を、私は今も忘れません。</p> <p>そんなゆったりとした時間を過ごせるカフェがあったら……そんな思いでつくったのが、このKUJIRA CAFEです。古材を活用した味わいのある内装、花と緑に囲まれたテラス。旬の味覚をふんだんに使ったタルトや、地元の野菜にこだわったキッシュは、どれも手作りです。コーヒーは注文をいただいてから焙煎し、挽きたての香りをお楽しみいただいております。</p> <p>天気のいい日には、自然を感じられるテラス席もおすすめ。テラス席のみ、ペットの同伴もOKです。おひとり様もお子様連れの方も、お気に入りのお席で、思い思いの時間をゆったりとお過ごしください。</p> <p>カフェでの時間をより楽しいものにしていただくべく、フラワーアレンジメントの講座や絵本の読み聞かせ、作品展やライブなど、さまざまなイベントも開催しております。スケジュールは<News>で告知いたしますので、ご確認くださいませ。</p> <p>皆さまのお越しを心よりお待ちしております。</p> </div> </div>