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

0

2024年12月23日 22:38

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

サイト作成中に
###「要素を思い通りの位置に配置できない!」
となった際のポイントを纏めています。
(実際に自分が克服した方法)

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

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。