widthを指定した物体が画面を小さくしたら左から消えるようにしたい。

Question

題名の通りwidthを指定した物体よりも画面を小さくしたら左から消えるようにしたいです。
デフォルトだと、widthを指定した物体よりも画面の横幅が小さくなってしまうと、
右から少しずつ消えていく仕様になっているかと思います。
どうぞご教授の程よろしくお願いいたします。

<div class="block">
   aaa
</div>

.block{
            width: 400px;
            height:100px;
            margin: 50px auto;
            background-color:red;
 }

Answer 1

以下を追加してはどうでしょうか？

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/y841arh7/

.block{
            margin-left: min(100% - 400px, (100% - 400px)/2);
 }

Comments

[Lhankor_Mhy]

難しいですか？

わからないところがあったらコメントで連絡してください。

Answer 2

消えるというのは画面外にはみ出すということでしょうか？
通常はブラウザの幅が要素（物体）の幅を下回ると、右にはみ出す（消える）仕様となっています。
これはブラウザが左から右向きにページの中身を表示しているからです。

そこで、以下のスタイルを当てるとブラウザは右から左向きにページの中身を表示するようになり、ブラウザの幅が要素の幅を下回ると左にはみ出すようになります。

body {direction: rtl;}

ただし、これはページ全体に影響するものなので別の要素は右から消したいというような器用なことはできません。

Answer 3

下記追加してみてはどうでしょうか。

@media screen and (min-width:400px) {
  .block {
    display: none;
  }
}

詳細参考
https://developer.mozilla.org/ja/docs/Web/CSS/@media

Comments

[sharara]

はじめまして。ご回答ありがとうございます。
そちらのやり方ですと、レスポンシブ対応のようにある画面幅からdisplay:none;で一気に消えてしまうので、消さずに画面幅を小さくしたら普通はwidthを指定した物体の右側から消えてしまうことになるかと思いますが、少しずつ左側から消えるようにしたいです。