質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1935閲覧

CSSの配置について【isara模写】

yuktkhs

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

タグ

特殊な記法により文書に埋め込む形で記述される付加情報をタグと呼びます。文書構造や書式、文字飾りなどを指示したり、画像や他の文書へのリンクを埋め込むことができる。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/24 03:28

前提・実現したいこと

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を指定してもダメでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

css

1 border-bottom: -45px;

↑これは↓ではないですか?

css

1 bottom: -45px;

投稿2020/05/24 04:11

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuktkhs

2020/05/24 05:57

ご指摘の通りの間違いでした。こんな単純なミスだったとは。。 ありがとうございます!
guest

0

参照元サイトを見ればわかるんでは。
まあ、やるとしたら画像を背景画像として指定することくらいでしょうか。

投稿2020/05/24 03:55

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuktkhs

2020/05/24 05:56

おっしゃる通りで、参照元サイトの確認をしっかりでしてから質問しなくてはいけませんね。。 ありがとうございます!
m.ts10806

2020/05/24 06:28

背景画像に、は読まれてないですか
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問