前提・実現したいこと
isara(https://isara.life/)の模写コーディングを行っています。
創業メンバーという部分で、画像と内容の部分を重ねる方法がわからず困っています。
HTML
1<div id="member"> 2 <div class="container"> 3 <h2>創業メンバー</h2> 4 <p>実際にフリーランスとして活躍しているエンジニアが立ち上げました</p> 5 <div class="members"> 6 <div class="member"> 7 <img src="https://isara.life/wp-content/themes/isara_v2/img/keisuke_someya.jpg" alt=""> 8 <div class="member-detail"> 9 10 <p>フリーランス講師</p> 11 <p>染谷 佳佑</p> 12 <p class="member-content">ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しました。今はフリーランスとしてリモートワークで日本円を稼ぎ、外国通貨に変えて使い、海外を旅してます。営業、ブログPVアップ(最高月間150万PV)、ビジネス構築が専門です。</p> 13 </div> 14 15 </div> 16 <div class="member"> 17 <img src="https://isara.life/wp-content/uploads/2018/10/yuki.png" alt=""> 18 <div class="member-detail"> 19 20 <p>フリーランス講師</p> 21 <p>成田 雄輝</p> 22 <p class="member-content">バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。 大学時代から今に至るまでネットだけで生計を立てているので、自由歴だけは講師陣の中で最長です! 母親がタイ人という事もありタイには精通してますので、こちらでの生活のサポートはお任せください!</p> 23 </div> 24 25 </div> 26 <div class="member"> 27 <img src="https://isara.life/wp-content/themes/isara_v2/img/shohey.png" alt=""> 28 <div class="member-detail"> 29 30 <p>フリーランスエンジニア</p> 31 <p>大滝 昇平</p> 32 <p class="member-content">月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。Laravel・WordPressでのWeb制作がコアスキル。立ち上げメンバーとしてカリキュラム原案制作に参画し、現在は外部アドバイザーをしています!</p> 33 </div>
CSS
#member{ background-image: url("https://isara.life/wp-content/themes/isara_v2/img/teacherbg.jpg"); color: #fff; text-align: center; background-size: cover; padding: 30px 150px; } .members{ display: flex; flex-wrap: wrap; justify-content: center; } .member{ width: 40%; margin: 30px 16px; } .member img{ border-radius: 50%; position: relative; border-bottom: -45px; } .member-content{ width:75%; display: inline-block; text-align: left; } .member-detail{ border: 3px solid #fff; padding: 40px; }
該当のソースコード
試したこと
<img>タグにposition:relativeとbottomを指定してもダメでした。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/05/24 05:57