CSSで画像位置を微調整する方法

画像の微妙な位置が画面のバランスを左右することがあります。少しずらしていってもなかなかしっくりこなかったりもしますが、時間をおいて見直すと改善することもあります。不思議なものです。

位置移動はmarginでもpaddingでもできる

基本としてmarginの4辺について数字を変えてみましょう。paddingの数字を大きくすると、余白の所に背景色が表示されるからです。背景色がすべて白一色の時等、周りと同じ色の時はpaddingで変えても良いでしょう。paddingは正の数字しかとれませんが、marginは負の数字を使って隣の要素に接近させることも可能です。隣り合う要素のmarginの値が正で大きいときはmarginの値を少し変えても動かない場合があるかもしれません。

レイアウトを寝かせる

レイアウトや配色は同じような作業を続けていくと、目が肥えていっていつまで経っても作っている人にとって良くできたと思える仕上がりにたどり着かないときがあります。そんなときは、違うことをやったり、休んだりして時間を空けると解決策が見つかったり、いつの間にかできばえが良くなっていたりします。不思議です。文章は寝かせるとアラが見えてくるのでそれとは対照的です。

最後はブラウザで確認

CSSはブラウザによっては若干動作が違うかもしれません。できれば様々なブラウザでぱっと見だけでもいいのでチェックをした方がよいでしょう。せっかく苦労して作ったページなので、見に来る人にはちゃんとしたものを見てもらいたいですから。

広告