Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

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

サイト作成中に

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

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

今回作成したい完成図がこちら↓
スクリーンショット 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

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
0
Help us understand the problem. What are the problem?