画像を背景にフルスクリーンで表示させる「Fullscreen Background for jQuery」！
公開日：2014年7月1日
最終更新日: 2015年2月28日
こんにちは！
ここ最近、画像を背景にフルスクリーンで表示するデザインをよく見かけます。確かに一度見ると印象に残りますし、見る人にインパクトを与える魅力的なデザインだと思います。
そんなデザインを実現するために、使えそうな「jQuery」の「Fullscreen Background for jQuery」を今回はご紹介したいと思います。
目次！
1.「Fullscreen Background for jQuery」とは？
2.設置手順！
3.デモページ！
「Fullscreen Background for jQuery」とは？
背景にフルスクリーンの状態で画像を敷き詰めて表示させることができます。通常は全てCSSなどで対応しますが、この「jQueryを使用すれば簡単に実現できます。
設置手順！
それでは実際に設置してみたいと思います。
必要jsのダウンロード！
必要となるjsを以下のURLより、ダウンロードしてください。
「Download ZIP」をクリックしてください。こちらからデモファイルをダウンロードできます。
jsの設置！
htmlのhead部分に画像を背景にフルスクリーンで表示させるために必要なjsを記述してください。「#background-image」の部分はhtmlのid名に合わせてください。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js"></script>
<script>
$(function(){
$("#background-image").fullscreenBackground();
});
</script>
CSSの設置！
レイアウト調整に必要なCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/style.css" />
上記のjsとCSSを記述したhtml！
jsとCSSを記述したhtmlは以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fullscreen Backgroundのサンプル！</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fullscreenBackground.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#background-image").fullscreenBackground();
});
</script>
</head>
<body>
<div id="content">
<h1>タイトルが入ります。</h1>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
</div>
<div id="background-image">
<img src="img/cityscape.jpg" width="2000" height="1333" />
</div>
</body>
</html>
以上で設定完了です。
デモページとサンプルファイルを用意しましたので、ご確認ください。
デモページ！
上記の設定をしたデモページを作成しました。
デモページのサンプルファイルはこちらよりダウンロードできます。
最後に！
デザイナーの端くれとして一度、画像フルスクリーンのデザインをしてみたいですね。業種が限られてくるような気がしますし、良い写真は必須ですが。その時には今回の「jQuery」を使用したいと思います。
以上「画像を背景にフルスクリーンで表示させる「Fullscreen Background for jQuery」！」でした！
それではまた。
公開日：2014/07/01
最終更新日: 2015年2月28日
カテゴリー：jquery・js
関連記事
-
-
2014/07/17
jqueryのスライドショー「bxSlider」の設置方法！
カテゴリー：jquery・js
最終更新日: 2015年2月27日
-
-
2014/06/24
私が大抵いつも使うギャラリーjs！使い勝手がいいんですよね！
カテゴリー：jquery・js
最終更新日: 2015年2月23日
-
-
2014/06/19
「instantclick.min.js」でページの読み込みを高速化してみる！
カテゴリー：jquery・js
最終更新日: 2015年2月23日
-
-
2014/05/17
Googleマップをちょっとカッコよくカスタマイズ！
新着記事
-
-
2016/01/27
クロームでムームードメインにログインしようとするとログインエラーが起こった！
カテゴリー：その他
-
-
2016/01/26
これは便利！公開前の記事をプレビューできる「Public Post Preview」プラグイン！
カテゴリー：WordPress
-
-
2016/01/07
Flashの元データがないswfファイル内のリンクを編集する方法！
カテゴリー：お勧めツール・ソフト
-
-
2016/01/02
2016年も宜しくお願いします！
カテゴリー：独り言
-
-
2015/10/14
WP BASIC AuthプラグインでBasic認証を設定！
カテゴリー：WordPress
最終更新日: 2016年1月3日
[…] 画像を背景にフルスクリーンで表示させる「Fullscreen Background for jQuery」！ […]