2015/04/10レスポンシブが主流になった昨今ですが、レスポンシブはコンテンツ幅に関わらずあらゆるデバイスでダイナミックな表現を実現するメリットがあります。今回、そんな中でのテクニックを1つ。横幅が800pxのコンテンツエリアをもつサイトがあると仮定します。そこに1000pxの画像を設置すると、ブラウザの横スクロールが表示されてしまい、コンテンツの中央がずれてしまいます。※当サイトはコンテンツエリア指定のないレスポンシブサイトなので、十分に再現できていません。画像を背景として設置するのも1つの解決策ですが、コンテンツとして画像を設置したい場合に、以下の方法があります。-500px;}画像の上位要素の「min-width」にはコンテンツ横幅を、画像の「margin-left」には画像横幅の半分のサイズをマイナスで指定します。このようにすれば、画像はコンテンツ中央に表示された状態で1000pxしっかり表示され、さらにブラウザの横幅を800pxに縮めるまでは横スクロールは表示されません。こちらにデモとして実際に設置してみましたが、やはり当サイトの構成上うまく表示されていません。恐縮ですが、実際には問題なく表示されるはずです。ここではソースサンプルのみということで。以上、サイトトップページのメインビジュアルでよく利用されるテクニックでした。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。