TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】
icon
icon
HTML

HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】

初心者向けにHTMLコーディングにおけるライブラリについて解説しています。ライブラリはよく使われる機能を再利用のできる形でまとめたものです。ライブラリを使ったコーディングの例をサンプルコードで見ていきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLコーディングにおけるライブラリの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

HTMLコーディングにおけるライブラリについて詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

ライブラリとは

ライブラリとは、汎用性の高いプログラムの集合体のことです。

用語として現在は「フレームワーク」という言葉が浸透したものの、かつてフレームワークは、「ライブラリ」と呼ばれていた専門用語です。

これから必要になる機能を独自に開発や実装しなくても、これまで開発者によって、開発された機能のデータの集合体が提供されています。

 

[PR] Webデザインで副業する学習方法を動画で公開中

ライブラリが必要なプログラミングとは

目的や目標を実現するまでの工数や工程が多く、期間も定められている場合などには、「ライブラリ」が必要でした。

 

Javascript、jQueryで使うライブラリ

JavaScriptの代表的なライブラリがjQueryでした。

このjQueryから、さらに以前よりも画面に関する多くの機能が集約されて提供されています。

 

ライブラリを使ってプログラミングしてみよう

よく再利用されるユーザーインターフェースの機能について、サンプルコードをもとに解説していきましょう。

 

jQueryの読み込み

<head>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

まず、headタグの終了タグの直前に一度だけjQueryの読み込みを記述します。もしくは、bodyタグの終了タグの直前に記述します。

 

<body>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</body>

 

jQueryを使用してから、ハンバーガーメニューの処理を記述します。

 

jQueryありのHTML

<head>


  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>


  $(document).ready(function () {

    $("#menu_button").click(function () {

      $(".menu_toggle").slideToggle();

    });

  });

  </script>


</head>

<body>

  <p id="menu_button">ボタン</p>

  <ul class="menu_toggle">

    <li>メニュー</li>

    <li>メニュー</li>

    <li>メニュー</li>

    <li>メニュー</li>

  </ul>  

</body>

 

CSS

.menu_toggle {
   display: none;
}

 

動作結果

See the Pen
2020-04-23-sample07 by YOHEI INAI (@yohei_inai)
on CodePen.

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

HTMLコーディングにおけるライブラリの使い方がよく分かったので良かったです！

田島悠介

ゆかりちゃん、分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLで改行でずれるレイアウトの原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで改行でずれるレイアウトの原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTML内のiタグの使い方を現役エンジニアが解説【初心者向け】

HTML内のiタグの使い方について解説します。   そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさら...
HTML

これだけは覚えておきたい！絶対パスと相対パスの違いとは【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLの絶対パスと相対パスの違いについて解説します。 ...
HTML

Webオーサリングツールまとめ【ホームページ制作に使える・無料ツールあり】

ホームページを制作をこれから始めたい！という方のためにWebオーサリングツールを紹介します。 Webオーサリングツールとは、Webページ作成ソフトで、HT...
Webデザイン

HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】

HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法を現役エンジニアが解説【初心者向け】

HTMLで画像を横並びした時にレイアウトがずれる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...
HTML

あわせてよく読まれている記事

非同期処理を覚える！jQueryでajaxを利用する方法【初心者向け】

JavaScriptのライブラリであるjQueryでのAjaxの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Ajaxを取り入れているサイトは多くあるので、覚えておくとサイト制作において便利でしょう。 非同期処理によってWebサイトのユーザー体験を上げたいという方はぜひ参考にしてみてください。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！Ajaxとは何でしょうか？ 田島悠介 ページ全体を読み直さずに、ページの一部を書き換える仕組みのことだよ。 大石ゆかり そういうWebアプリ多いですよねー。 田島悠介 少し前から当たり前に使われるようになってるよね。さっそくAjaxを書いてみよう！   非同期処理とは 別の記事にて説明をしておりますので、こちらを先にご覧になることをお勧めします。 https://techacademy.jp/magazine/21141   Ajaxとは Ajax（エイジャックス）とは、「Asynchronous JavaScript And XML」の略で JavaScriptやJavaScriptのフレームワークもしくはライブラリを使用して行われる非同期処理のことです。 通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、Ajaxを使用すればリロードせずにページの内容を変更できます。 そのためサーバーの負荷軽減やリロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。 Ajaxが使用されているページの代表例がGoogle Mapです。 地図をドラッグするときに、ページ外の地図をリロードなしで表示できます。 JavaScriptのフレームワークはいくつかありますが、その中でも本記事ではjQueryを利用しAjaxの実装を行ってみます。   [PR] Webデザインで副業する学習方法を動画で公開中jQueryでのAjaxの書き方 Ajaxの基本となる書き方を紹介していきます。 jQueryでは$.ajaxを利用することでAjaxを使えます。 以下のようにscriptタグでjQueryのライブラリを読み込んでおき、さらにべつのscriptタグで以下のように処理を記述します。 <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $( function() { $.ajax( { //実行する処理。 } ); } ); </script>   jQueryでの$.ajaxを実際に書いてみよう それでは実際に処理を書いてみましょう。今回はローカルにあるファイルをリロードなしで読み込んでみましょう。 ここで注意ですがChromeではローカルファイルの読み込みができないのでChrome以外のブラウザで実行するようにしてください。 //sample.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS overflow</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <script> $(function()
JavaScript

jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Ajaxとは AjaxでPOST送信する jQuery（送信側）の記述方法 PHP（受信側）の記述方法 まとめ   Ajaxとは AjaxとはHTTPプロトコル通信で、HTMLやPHPファイルからリクエスト送信をHTTPサーバに送信して、レスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。 Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。 例えば、ブラウザ上に表示した一覧表の内容を更新して、データベースに登録した内容をまた一覧表に反映させる時、HTMLファイルの表部分の表示だけ更新する、ということができるようになります。   [PR] Webデザインで副業する学習方法を動画で公開中AjaxでPOST送信する Ajaxを使ってPOST送信するには、jQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。 （POST送信とはブラウザの入力フォームなどの内容をサーバ（PHP）に送る送信方法の一つです。）   表示結果   index.htmlのコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title> </head> <body> <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p> <div id="return"></div> <script src="./main.js"></script> </body> </html>   解説 1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。 2行目の<html>では、HTML文書の実装を開始することを意味しています。 3行目の<head>では、head要素の開始を意味しています。 4行目の<meta charset=”UTF-8″>では、UTF-8という文字コードで実装することを意味しています。   5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。 今回、Googleが用意したCDNを利用しています。 jQueryファウンデーションが用意しているCDNの方が、最新バージョンをいち早く確実に利用することができるメリットがありますが、CDNによってはサーバが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。   6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。 7行目の</head>ではhead要素が終了することを意味しています。 8行目の<body>では、body要素が開始することを意味しています。   9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。 id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくと理解しやすいです。   10行目の<div id=”return”></div>も、main.jsで利用される要素です。 最終的にこの位置に、main.jsで用意されたHTMLが追加表示されます。   11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。 必ず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んでいただくとスムーズです。   12行目の</body>では、body要素が終了することを意味しています。 13行目の</html>では、HTML文章が終了することを意味しています。   jQuery（送信側）の記述方法 jQuery ではPHPにPOSTするデータの定義と、送信結果を受け取ったあとのアクションを記述します。 記述の仕方は$.ajaxで記述する場合と、$.postメソッドを使用して記述する場合の2通りで紹介します。   $.ajaxで記述する方法 $.ajaxを利用して実装するコードを見ていきましょう。 サンプルコード（main.js）   $(function(){ $("#send").on("click", function(event){ let id = $("#main").val();
PHP

JavaScriptでドロップダウンメニューを実装する方法を現役エンジニアが解説【初心者向け】

JavaScriptでドロップダウンメニューを実装する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ドロップダウンメニューを実装する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ドロップダウンメニューとは 通常のメニューをクリックしたり、メニューにマウスをのせた時に再度メニューが下にドロップして、より細かいメニューが出てくるものです。 ドロップダウンとは、ドロップ（落とす）してダウン（下げ）させる、つまりメニューが上から落ちてくるイメージで表現されたものです。 ドロップダウンを別の言い方で「プルダウン」（プル＝引く）ともいいます。 上記の画像にマウスを合わせると「TechAcademyマガジン」サイトの上部にある項目からドロップダウンメニューが表示される様子がわかります。 ※ドロップダウンメニューを、メニュー以外で部品として使えるようにしたものが「ドロップダウンリスト」（またはプルダウンリスト）です。ドロップダウンリストは要素の右端にある「▼」などのボタンから、値を選択するリストを表示させます。また、値を編集できるドロップダウンリストをコンボボックスといいます。 ※HTML標準である部品としてのドロップダウンメニュー（セレクトボックス）については、解説記事「HTMLでドロップダウンメニューを表示する方法【初心者向け】」をご覧ください。 See the Pen js_ddmenu(non_css) by mentor-inoue-y (@mentor-inoue-y) on CodePen.   メニューの項目を作る（HTML） メニューを作成するには、まず骨組みとなる項目をHTMLで作ります。 ulタグを使ったリストに各項目をliタグで作成します。 ※ulタグとは、項目を並べたリストを作るためのHTML要素です。CSSによるスタイルを設定していなければ各項目の先頭にリストマーク「・」が付きます。 ※liタグとは、ulタグの中に入れるそれぞれの項目です。 See the Pen js_ddmenu_jQuery by mentor-inoue-y (@mentor-inoue-y) on CodePen. サンプルコード 以下のHTMLコードは、「はじめての方へ」からはじまる3つの項目を持つメニューを作る例です。 ソースコード <ul class="nav"> <li><a href="#">はじめての方へ</a> <ul> <li><a href="#">おすすめ</a></li> <li><a href="#">料金プラン</a></li>
JavaScript

JavaScriptで別ファイルの関数を呼び出す方法を現役エンジニアが解説【初心者向け】

JavaScriptで別ファイルの関数を呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 JavaScriptで別ファイルの関数を呼び出すことができれば、用途ごとにJavaScriptの関数をまとめることができます。 実務でも、複数のライブラリを使用する際、複数のJavaScriptファイルから関数を呼び出すので、ぜひ学習してみてください。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 別ファイルの関数を呼び出す方法について詳しく説明していくね！ 大石ゆかり お願いします！   別ファイルを読み込む方法 HTMLからJavaScriptを読み込む場合、scriptタグを利用して読み込みます。 scriptタグを実装する位置は2種類あります。 headタグに実装する場合 bodyタグの終了タグの直前に実装する場合   headタグに実装する場合 headタグに実装する場合は、JavaScriptをbodyタグ内で実行する場合です。 ここでは、jQueryをheadタグ内で読み込むことで、bodyタグ内のJavaScriptでjQueryを利用した処理を可能にしています。 Vue.jsなどのフロントエンドフレームワークを利用する際には、headタグ内でVueファイルを読み込み、body内でVueの処理を呼び出す実装行うこともあります。 注意点として、headタグに読み込み実装すると、headタグ内のJavaScriptを読み込み終わってからHTMLの表示が始まるため、表示速度が遅くなるというデメリットもあります。 <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> // スクリプトを<body>内で実行する </script>   bodyタグの終了タグの直前に実装する場合 現在主流な方法としては、bodyタグの終了タグの直前にscriptタグを実装する方法です。 bodyタグの終了タグの直前にscriptタグを実装する際、複数のファイルを利用することがあります。 複数のJavaScriptファイルを呼び出す場合、先にjQueryなどのライブラリを読み込んでおくことで、他のファイルでjQueryが利用されていたときに、エラーなく処理できます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </body> </html>   別ファイルの関数を呼び出す方法 head内でJavaScriptファイルを2つ呼び出して、関数を呼び出してみます。 HTMLサンプルコード <html> <head> <meta charset="utf-8" /> <title></title> <script src="sample1.js"></script> <script src="sample2.js"></script> </head> <body> <input type="button" id="b1" value="ボタン1" onclick="sample1()"> </body> </html> sample1.jsサンプルコード function sample1() {     sample2(); } sample2.jsサンプルコード function sample2() {  
JavaScript

今さら聞けない！jQueryとは｜現役エンジニアが徹底解説【初心者向け】

Webサイト制作をしている人は一度は聞いたことがある言葉、jQuery。 jQueryはWebサイトやWebサービスを作る上で便利なものなので、デザインのスキルを向上させたいという人は習得が必須と言えるでしょう。 今回はjQueryでどんなことができるのかについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 記事の中で実際にjQueryでアニメーションを作る書き方も紹介しているので、初心者の方でもすぐに実践できるようになっています。ぜひ書きながら覚えてみてください。 目次ライブラリとはライブラリが必要なプログラミングとはJavascript、jQueryで使うライブラリライブラリを使ってプログラミングしてみよう執筆してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。     大石ゆかり jQueryというのは、何でしょうか？ 田島悠介 JavaScriptの書き方などを簡単にすることが出来る、JavaScriptで作成されたライブラリなんだ。 大石ゆかり 新しい書き方を覚えるのは、少し面倒じゃないですか？ 田島悠介 そうだね！ただ、一番のメリットはブラウザの互換性なんだよね。異なるブラウザでJavaScriptが微妙に違ったりするんだ。では、jQueryで出来ることを見てみよう！ jQueryとは jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われています。 jQueryのおかげで、プログラミングの初心者でも、フロントエンド開発に参加しやすくなりました。jQueryは初心者にやさしい、とても有用なJavaScriptライブラリです。 jQueryでできること jQueryの大きな特徴は ブラウザの違いを意識せずに済む HTMLのDOM操作が簡単にできる Ajax処理が簡単に記述できる の3つです。詳しく解説していきます。 1.ブラウザの違いを意識せずに済む JavaScriptは、各ブラウザに搭載されたエンジンにより実行されます。そのため、 Chrome FireFox InternetExproler Safari 等で、それぞれ微妙に対応可能なメソッドが違ったり、記法が異なります。 しかし、jQueryはこのような膨大なブラウザごとの記述差異を、自動的に吸収してくれるため、ユーザーはほとんどブラウザの違いを意識せずにプログラミングができます。 2.HTMLのDOM操作が簡単にできる jQueryの主な用途は、HTML部品の操作です。（HTMLの部品を、DOMと呼びます。） DOM操作の例 テキストボックスの中身を取得したり、変更する 画面部品の表示をボタン一つで非表示にしたり、再表示させる CSSをユーザー操作に合わせて変更する jQueryでは、これらの操作が簡単に実現可能です。 また、「HTMLやCSSのコーディングはできるけど、JavaScriptはわからない」というエンジニアがリリース当時は多かったため、CSSのセレクタ記法によりHTML部品を操作できるように設計されています。 例えば、テキストボックスの中身を取得するコードは、以下で実現できます。 HTML <input type="text" id="tBox" class="font-tbox" /> jQuery ( JavaScript ) //方法１ // CSSのセレクタ記法により、idが「tBox」のHTML部品を操作できる。 $("#tBox").val(); //方法２ // CSSのセレクタ記法により、「font-tbox」のClassを持つHTML部品を操作できる。 $(".font-tbox").val(); CSSセレクタ記法とは、このようにHTMLが持つ情報に「#」や「.」を指定して、HTMLファイルからDOMを検索して取得するための記法です。 3.Ajax処理が簡単に記述できる Ajaxとは、Asynchronous JavaScript And XML の略です。直訳すると、「非同期（で動作する）JavaScript と XML」です。 （現在はデータのやり取りにXMLではなくJSONを使うため、XMLに特に意味はありませんが、Javascriptからのサーバー通信にはJSON形式データ利用時でも、XMLHttpRequest(XHR)オブジェクトを利用します。) 通常、HTMLの画面からサーバーとやり取りする際には、「submit処理」（お問い合わせフォームの送信ボタンを押した場合、等）を行い、サーバーにデータを投げ、応答を待ってから別のHTML画面全体を読込みなおす・・・といった処理が昔は主流でした。 ところが、最近は会員登録サイトにidを入力するだけで、テキストボックスの上部に「既に登録済みのIDです」などの表示が出てきて、「すぐにそんなことがわかるのか」と驚かれる方も多いと思います。 これは、Ajaxという非同期通信技術により実現されています。Ajaxは、基本的には画面表示中のHTMLページとは無関係に、裏方のJavascriptだけでサーバー通信してしまう技術です。そのため、クライアントとサーバーが通信中であってもHTML画面をユーザーが操作し続けることができます。 この技術の発展により、SPA（Single Page Application）という、画面遷移せずにインタラクティブな多目的操作ができるアプリケーションを提供する方式もずいぶん増えてきました。 Ajax技術の普及により、ユーザーがサーバーと通信（キャッチボール）する際の方式が、2通り選択できるようになりました。 HTMLからのsubmit処理によりサーバー通信する方式（同期処理方式） AjaxによりJavaScriptからサーバー通信する方式（非同期処理方式） jQueryは、このAjax処理を簡単に記述できるように設計されています。 [PR] Webデザインで副業する学習方法を動画で公開中jQueryでできないこと jQueryは、基本的にはHTMLのDOM操作とAjax処理を簡単に記述するためのものです。そのため、JavaScript内部における処理は、基本的には通常のJavaScriptコードで記述します。 例えば、以下のような場合です。 変数に格納した数値同士の足し算 配列データの操作 オブジェクト型データの操作 JavaScript内のループ処理 jQueryの読み込み方法 jQueryを利用する為には、開発しているHTMLの中にjQueryを読み込む必要があります。読み込みをする方法は、2つありますのでそれぞれ解説していきます。 1.CDNを利用する方法 HTMLのbodyタグ内の最下部に、以下のコードを記述するだけでOKです。 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script> CDNとは、Contents Delivery Network の略で、サーバー上に公開されたプログラムをユーザーが自由に使うことができます。 2.jQueryのライブラリをダウンロードして使う方法 公式サイトのDownloadページからjQueryのソースコードをダウンロード可能です。 https://jquery.com/download/ 「Download the compressed, production jQuery 3.x.x」のリンクを右クリックして、「名前をつけてリンク先を保存」を選択すると、「jquery-3.4.1.min.js」がダウンロードできます。 ダウンロードしたJSファイルを、他のJSファイル同様にHTMLファイル上で読み込ませればOKです。 jQueryの書き方 今回の記事では、jQueryを使ったDOM操作の書き方をご紹介します。 手順は、以下です。 jQueryから、HTMLのDOMを取得する DOM種別ごとに決められたjQueryのメソッドを実行する 1.jQueryから、HTMLのDOMを取得する 基本的な構文は、以下です。 $(" セレクタ "); セレクタ部分には、CSSセレクタと全く同じ記法により、取得したいHTML要素の検索条件を指定します。例えば以下のようなHTML要素をjQueryで取得して操作したい場合、 HTML テキストボックス <input type="text" id="tBox" class="font-main" /> JavaScriptコードでは以下のようにjQueryからDOMを取得します。 JavaScript // DOMのidをキーにする場合 $("#tBox); // DOMのclass名をキーにする場合 $(".font-main"); 非常に簡単ですね。 「$」記号と括弧を記載して、その中に「#」や「.」を記載してから、HTMLファイルに記載されているidやclass名を指定します。そうすることでjQueryがJavaScript側からHTMLファイルを検索してタグ情報を取得し、JavaScript側で取得したDOMを操作するためのjQueryオブジェクトを作ってくれます。 2.DOMごとに決められたjQueryのメソッドを実行する さて、DOMを取得してjQueryで扱うためのオブジェクト生成をしただけでは、何も画面は変化しません。jQueryオブジェクトから、DOM種別ごとに決められたメソッドを指定する必要があります。 例えば、テキストボックスの場合は、val() の利用により、テキストボックス内に表示させる文字を指定可能です。 valメソッドの利用例を見てみましょう。 JavaScript $("#tBox").val("こんにちは！jQueryです！"); 実行結果   非常に簡単ですね。値を取得したい場合は、この val() メソッドを使うことが多いですね。また、値をセットする場合は、val() の引数に値をセットすればOKです。 実践的サンプルプログラム ボタンを押すと、あらかじめ用意しておいたメッセージエリアを表示できるプログラムです。 この技術を応用することにより、リッチなデザインのサイトや、SPA（シングルページアプリケーション）が構築できます。 まずは画面イメージを見ていきましょう。 ボタンを押す前（初期表示） ボタンを押した後 「jQueryで表示」のボタンを押すと、メッセージエリアが表示されます。 「表示をかくす」ボタンを押下すると、表示領域が消えて、元に戻ります。 次に、具体的なプログラムを見てみましょう。 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
JavaScript

8つの事例から学ぶ！優れたナビゲーションメニューの作り方

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Jake Rocheleau氏によって投稿されました。   モダンなJavaScriptとCSS3の効果によって、ドロップダウンメニューは進歩しています。しかし、すべてのドロップダウンメニューが同じように設計されているとは限りません。 この記事では、ユーザーにとって分かりやすいドロップダウンメニューを構築するためのデザインテクニックを紹介します。デザイン例の中には、多階層のドロップダウンメニュー、メガドロップダウンメニューなども含まれていますが、応用しているデザインルールは同じです。   サブメニューのための目印 サブメニューのあるリンクには、目印となるものを付けましょう。こうした視覚的な小さな目印を配置することで、ユーザーにとってリンクの場所がわかりやすく、アクセスしやすくなります。 このルールは設計するリンクが1階層でも4階層でも適用されます。 目印には、矢印、ドット、四角形など目立ちやすい記号を使用します。一般的な記号を使用している限り、ユーザーはその記号の意味を理解できるでしょう。 例として、上記Threadbirdの優れたナビゲーションメニューを見てみましょう。 このメニューのリンクには、サブメニューがあるものとないものがあります。サブメニューのあるリンクにだけ、目印が表示されています。 目印には、右向きの二重山括弧引用記号「（»）」が使われています。この記号はシングル矢印よりも目立ちやすいため、Webデザイナーに好まれています。 また、小さなサイズにしても、変形する心配もありません。   TutsPlusのナビゲーションメニューも同じような設計です。ドロップダウン形式には下向きの矢印、フライアウト形式には右向きの矢印が使われています。 ただし、サブメニューに使われている矢印の記号に、1つ残念な点があります。 それは、すべてのリンクにサブメニューがあるにもかかわらず、矢印アイコンは、メニューアイテム上でマウスホバーされた時にしか表示されないことです。この場合、矢印アイコンは常に表示されたままにしておくことが、デザインのベストプラクティスです。 しかし、TutsPlusのシンプルなデザインは個人的には好きです。小さな目印がユーザビリティ向上に役立つことを示している、完璧な例といえます。   リンクのスペースには、paddingを使用する ほとんどのドロップダウンメニューでは、リンク間にスペースが設けられています。しかし、マージン（margin）とパディング（padding）は区別しましょう。 marginを使用した場合、リンクのテキストそのものをクリック/タップすることになります。クリック可能な領域は、テキストとほぼ同じ面積になります。一方、paddingを使用した場合、全体をクリック可能な領域にすることができ、より大きなターゲット要素をユーザーに提供できます。 ドロップダウンメニューでは、より大きな領域を確保する方が良いでしょう。 Webdesigner Depotは、昨年のデザイン変更で、クールなアニメーションのドロップダウンメニューを実現しました。blogというリンクをクリックすると、2カラムのドロップダウンメニューが表示されます。これらのリンクをクリックすれば、スペースにpaddingが使用されていることに気づくでしょう。 リンクのテキスト周辺の領域もクリック可能になっていることで、サイトのナビゲーションが向上しています。   ほとんどのドロップダウンメニューは、「スペースにpaddingを使用するもの」「スペースにmarginを使用するもの」の2つに分類されます。 どちらのタイプであるかは、リンク近くのスペースをホバーした時に、マウスのカーソルがクリック可能を示す「手袋アイコン」に変化するかどうかによって確かめることができます。 次のWebサイトは、paddingを使用していない例です。 The Philadelphia Orchestraは美しいデザインのWebサイトです。しかし、ドロップダウンメニューのリンクは、テキスト部分しかクリックできません。しかも最悪なことに、ドロップダウンメニューの面積が広いのに、リンクのテキストがとても小さいのです。 marginがpaddingよりも優れた選択になるケースは考えられません。ただし、リンクをブロックレベル要素にした場合、リンクはドロップダウンメニューの100%の領域を占領します。このことは、ユーザーがリンクのボックスの領域内であれば、どこでもクリック可能になることを意味します。 どちらを選択するべきかは明らかです。ドロップダウンメニュー内のリンクをクリック/タップ可能な領域を広くすれば、ナビゲーションの使いやすさを大きく向上させることができるでしょう。   [PR] Webデザインで副業する学習方法を動画で公開中ホバー状態を明確に示す ホバーされたメニューの「アクティブな」クラスを設計すれば、所属関係の構造が明らかになります。ほとんどのデザイナーは、ホバーされた時のリンクに、「:hover擬似クラス」を使用しています。 しかし、ユーザーがサブメニューのリンクをホバーした時に、メインのリンクを強調して表示したままにするのも効果的な方法です。これにより辿った構造が明らかになり、どのサブメニューのリンクがホバーされているかが一目でわかります。   ホバー状態を設計するには、フォントの色の変更、背景色の変更、テキストの下線、ハイライトなど多くのテクニックがあります。 目的は、親リンクを、ホバーされていない時にもアクティブな状態に保つことです。 例として、上のDePauw UniversityのWebサイトは、白と黒のシンプルなコントラストカラーを使っています。ナビゲーションメニューは、デフォルトでは黒い背景に白いテキストですが、ホバー時にはこれらの色が逆転します。 設計ごとにスタイルがあるので、必ずしも白黒のスタイルにする必要はありません。しかし、コントラストをはっきりさせて、アクティブな状態を目立たせることが大切です。   Comedy CentralのWebサイトにも同じ効果が使われています。この場合、白の代わりに、ライムカラーの黄緑色が使われています。 もちろん、このアクティブ状態を示すハイライト効果なしのドロップダウンメニューを構築することも可能です。しかし、単に機能するからといって、それが必ずしも最善の選択であるとは限らないことをデザイナーは理解しておくべきです。 私は、すべてのドロップダウンメニューはアクティブ状態を示すハイライト効果を、親リンクに使用するべきだと思います。2～3階層のサブ-サブメニューになっているものも含めて。   ドロップダウンのアニメーションは迅速にする jQueryとCSS3を組み合わせると、Web上で強力なアニメーションを作成できます。スライド効果であれフェードアウト効果であれ、ドロップダウンメニューは、アニメーションで進化します。 しかし、アニメーションは常に目的に合ったものにするべきです。UI/UXデザイナーであれば、実践的にアニメーションを使用できることが望ましいです。ただし、アニメーションは、見た目に活気を与えることができますが、実行を遅くしてユーザー体験を低下させないように注意しましょう。 最も優れたドロップダウンアニメーションのための2つの要素は、「速いこと」と「よく目立つこと」に要約できます。 例として、上のESPNのナビゲーションを見てみましょう。どのスポーツ部門からでも、チームや関連するリンクのドロップダウンメニューを表示できます。 このドロップダウンメニューは、上から下に向かって表示されます。しかし処理は迅速で、リンクをクリックするまでに2〜3秒もかかりません。 一般的には、メニューのアニメーションは1.5秒以下に保つことをおすすめします。このルールは、メニューのアニメーションにのみ適用されます。必要があれば、他のページのアニメーションを最大3〜5秒（またはそれ以上）に延長しても構いません。   CSS MenuMakerのWebサイトは、素晴らしいドロップダウンメニューを設計しています。ドロップダウンメニューは、所属している親リンクを示すために、吹き出しのようなデザインをした引用の矢印となっています。 また、これらのドロップダウンのアニメーションは迅速です。フェードイン＆アウト効果は高速に処理され、おそらく300ミリ秒くらいしかかかりません。 カーソルが他の場所に移動したときにのみアニメーションが生成され、リンクは明確に表示されます。 このことは素晴らしいドロップダウンメニューアニメーションの鍵です。アニメーションは誰もが好む魔法のような効果を実現できるものですが、アニメーション要素をページの構成要素の一部として考えることも重要です。   結論 優れたドロップダウンメニューでは、「機能」と「ビジュアル」の両方が考慮されています。 つまり、外観のデザインも大切ですが、ユーザーのために分かりやすく構築することも大切です。 どのルールもシンプルで、小さなコードを追加するだけで簡単に実装できるでしょう。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。自分でデザインを形にしたい、デザインのスキルを上げたいという方はぜひご覧ください。
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】