ローカル環境のjQueryでHello World!

 超簡単な jQuery の動作テストをしようとしたのですが、ローカル環境に XAMPP を用意したり、レンタルサーバーにアップロードするのも面倒臭いので、簡単にテストできる方法がないのか考えました。デバッグなどにご利用下さい。

jQueryをダウンロード

 まずは公式サイトから jQuery の JavaScript ファイルをダウンロードします。いくつかのバージョンを確認できますが、今回は WordPress に読み込まれているバージョンが1.x系だったので、1.12.3で動作確認を行いました。公式サイトで必要なバージョンをお選びください。

 公式サイトのどこからダウンロードすればよいのかが微妙にわかりにくいですが、トップページに「jQuery 3.1.1 release notes」というリンクがあると思うので、そこからたどれば古いバージョンにもたどり着けるはずです。

20161002_3_1

ソースコード

 次のソースコードを拡張子を .html にして保存します。文字コードを utf-8 に指定していますので、utf-8 を扱えるテキストエディタで作業してください。.html ファイルは基本的に BOM なしで保存すべきですが、PHP の関数を使うわけではないのでどちらでも問題はないと思います。

保存

 フォルダを作成して先ほどの HTML ファイルとダウンロードした jQuery を移動します。今回はデスクトップを例にしていますが、もちろんお好きな場所で構いません。

20161002_3_2

動作確認

 HTML ファイルをダブルクリックすれば標準に設定されているブラウザに表示されるので、こちらで動作を確認できます。当たり前なんですが、ブラウザの JavaScript をオフにしているときちんと表示されませんので注意してください。私はこれにハマった。

20161002_3_3

ブラウザのコンソールで動作確認する

 ブラウザにはコンソールと呼ばれる入出力ウィンドウが用意されています。jQuery で見た目をカスタマイズするようなデバッグを行わず、文字列を出力するだけならこちらのほうが手軽です。各ブラウザでのコンソールの表示方法は次の通りです。

Google Chrome

いずれかの方法で開発者ツールを起動します。

  • F12キー
  • Ctrl + Shift + J
  • 右クリックで「検証」を選択

「Console」タブで確認できます。

20161002_3_4

Firefox

いずれかの方法で開発者ツールを起動します。

  • F12キー
  • Ctrl + Shift + K
  • 右クリックで「要素を調査」を選択

「コンソール」タブで確認できます。

20161002_3_5

Internet Explorer

いずれかの方法で開発者ツールを起動します。

  • F12キー
  • 右クリックで「要素を検査」を選択

「コンソール」タブで確認できます。

20161002_3_9

ソースコード

ブラウザのコンソールに文字列を出力するには console.log を使用します。

文字列が出力されていることを確認してください。

20161002_3_7

おまけ

 蛇足ですが、今回なぜこのようなことをやろうと考えたのかを少しばかり語りたい。

 2014年に W3C が HTML5 を勧告したことで、ブロック・インラインという要素の分類の仕方が廃止されました。以前、当ブログでも記事にしました。

 実際にはデザインにおいて display プロパティに block や inline を指定するように、今でもブロック要素やインライン要素に関する知識が必要になる場面があります。

 先日、WordPress のサイドバーにあるアーカイブをドロップダウン表示にしようといろいろいじっていたところ、インライン要素であるはずの select 要素に幅を設定することができてしまいました。

 インライン要素の特徴として、前後に改行が挿入されず、幅や高さを設定できないというものがあります。身に覚えがありませんか?span タグに幅や高さを設定できずに苦しんだことを。display:block; を指定してやるだけなのですが、初心者の頃に私はこれに大いに苦しめられた記憶があります。

 調べてみると、select のほかに input と textarea もインライン要素でありながらブロック要素と同様の指定ができるとの情報が出てきました。

 さらに調べてみると、input と textarea は display プロパティの初期値が inline-block となっているようです。inline-block とはブロック要素をインライン要素のように横並びに表示し、さらにそれぞれの要素の高さや幅を指定することが出来る指定方法です。

 こちらのページでは、ソースコード付きでとてもわかりやすく解説されているのですが、私が知りたい肝心の select 要素が抜けてしまっています。そこで自分で調べようとして書いたのが今回のソースコード。

だいたい予想できると思いますが、コンソールで確認した select 要素の display プロパティの初期値は inline-block でした。

20161002_3_8

これが select がインライン要素に分類されていたにもかかわらず幅や高さを設定できてしまった理由です。ふぅ、長いおまけでした。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP