【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

やってみると意外と簡単!?jQueryでアコーディオンメニューを作る方法

やってみると意外と簡単!?jQueryでアコーディオンメニューを作る方法

朝晩がすっかり寒くなってきたこの頃、みなさんいかがおすごしでしょうか?
週末は四条河原町周辺で急いで秋服を買い足した、開発部ヤマダです。

さてさて、行楽シーズンはなにかとお忙しい!という方も多いと思います。

逆に今だから時間があり、Webサイトの見せ方を工夫したいなぁ・・・と考えていて、jQueryを勉強してサイトをカスタマイズしたい!!と意気込んでいる方もいらっしゃるかと思います。
(きっといるはず★)

今日のブログはそんな方へ、開発部の私からjQueryの”プチ”アドバイスです!

jQueryとJavaScriptの関係

ちょっとその前に…jQueryとJavaScriptの関係とは何なのでしょうか?

JavaScriptはブラウザと直接やりとりしてWebページの見た目や内容を変える便利な言語です。

ところがJavaScriptには弱点があり、IE8以前のIEとそれ以外のブラウザで大きく挙動が異なることや、最新のブラウザでも動作が微妙に異なることなど、JavaScriptで記述しようと思うとそれなりにノウハウとテクニックが必要です。

そこで登場するのがjQueryです!ブラウザ同士の互換性も吸収してより簡単にスクリプトを記述できるようになっています。文法も比較的簡単で、プログラミングの経験がないWebデザイナーやマークアップエンジニアでも理解しやすいのが特徴です。

例えば、

HTML

<p id="demo_text">おはようございます</p>

というHTMLドキュメントの内容を書き換えたい場合、

JavaScript

window.onload=function(){
	var element = document.getElementById("demo_text");
	//値の書き換え
	element.innerHTML = 'おはよう';
};

でも書き換えられますが、

jQUery

$(function(){
	$("#demo_text").html('こんにちは');
});

でも書き換えられます。

jQueryはJavaScriptをより簡単に使えるように開発されたライブラリなんですね。ちなみに、jQuery自身はJavaScriptで書かれています。それでは実際にスクリプトを記述して画面を操作してみましょう!

アコーディオンメニューの実現

jQueryを使ったスクリプトは常にほぼ一定のパターンに沿った構造になります。
まずはそのパターンを把握するために、簡単な例文を書いてみましょう。

■jQueryの基本形

$(function(){});

これがjQueryの基本の記述です、これだと少し見にくいので「{」と「}」の間に改行をいれてみます。

$(function(){

});

間に改行を入れるとかなり見やすくなったのではないでしょうか?jQueryはまず上の基本の記述があって、それを見やすく改行したのでいつもおなじみの形になっていたのですね。それでは、改行を入れた箇所にjQueryを書いてみましょう!

(本日はサンプルでアコーディオンメニューを作成します!)

1、HTMLでナビゲーションを記述する

まずは基本となるナビゲーションをHTMLで記述していきます。今回は下記のような内容でナビゲーションを作成しました。


<div class="wrapper-nav-global">

<div class="menubtn"><a href="#">MENU</a></div>

<ul class="nav-global">

<li><a href="#">ABOUT</a></li>

<li><a href="#">GROW</a></li>

<li><a href="#">PLAN</a></li>

<li><a href="#">SHARE</a></li>

<li><a href="#">CONTACT</a></li>

</ul>

</div>

2、head内にjQueryライブラリへのリンクを貼る

jQueryは、jQueryの公式サイトやGoogleのCDNサーバーへ直接リンクを貼る方法で読み込むことが可能です。

今回はGoogleのCDNサーバーを利用する方法で、ライブラリへのリンクを貼ります。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
※IE8までを考慮しないのであれば、2.x系を読み込んでも可

上記の読込コードを、サイトの<head>〜</head> 内に記述します。

3、jQueryを記述する

JavaScript用のファイルを用意して、そこにjQueryを記述していきます。

今回は下記のように記述しました。

$(function(){
	$(window)
	.on('resize', function(){
		var $nav = $('.nav-global');
		var listFloat = $nav.find('li').css('float');
		if(listFloat == 'none') {
			$nav.css('display', 'none');
		} else {
			$nav.css('display', 'block');
		}
	});

	$('.menubtn > a')
	.on('click', function(){
		$('.nav-global').slideToggle(400);
	});
});

この記述をしたファイルも<head>〜</head>で読み込むことを忘れないようにしてください。

4、CSSで見栄えを調整する

最後にスタイルシートで見栄えを調整します。今回は下記のように記述しました。

.menubtn {
    display: block;
    background-color: rgb(86, 97, 88);
    padding: 5px 8px;
}
.menubtn a {
	display: block;
	color: #FFF;
	font-weight: bold;
	text-align: center;
}
.nav-global {
	display: none;
}
.nav-global li {
    float: left;
    width: 100%;
    text-align: left;
    border: 1px solid #fff;
    padding: 5px;
}

最後に、完成したサイトのデモはこちらです。
アコーディオンメニューデモサイト
※サイト内にある「MENU」というボタンを押して、動きを確かめてください。

終わりに

実は、弊社が提供するレスポンシブECサイトASP「aishipR」ではjQueryを簡単に使えるような仕組みが用意されています。

通常、jQueryやJavaScriptはコードを書いて、ファイルを保存して、FTPソフトなどでアップしなければなりませんが、aishipRの管理画面から簡単にアップが出来るようになっています。

ただaishipRに限らずjQueryはさまざまな表現が実現できますので、ぜひ色々な実装を試してみてください。

ウェブサイトを作る予定の方も、そうでない方も、今秋がみなさんにとって素敵な時間になりますように。

ヤマダでした。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+