スマフォ用サイト制作のやり方 | 体幹ダイエット！人生を変えた７つのポイント
Amebaホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

体幹ダイエット！人生を変えた７つのポイント

体幹ダイエットで心も身体も元気になろう！健康な身体を保つために、日頃の生活習慣が大切です。
生活や生活にまつわるトラブル等、名良ちゃんが解決法を教えます。
あっ、こんなに便利な方法があったんだ！こんな便利な物があるんだ！など紹介します。

スマフォ用サイト制作のやり方

おはようございます。

昨日　アメブロテンプレートの話を書きましたがその時に
制作したスマフォサイトのことを書こうと思います。

これから携帯はスマートフォン時代に移行していきます。
それにより　IT業界ではスマフォサイトの制作者を沢山募集しています。

分かりやすくいうと　これからのサイト制作は

PC用サイト
携帯用サイト
スマフォ用サイト

と３種類の制作が必要になります。

特にDOCOMOはラクラクフォン以外は全部スマートフォンにします。
その為　公式サイトを契約している業者はスマフォサイトの制作に追われています。

私もご多分に漏れず　師匠から制作を教わりました。

教わってみるとあまり難しくはないので　少し書いて見たいと思います。

一番簡単なのがjQueryMobileを導入してやります。

HTMLとCSSさえ知っていればOKです。
javascript、HTML5、CSS3の知識はほとんど必要ありません。
いたって簡単にできてしまいます。

参考サイト
画像
http://www.ldhclub.org/shosetu/index.html

■導入方法

①下記URLよりよりjavascriptファイルをzip形式でダウンロードします。
②メニューバーよりDownloadをクリックします。
③中ほどのあるZipファイルをクリックします。


④解凍します。
⑤制作ソフトでindex.htmlを作ります。
ソフトが無い方は「KompoZer」が無料です。
⑥下記をコピペしてください。

※アメブロで禁止タグと表示されましたので
【<!--】　を 【< 】 【-->】を　【>】というように鍵カッコに書き直してください。

これより下をコピペ↓

<!--!DOCTYPE html-->
<!--html lang="ja"-->
<!--head-->
<!--meta charset="utf-8" /-->
<!--meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/-->
<!--meta name="format-detection" content="telephone=no"-->
<!--title-->タイトル<!--/title-->
<!--link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /-->
<!--link rel="stylesheet" type="text/css" href="style.css"-->
<!--script src="http://code.jquery.com/jquery-1.6.4.min.js"--><!--/script-->
<!--script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"--><!--/script-->

<!--/head-->
<!--body-->

<!--div data-role="page" id="index" data-theme="d"-->


<!--div data-role="header" data-theme="none"-->
<!--h1-->SAMPLE CAFE<!--/h1-->
<!--/div-->


<!--div data-role="content"-->

<!--ul data-role="listview" data-theme="d" data-inset="true" data-dividertheme="b" id="main_nav"-->
<!--li--><!--a href="#page1"-->ページ1<!--/a--><!--/li-->
<!--li--><!--a href="#page2"-->ページ2<!--/a--><!--/li-->
<!--li--><!--a href="#page3"-->ページ3<!--/a--><!--/li-->
<!--li--><!--a href="#page4"-->ページ4<!--/a--><!--/li-->
<!--li--><!--a href="#page5"-->ページ5<!--/a--><!--/li-->
<!--/ul-->

<!--h2-->Welcome To SampleCafe<!--/h2-->

<!--/div-->

<!--div data-role="footer" data-theme="b"-->
<!--h4-->Footer<!--/h4-->
<!--/div-->

<!--/div-->


<!--div data-role="page" id="page1"-->



<!--div data-role="header" data-theme="b"-->
<!--a data-icon="back" data-rel="back" data-transition="reverse"-->Back<!--h1-->ページ1<!--/h1-->
<!--a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse"-->Home<!--/a--><!--/div-->



<!--div data-role="content"-->
<!--p-->サブページ1の内容
<!--/div-->

<!--div data-role="footer" data-theme="b"-->
<!--h4-->Footer<!--/h4-->
<!--/div-->
<!--/div-->

<!--/body-->
<!--/html-->

これより上↑



-----------------------------------------------
いかがでしたか？

意外と簡単にできることがお分かりだと思います。

■今日のおすすめ
最近　白い歯が気になります。