画面サイズの取得方法 Vue.jsとjQueryの違い | ポータルサイトHack - 東京・港区ポータルサイト制作会社アクセルメディア

2019/7/17

画面のサイズに合わせて動画やスライド画像を設置するサイトをよく見かけるようになりました。
インパクトがあるものやセンスを感じるものなどブランディングに特価したサイトに取り入れられている手法だと思います。そこまで複雑な技術ではないのでポータルサイトにも利用する価値はあるかもしれません。

フルサイズで表示されるサイト

先日弊社のサイトをリニューアルした時もトップページにおいてフルサイズで動画が表示されるようにデザインしました。表示される要素も絞り、すっきりとしたデザインになったかと思います。

トップページへ

また他にも下記のような魅力的なサイトが増えてきています。
インパクトのあるサイトや、トレンドをおさえたサイトを作る場合は参考にしたいですね。

Javascriptで要素をフルサイズに

さて上記で参考にしたサイトはどのように画面いっぱいに要素を配置しているかというと、Javascriptを利用するケースが多いです。
様々なデバイスにリアルタイムで処理が可能なのでJavascriptが便利です。

jQueryの利用

実際の取得方法ですが、Javascriptのフレームワークである「jQuery」もしくは「Vue.js」で実装していきます。
ますはjQueryで画面サイズを取得してみましょう。

jQueryの読み込みはCDNからが手っ取り早いので、こちらを利用します。
htmlのheadタグ内に下記を記述。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

上記の下かbodyの終了タグ直前に下記を記述。

<script>
$(document).ready(function () {
    //画面の高さを取得
    var window_height = $(window).height();
    //特定のクラス（今回はsetion）の高さを取得した高さに設定する
    $(".section").css("height", window_height + "px");
    //画面のサイズが変更した場合の処理
    $(window).resize(function () {
        window_height = $(window).height();
        $(".section").css("height", window_height + "px");
    });
});
</script>

全体としては下記のようになります。簡単ですね。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body style="padding:0; margin:0;">
  <section class="section" style="background:#000;"></section>
  <section class="section" style="background:#ccc;"></section>
  <section class="section" style="background:#000;"></section>
  <script>
    $(document).ready(function () {
        //画面の高さを取得
        var window_height = $(window).height();
        //特定のクラス（今回はsetion）の高さを取得した高さに設定する
        $(".section").css("height", window_height + "px");
        //画面のサイズが変更した場合の処理
        $(window).resize(function () {
            window_height = $(window).height();
            $(".section").css("height", window_height + "px");
        });
    });
    </script>
</body>
</html>

Vue.jsの利用

続いてVue.jsの設定方法を。jQueryとは大きく異なりますので、しっかり確認しておきましょう。
Vue.jsもCDNを利用します。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

jQueryの時と同様に上記の下かbodyの終了タグ直前に下記を記述。

<script>
    var app = new Vue({
      el: '#app',
      data: {
        //画面の高さを定義
        fullheight: window.innerHeight+'px',
        message: ''
      },
      methods: {
        resize: function() {
          //画面のサイズが変更になる時の処理
          this.fullheight = window.innerHeight+'px';
        },
      },
      // イベント
      mounted() {
        window.addEventListener('resize', this.resize);
      }
    });
  </script>

全体としては下記のようになります。jQueryと比較すると若干ややこしいですね

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app" v-cloak>
      <section v-bind:style="{height:fullheight}" style="background:#000;"></section>
      <section v-bind:style="{height:fullheight}" style="background:#ccc;"></section>
      <section v-bind:style="{height:fullheight}" style="background:#000;"></section>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        //画面の高さを定義
        fullheight: window.innerHeight+'px',
        message: ''
      },
      methods: {
        resize: function() {
          //画面のサイズが変更になる時の処理
          this.fullheight = window.innerHeight+'px';
        },
      },
      // イベント
      mounted() {
        window.addEventListener('resize', this.resize);
      }
    });
  </script>
</body>
</html>

まとめ

一見何か複雑なことをやっていそうなサイトも意外とシンプルな記述で実装されているケースも少なくありません。
今回も最低限の記述で画面全体に要素が配置できることが確認できたかとおもいます。
これを元にカスタムを行い、より魅力的なデザインのサイトが出来上がることを願います。