エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSS】コツはパーセント計算!positionをレスポンシブで使うとズレるときに気を付けること | deep-space.blue
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSS】コツはパーセント計算!positionをレスポンシブで使うとズレるときに気を付けること | deep-space.blue
「position レスポンシブ」「position レスポンシブ ずれる」などの検索キーワードで当ブログを訪れてく... 「position レスポンシブ」「position レスポンシブ ずれる」などの検索キーワードで当ブログを訪れてくださる方がいることに気づいたのですが、【css】position:absolute怖くなくなるまで徹底解剖!の記事では「基準位置の要素の大きさも、配置する要素の大きさも、そして位置の指定もすべて%で計算して配置してみましょう。」としか書いていなかったので、詳しく説明します。 作るのはコチラ→ 比率を保ったままレスポンシブするデモ 大きさを測る 今回は四角の中にハートを配置したデザインを、比率を保ったままレスポンシブさせます。 まずはデザインデータの各所の大きさを測ります。 【重要】各所のパーセントを計算する はかったピクセルをもとに%を計算するのですが、ここにクセがあるので注意が必要です。 注目してほしいのは「上の余白100pxと、左の余白100pxで、パーセントの値が違うこ