HTMLでウィンドウサイズを指定する方法とは【メンターが回答】

「HTMLでウィンドウサイズを指定する方法がわかりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。ウィンドウサイズに合わせてページのコンテンツを固定する方法についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTMLでウィンドウサイズを指定する方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

ウィンドウサイズを小さくした時にコンテンツ(画像、テーブル位置)などが動くため、ずれてしまいます。

ウィンドウサイズを小さくした時に、コンテンツは隠れてもいいので動かないようにするためには どうすればよいでしょうか。

 

メンターからの回答

見た目としてどうあるべきかという話はここでは問わないことにします、指定した位置に固定しておきたいということであれば、コンテンツごとに幅と高さを指定して、position: absolute で位置を指定するのが1つの手かと思います。

<html>
  <head>
    <style>
      div {
        position: relative;
        width: 800px;
        height: 500px;
      }
      p {
        width: 400px;
        height: 400px;
        position: absolute;
      }
      p.left {
        left: 0;
      }
      p.right {
        right: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>Row</h1>
      <p class="left">left left left left left left left left left left left left left left left 
                            left left left left left left left left left left left left left left left 
                      left left left left left left left left left left left left left left left 
                      left left left left left left left left left left left left left left left 
                      left left left left left left left left left left left left left left left 
                      left left left left left left left left left left left left left left left 
                      left left left left left left left left left left left left left left left  
                      left left left left left left left left left left left left left left left </p>
      <p class="right">right right right right right right right right right right right right 
                       right right right right right right right right right right right right 
                       right right right right right right right right right right right right 
                       right right right right right right right right right right right right 
                       right right right right right right right right right right right right 
                       right right right right right right right right right right right right 
                       right right right right right right right right right right right right 
                       right right right right right right right right right right right</p>
    </div>
  </body>
</html>

 

以上、HTMLでウィンドウサイズを指定する方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

HTMLでウィンドウサイズを指定する方法について解説したよ。

大石ゆかり

ウィンドウを小さくしてもコンテンツが動きませんね。隠れてしまってはいますが。

田島悠介

そうそう。position属性を使うとコンテンツを固定することが出来るよ。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。