固定バナーをつくる

はじめに

単純だが自分のような初心者のために書いておく。

手順

• 画像とｘをボタン記述。
• デザインする。
• ×ボタンで閉じるのを実装する。

コード

とりあえず、一気に書いて順々に説明。

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!--JQuery-->
<div class="banner"> <!-- 構造化 -->
<div class="banner-relative"> <!-- 相対化のための構造 -->
<img src="https://thumb.photo-ac.com/19/197ef4fbfc004b49183be5b90facc956_w.jpeg" class="banner-image"></img>    <!-- 画像の挿入 -->
<div class="banner-close">ｘ</div>  <!-- x ボタン -->
</div>
</div>

<style>
.banner{
  position:fixed;  /*構造の固定*/
  top:0;  /*上に固定*/
  right:0;  /*右に固定*/
  width:100%; /*バナーの横幅*/
  height:100px; /*縦幅*/
}
.banner-relative{ /*構造の相対化*/
  position:relative;
  width:100%;
  height:100%;  //.banner にサイズを合わせる。
} 
.banner-image{
  position:absolute;
  top:0;
  right:0;
  width:100%; /*横幅を合わせる*/
  height:100%; /*縦幅を合わせる*/
}
.banner-close{
  position:absolute;  /*画像の固定*/
  bottom:0;  /*下に固定*/
  right:0;  /*右に固定*/
  background-color:red;  /*赤色*/
  font-size:24px;  /*大きさ*/
  width:48px; /*横幅*/
  text-align:center; /*整形*/
  cursor:pointer; /*カーソルをポインターに*/
  z-index:1; /*ｘボタンを前面へ*/
}
</style>
<script>
$(".banner-close").click(function(){ //クリックしたらバナーを閉じる
  $(".banner").hide();
}); 
</script>

HTML

まずは純粋なHTMLの部分を見る。

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

でJQueryを使う。これはお馴染みだろう。次に

<div class="banner"> <!-- 構造化 -->
<div class="banner-relative"> <!-- 相対化のための構造 -->

で固定や相対化のために構造化する。相対化というのは、そのブロックを基準に要素の位置を定めるということで、これなしに画像やｘボタンの位置を決めるとバラバラになってわかりにくい。

<img src="https://thumb.photo-ac.com/19/197ef4fbfc004b49183be5b90facc956_w.jpeg" class="banner-image"></img>

こちらは画像の挿入。画像は適当に拾った。

<div class="banner-close">ｘ</div> 

そしてｘボタン。ネットでバツは「ｘ」で十分と書いてあり、なるほどと思い使っている。

CSS

次はCSS。大体はコメントで書いたので大事なところだけ。

バナーの固定

バナーを固定するには、次の手順が要る。上記の <div class="banner"> を構造化ブロック、<div class="banner-relative"> を相対化ブロックと呼ぶことにする。

• 構造化ブロックを絶対位置で固定。
• 相対化ブロックを画像と×ボタンの基準とする。
• 画像とｘボタンの相対化ブロックとの相対的な位置を指定。

順々に見ていく。

構造化ブロックを絶対位置で固定

　まず

.banner{
  position:fixed;  /*構造の固定*/
  top:0;  /*上に固定*/
  right:0;  /*右に固定*/
  width:100%; /*バナーの横幅*/
  height:100px; /*縦幅*/
}

で絶対位置で固定する。「position:fixed」が絶対位置で固定するという指定。具体的な位置を指定するには

• top　　　　//上から
• bottom　　 //下から
• right　　　//右から
• left　　　　//左から

を指定する。当然 top が決まれば bottom が決まり、right が決まれば left が決まり、またその逆も然りなので2つ指定すれば良い。指定しなければ、元々の場所になる。

相対化ブロックを画像と×ボタンの基準とする

次は相対化。

.banner-relative{ /*構造の相対化*/
  position:relative;
  width:100%;
  height:100%;
} 

「position:relative」はこの要素を基準に子要素の位置を相対的に定めるということである。縦と横の幅を .banner に合わせて、実質的に .banner の位置を基準に画像やｘボタンの位置を定めるようにする。

本当は

.banner{
  position:fixed relative;
}

とやりたいが、出来ないらしい。

画像とｘボタンの相対化ブロックとの相対的な位置を指定

最後に画像とｘボタンの位置を決める。まずは画像

.banner-image{
  position:absolute;
  top:0;
  left:0;
  width:100%; /*横幅を合わせる*/
  height:100% /*縦幅を合わせる*/
}

position:absolute で .banner-relative を基準に絶対的な位置を指定する。top:0 right:0 で右上に配置して、縦と横の幅はバナーの大きさに合わせる。

.banner-close{
  position:absolute;  /*画像の固定*/
  bottom:0;  /*下に固定*/
  right:0;  /*右に固定*/
  background-color:red;  /*赤色*/
  font-size:24px;  /*大きさ*/
  width:48px; /*横幅*/
  text-align:center; /*整形*/
  cursor:pointer; /*カーソルをポインターに*/
  z-index:1; /*ｘボタンを前面へ*/
}

最後はｘボタン。細かい調整は色々あるが、とにかく画像を右下に固定する。これでバナーの外観は整った。

Javascript

最後はｘボタンの実装である。しかし機能が単純で JQuery を使うのであっさりと書ける。

$(".banner-close").click(function(){ //クリックしたらバナーを閉じる
  $(".banner").hide();
}); 

.banner-close がクリックされたら、バナー全体を閉じる。

さいごに

今回は単に閉じるだけのバナーをつくった。他にもカーソルを乗せるとフェードインして、離すとフェードアウトするものなども作れる。しかしそれくらいは単純でも、デザインや機能に凝ると大変だし既にあるものを使った方が早い。それでも基本のキくらいは自分でつくれると面白い。