いつもありがとうございます。山野井です。
普段はウィンドウズで人がやっている処理を自動化するプログラムを作っています。
さくさく動いてくれると、面白くなって、プログラミングも加速してきます。
みなさんのスマートフォンサイト作成は、加速していますでしょうか？
今日は、jQueryMobileのＨＴＭＬについて紹介します。
jQueryMobileを使わないで作る場合は、世の中で一般的に使われているＨＴＭLの文法を使って、マークアップします。
しかしながら、jQueryMobileを使用する場合、独特の文法があります。
以下のＨＴＭＬ文をご覧ください。
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
「data-role」という文が使われています。
これは、jQueryMobile独特のものです。
簡単に言ってしまうと<div>...</div>の間の役割を示しています。
「data-role=」の後のダブルクオテーションで囲まれた部分がその意味で、その単語の意味そのままと言って良いでしょう。
一行目の"page"というのは、ページのことです。
そして、そのページの中に、「header」、「content」、「footer」があるということになります。
「header」、「content」、「footer」はそれぞれ、ヘッダー、ページの内容、フッターということになります。
これらも、読んで字のごとくということになります。
jQueryMobileは、今回紹介した「data-role」のような感じで、簡単に指定するだけで、いろいろとページをデザインすることができるようになっています。
今回は、こんな感じなのかぁということだけでも、頭の片隅に置いておいて下さい。