コレでわかるjQueryを使ったWEBデザイン

モダンでおしゃれなWEBサイトにするためには、jQueryが使用されることが多いです。

今回は、jQueryを使って実装できるデザインのサンプルを紹介します。

「jQueryの基本的な部分が知りたい」という方は、過去記事の初心者必見！jQueryの基礎知識と基本的な書き方まとめを参考にしてください。

この記事ではより具体的なjQueryの使い方を紹介します。

animate

まず、最初に紹介するのは「animate」です。

アニメーションは指定した要素に動きをつけれるメソッドです。

アニメーションは連続で再生されるのが特徴。

連続再生を止めるためには、stopメソッドを使うことが必要です。

サンプルとして、ホバーすると文字サイズが大きくなり半透明になるアニメーションを実装します。

HTML

<a href="#" class="sample">ボタン</a>

CSS

.sample {
    width: 200px;
    height: 70px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    line-height: 70px;
    text-align: center;
    display: block;
    background: #eee;
}

jQuery

$(function(){
    $('.sample').hover(function(){
        $(this).stop().animate({opacity:'0.5',fontSize:'22px'},400);
    }, function(){
        $(this).stop().animate({opacity:'1',fontSize:'18px'},400);
    });
});

ここでの「400」という数字は変化する時間を意味します。

「1000=1秒」になるので、400は0.4秒になります。

CSSの「transition」と同じ役割です。

addClass・removeClass

指定した要素に対してclass属性を追加するためには、「addClass」を使います。

それと同じように、指定した要素に対してclass属性を削除するためには、「remobeClass」を使います。

addClass・removeClassを使って、animateメソッドで実装したボタンを再現してみましょう。

実際のコードはこのようになります。

HTML

<a href="#" class="sample">ボタン</a>

CSS

.sample {
    width: 200px;
    height: 70px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    line-height: 70px;
    text-align: center;
    display: block;
    background: #eee;
}

jQuery

$(function(){
    $('.sample').hover(function(){
        $(this).addClass('addBtn');
    }, function(){
        $(this).removeClass('addBtn');
    });
});

スクロールした値を取得する

scrollイベント、scrollTopメソッドを使うことで現在のスクロールした値が取得できます。

実際にコードを見てみましょう。

HTML

<p>スクロールした値：<span>0</span></p>

CSS

#wrapper {
    height: 10000px;
}

p {
    width: 100%;
    font-size: 20px;
    text-align: center;
    position: fixed;
    padding-top: 40px;
}

jQuery

$(function(){
    $(window).on('scroll', function(){
        var scrollTop = $(window).scrollTop();
        $('span').text(scrollTop);
    });
});

scrollイベントやscrollTopメソッドなどはよく使用するので、必ず覚えておいてください。

スクロール位置によってアニメーションを表現する

先ほど使用したscrollイベントとscrollTopイベントを使用することで、スクロール位置によって違ったアニメーションを実装できます。

ここでは、スクロール位置によって背景色を変更させます。

これが、実際のコードです。

HTML

<div class="box area1"><p>ここは白色の背景です</p></div>
<div class="box area2"><p>ここは黒色の背景です</p></div>
<div class="box area3"><p>ここは緑色の背景です</p></div>
<div class="box area4"><p>ここは青色の背景です</p></div>
<div class="box area5"><p>ここは黄色の背景です</p></div>
<div class="box area6"><p>ここはピンク色の背景です</p></div>

CSS

.box {
    height: 800px;
    display: none;
}

.area1 {
 background: white;
}

.area2 {
 background: black;
}

.area3 {
 background: green;
}
.area4 {
 background: blue;
}

.area5 {
 background: yellow;
}

.area6 {
 background: pink;
}

p {
    font-size: 30px;
    padding-top: 50px;
    text-align: center;
}

jQuery

$(function(){
    var boxArea = $('.box'),
    show = 150;

    boxArea.css({display:'block',opacity:'0'});

    $(window).on('scroll',function(){
        boxArea.each(function(){
            var set = $(this),
            areaTop = set.offset().top;

            if ($(window).scrollTop() >= (areaTop + show) - $(window).height()){
                set.stop().animate({opacity:'1'},300);
            } else {
                set.stop().animate({opacity:'0'},300);
            }
        });
    });
});

スクロールしても表示されるサイドメニュー

スクロールしても追従してくるサイドメニューもjQueryで実装できます。

実際にコードを見てみましょう。

HTML

<div id="wrapper">

    <nav id="leftMenu">
<ul id="menu">
<li class="menuList"><a href="#">プロフィール</a></li>
<li class="menuList"><a href="#">ブログ</a></li>
<li class="menuList"><a href="#">お問い合わせ</a></li>
<li class="menuList"><a href="#">ポートフォリオ</a></li>
<li class="menuList"><a href="#">規約</a></li>
</ul>
</nav><!-- /#menuList -->

<div id="content">

    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>


    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>


    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>


    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

    <p>テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

</div><!-- /#contents -->

</div><!-- /#wrapper -->

CSS

#wrapper {
    margin: 0 auto;
    width: 1000px;
    display: flex;
}

#leftMenu {
    width: 200px;
}

#menu {
    border-top: #555 1px solid;
    border-left: #555 1px solid;
    margin-right: 30px;
}

.menuList {
    border-right: #555 1px solid;
    border-bottom: #555 1px solid;
}

.menuList a {
    color: #fff;
    padding: 15px 25px;
    font-weight: bold;
    display: block;
    text-align: left;
    background: #333;
    border: #fff 1px solid;
}

.menuList a:hover {
    color: #333;
    background: #fff;
}

#content {
    width: 650px;
}

#content p {
    padding-bottom: 30px;
    font-size: 14px;
    line-height: 1.8;
}

jQuery

$(function(){
    var setFixed = $('#leftMenu'),
    menuTop = setFixed.offset().top;

    $(window).on('load scroll resize',function(){
        if($(window).scrollTop() > menuTop){
            setFixed.css({top:'0',position:'fixed'});
        } else {
            setFixed.css({top:'auto',position:'static'});
        }
    });
});

スクロールボタン

「スクロールボタン」を見たことはありますか？

スクロールボタンとは、スクロールしたときにボタンが現れクリックすると自動的に上に戻るボタンです。

スクロールボタンは以下のメソッドを組み合わせることで、スクロールボタンの実装が可能です。

・append
・on
・animate
・scrollTop
・fadeIn
・fadeOut

このようなボタンが実装できます。

実際にコードを見てみましょう。

HTML

<body>
 <div id="wrapper">
  <p>トップです。</p>
 </div>
</body>

CSS

#wrapper {
    margin: 0 auto;
    padding: 50px 0;
    width: 800px;
    height: 1000px;
}

#topBtn {
    padding: 10px;
    right: 10px;
    bottom: 10px;
    color: #fff;
    text-align: center;
    display: none;
    background: #333;
    position: fixed;
    z-index:100;
}

jQuery

$(function(){
    $('body').append('<a href="javascript:void(0);" id="topBtn">↑</a>');
    var topBtn = $('#topBtn');
    topBtn.on('click',function(){
        $('html,body').animate({scrollTop:'0'},400);
    });

    $(window).on('load scroll resize',function(){
        var showTop = 300;
        if($(window).scrollTop() > showTop){
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
});

このコードで使用されているメソッドについて、詳しく解説します。

appendメソッドは、指定した要素の最後にHTMLを追加できるメソッドです。

先頭に要素を追加したい場合は、prependメソッドを使用します。

このコードでは、body要素の末尾に「topBtn」という要素を追加しています。

この要素を追加することで、スクロールボタンが表示されます。

onメソッドは、複数のイベントで同時に処理をおこなえるメソッドです。

ここでは、「load」「scroll」「resize」の3つのイベントを指定しています。

onメソッドで使用される代表的なイベントを紹介します。

イベントの名前	内容・タイミング
click	クリックされたタイミング
dbclick	ダブルクリックされたタイミング
mouseover	カーソルが上に乗ったタイミング
mouseout	カーソルが外れたタイミング
mousemove	カーソルが移動しているタイミング
resize	ブラウザの画面サイズが変更されたタイミング
load	読み込みが完了したタイミング
scroll	スクロールしたタイミング

animateメソッドは、上記でも説明したように動きをつけるメソッドです。

scrollTopメソッドは、指定した要素からスクロールした値を取得できます。

ここでのコードでは、全体のウィンドウからスクロールした値を取得しています。

fadeInメソッドは、フェードインしながら、出現させるメソッドです。

機能的には、animateメソッドと似ています。

fadeOutメソッドは、fadeInメソッドの反対の機能です。

フェードアウトしながら、非表示にするメソッドになります。

お問い合わせフォームのバリデーション

次はお問い合わせフォームのバリデーションをjQueryで実装しましょう。

ここでは必須の入力内容になっている「お名前」と「お問い合わせ内容」が空欄の場合、背景色を赤色になるように実装しています。

実際にコードを見てみましょう。

HTML

<dl>
    <dt>お名前<span class="attend">【必須】</span></dt>
<dd><input type="text" value="" name="name" class="required"></dd>
</dl>

<dl>
<dt>メールアドレス</dt>
<dd><input type="text" value="" name="email"></dd>
</dl>

<dl>
    <dt>お問い合わせ内容<span class="attend">【必須】</span></dt>
<dd><textarea value="" name="text" class="required"></textarea></dd>
</dl>

CSS

dl {
    margin: 0 auto 30px auto;
    width: 800px;
    text-align: left;
}

dl dt {
    font-weight: bold;
}

.attend{
    color: red;
}

input[type=text] {
    padding: 10px;
    width: 100%;
    font-size: 18px;
    background: #fff;
    border: #333 1px solid;
    box-sizing: border-box;
}

textarea {
    padding: 10px;
    width: 100%;
    height: 400px;
    font-size: 18px;
    background: #fff;
    border: #333 1px solid;
    box-sizing: border-box;
}

jQuery

$(function(){
    $('.required').on('keyup keydown keypress blur change focus', function(){
        if($(this).val() == ''){
            $(this).css({backgroundColor:'red'});
        } else {
            $(this).css({backgroundColor:'#fff'});
        }
    }).change();
});

onメソッドのイベントには、「keyup」「keydown」「keypress」「blur
」「change」「focus」が設定されています。

ここで使用されているイベントについて説明します。

イベントの名前	内容・タイミング
keyup	キーボードのボタンが押されたあと、もしくはキーボードのボタンが上がったとき
keydown	マウスが押されたとき
keypress	キーボードで入力されたとき
change	要素の 内容が変更されたとき
focus	フォーカスされたとき
blur	フォーカスが離れたとき

「val() == ”」のコードで要素の中で空欄なのか入力されているかをチェックしています。

ここで、要素の中が空欄の場合、背景色が赤色になります。

要素の中が入力されている場合、背景色が白色になるように記述されています。

最後に記述されているchangeメソッドは、ブラウザをリロードしたときもjQueryが読み込まれるようにするための記述です。

「戻る」もしくは「進む」をクリックしたときもチェックされるようになります。

入力された文字数をカウントする

上記で説明したお問い合わせフォームのテキストエリアの文字数を数えることも可能です。

実際にコードを見てみましょう。

HTML

<dl>
    <dt>お名前<span class="attend">【必須】</span></dt>
<dd><input type="text" value="" name="name" class="required"></dd>
</dl>

<dl>
<dt>メールアドレス</dt>
<dd><input type="text" value="" name="email"></dd>
</dl>

<dl>
    <dt>お問い合わせ内容<span class="attend">【必須】</span></dt>
    <dd class="totalCount">文字数：<span class="count">
0</span><textarea value="" name="text" class="required"></textarea></dd>
</dl>

CSS

dl {
    margin: 0 auto 30px auto;
    width: 800px;
    text-align: left;
}

dl dt {
    font-weight: bold;
}

.attend{
    color: red;
}

input[type=text] {
    padding: 10px;
    width: 100%;
    font-size: 18px;
    background: #fff;
    border: #333 1px solid;
    box-sizing: border-box;
}

textarea {
    padding: 10px;
    width: 100%;
    height: 400px;
    font-size: 18px;
    background: #fff;
    border: #333 1px solid;
    box-sizing: border-box;
}

jQuery

$(function(){
    $('.required').on('keyup keydown keypress blur change focus', function(){
        if($(this).val() == ''){
            $(this).css({backgroundColor:'red'});
        } else {
            $(this).css({backgroundColor:'#fff'});
        }
    }).change();
});

$(function(){
    var countThis = $('.totalCount');
    countThis.find('textarea').on('keydown keyup keypress change',function(){
        var thisValueLength = $(this).val().length;
        countThis.find('.count').text(thisValueLength);
    });
});

このように、lengthメソッドを使うことで入力された文字数を数えることが可能です。

まとめ

いかがでしたか？

jQueryを使うことでよりおしゃれで使いやすいWEBサイトを制作することが可能です。

今後もより需要が高まるので、ぜひ習得してください。