今回は、画面サイズにbackgroundを指定する方法を記します。
スマホやパソコンの画面全体のサイズ分背景をセットする方法です。
画面の縦横サイズを取得して要素を画面サイズに変更して
要素の背景色をセットするという方法です。
- 画面の縦横サイズの取得
- 要素を画面サイズに変更
- 要素に背景色をセット
画面サイズに合わせて背景色をセットする方法
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>スクリーン</title>
</head>
<style>
#app{
background:green;
}
</style>
<body>
<div id="app"></div>
<script>
$(function(){
$("#app").width(window.innerWidth).height(window.innerHeight);
});
</script>
</body>
</html>
下記の画像が実行結果です。
簡単に画面全体に背景色をセットできますね。
この一行で画面サイズ取得と要素にサイズを反映しています。
詳しくみていきましょう。
$("#app").width(window.innerWidth).height(window.innerHeight);
画面サイズの取得
下記が画面サイズを取得する方法です。
・画面の横幅を取得
window.innerWidth
window.innerWidth
・画面の縦幅を取得
window.innerHeight
window.innerHeight
実際に出力してみましょう。
console.log("横幅："+window.innerWidth);
console.log("縦幅："+window.innerHeight);
出力結果が下記の画像です。
画面サイズを指定
・画面の横幅をセット
$(要素).width(指定したいサイズ)
$(要素).width(指定したいサイズ)
・画面の縦幅をセット
$(要素).height(指定したいサイズ)
$(要素).height(指定したいサイズ)
このように記述することで
要素を指定したいサイズに変更することが可能です。
要素を指定したいサイズに変更することが可能です。
おわりに
いかがだったでしょうか。
たった一行で画面幅の取得から画面サイズの指定まで出てきてしまうのですね。
プログラミングスクールに通うか悩んでいるなら
プログラミングの独学に限界を感じたら
プログラミングスクールに通いましょう。
ある程度自分の中で基盤ができてしまったら
あとは独学で大丈夫ですが、基盤が完成するまでは自分へ投資をしましょう。
しかし、プログラミングスクールは高額です。
そのため、最初は無料体験やカウンセリングから始めると良いでしょう。
よろしければ下記の記事を参考にしてみてください！
プログラミングスクール無料体験・カウンセリングを徹底比較。オススメ5選をご紹介！
最後まで読んでいただきありがとうございました。
コメント