🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1217閲覧

flex-box指定時に、要素の位置が思い通りに配置されないです。

chair

総合スコア25

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2020/01/03 05:43

編集2020/01/03 11:27

前提・実現したいこと 

下の画像の左下にある、丸いimg要素を他の3つと同じ様な配置にしたいです。

発生している問題・エラーメッセージ

1つだけ要素の位置がずれてしまう。

該当のソースコード

HTML

1<div class="founding-members"> 2 <p><img src="https://isara.life/wp-content/themes/isara_v2/img/teacherbg.jpg" alt="founding-members-back-img"></p> 3 <p class="founding-members-p1"><span><i class="far fa-address-card"></i>創業メンバー</span><br>実際にフリーランスとして活躍しているエンジニアが立ち上げました。</p> 4 <div class="teachers"> 5 <div class="teacher"> 6 <p class="teacher-photo"><img src="https://isara.life/wp-content/themes/isara_v2/img/keisuke_someya.jpg" alt="keisuke"></p> 7 <p class="teacher-text">フリーランス講師<br><span>染谷 佳佑</span><br>ISARA (THAILAND) CO.,LTD.の代表です。学生起業の後にリクルートへ就職、その後独立し、海外移住しました。今はフリーランスとしてリモートワークで日本円を稼ぎ、 8 外国通貨に変えて使い、海外を旅してます。営業、ブログPVアップ(最高月間150万PV)、ビジネス構築が専門です。</p> 9 </div> 10 <div class="teacher"> 11 <p class="teacher-photo"><img src="https://isara.life/wp-content/uploads/2018/10/yuki.png" alt="yuki"></p> 12 <p class="teacher-text">フリーランス講師<br><span>成田 雄輝</span><br>バンコクのシェアハウスのオーナーをやりながら一年の大半をタイで過ごしています。 大学時代から今に至るまでネットだけで生計を立てているので、 13 自由歴だけは講師陣の中で最長です! 母親がタイ人という事もありタイには精通してますので、こちらでの生活のサポートはお任せください!</p> 14 </div> 15 <div class="teacher"> 16 <p class="teacher-photo"><img src="https://isara.life/wp-content/themes/isara_v2/img/shohey.png" alt="shohey"></p> 17 <p class="teacher-text">フリーランス講師<br><span>大滝 昇平</span><br>月の半分は東京の会社にリモートで勤めつつ、フリーでも活動しているエンジニアです。Laravel・WordPressでのWeb制作がコアスキル。 18 立ち上げメンバーとしてカリキュラム原案制作に参画し、現在は外部アドバイザーをしています!</p> 19 </div> 20 <div class="teacher"> 21 <p class="teacher-photo"><img src="https://isara.life/wp-content/themes/isara_v2/img/manabu.png" alt="manabu"></p> 22 <p class="teacher-text">フリーランス講師<br><span>坂内 学</span><br>アドバイザーとして参画しました。新卒で海外就職して11ヶ月後に退職。今は日本にいたり海外にいたりでゆるくフリーランスをしています。 23 <br><br>お仕事はWebマーケティングとプログラミングが専門領域です。</p> 24 </div> 25 </div> 26 </div> 27</body>

CSS

1.founding-members img{ 2 width:100%; 3 margin-top:-337px; 4} 5.founding-members-p1{ 6 text-align:center; 7 line-height:70px; 8 position:relative; 9 top:-1250px; 10 font-weight:600; 11 color:#FFFFFF; 12} 13.founding-members-p1 span{ 14 font-size:28px; 15} 16.teachers{ 17 display:flex; 18 flex-direction:row; 19 flex-wrap:wrap; 20 width:900px; 21 position:relative; 22 left:100px; 23} 24.teacher{ 25 position:relative; 26 top:-1100px; 27 margin:-20px -90px; 28} 29.teacher-photo{ 30 height:200px; 31 width:200px; 32 display:inline-block; 33 z-index:2; 34 position:relative; 35 top:-320px; 36 left:300px; 37 flex-direction:row; 38} 39.teacher p img{ 40 border-radius:50%; 41 position:relative; 42 z-index:2; 43} 44.teacher-text{ 45 position:relative; 46 text-align:center; 47 width:270px; 48 height:270px; 49 border:solid 3px #FFFFFF; 50 display:inline-block; 51 color:#FFFFFF; 52 padding:50px; 53 line-height:26px; 54 } 55.teacher-text span{ 56 line-height:60px; 57}

試したこと

全角スペース等が入っていないか、確認しました。

補足情報(FW/ツールのバージョンなど)

!左下の丸い画像がずれている

左下の画像の位置がもっと下になるイメージでやっています。
(この画像は全体を表示するために縮小して表示しているので、要素の位置が左に寄っています)

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

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

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

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

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

guest

回答1

0

自己解決

すいません。私のケアレスミスでした。
<br>タグを間違えて2つ連続で書いてました。

投稿2020/01/04 09:49

chair

総合スコア25

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問