Help us understand the problem. What is going on with this article?

要素配置時のポイント【ポートフォリオ作成編】

こんにちは。ばーんです。

サイト作成中に

「要素を思い通りの位置に配置できない!」

となった際のポイントを纏めています。
(実際に自分が克服した方法)

今回作成したい完成図がこちら↓
スクリーンショット 2019-12-10 12.06.01.png

実際に作成するとわかるのですが、要素が細かくあるため、テキトーに配置していくと、後で大惨事になります…

今回苦戦したのが↓の③「Profile」[Work]ボタンです。
スクリーンショット 2019-12-10 12.06.01 2.png

divでボタンを作って…
で配置すると↓こうなりました。
スクリーンショット 2019-12-10 12.06.01 3.png

そうだ、そうだ!inline-blockにしないと
でdisplay指定すると…
スクリーンショット 2019-12-10 12.06.01 3 2.png

なんでfloatもしてないのに、回り込むの(ToT)

ここで四苦八苦します(変なスタイルあたってないか検証見たりしてもダメ)。
position:relativeで無理やり動かすと、レスポンシブ対応ができない…

相当時間を費やした後、冷静になります。

今の要素を書き出してみよう。

実際はこんな感じです↓
IMG_20191211_153111.jpg

ここで正解にたどり着きました。
親要素がないので(一番大枠のdivが親要素になってるので)、
横並びになってました!

スクリーンショット 2019-12-10 12.06.01 2.png

なので、↑の写真で言うと❷と❸を括った親要素が必要だった!
ということですね。

というわけで、配置に困った時のポイントは、

「今の要素を書き出してみる」

でした。

最後まで見て頂いてありがとうございましたm_ _m

baan_nasebanaru
2019.11~ITに興味を持ち学習開始。現在は副業としてWebサイト制作やシステム開発に携わっています。React中心でお仕事を受けています。 転職活動開始しました。 わくわく会というコミュニティにも所属しており初学者の方のサポートや、案件の紹介をしています。もちろん無料のコミュニティなので、興味のある方は是非お声掛けください^^ (TwitterのDMが1番反応しやすいです!)
https://baan.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away