PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

地図アプリのCSSコーディング

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成した地図アプリのHTMLファイルに対して、CSSでスタイルを調節する方法について解説致します。
講師:
03:57

字幕

このレッスンでは前回のレッスンで作成した 地図アプリのHTMLファイルに対して CSSでスタイルを調節する方法について 解説いたします まずはダウンロードしてきた こちらの「css_coding」 というフォルダの中に入っている こちらの「css」フォルダの中の 「index.css」ファイル こちらをエディタで開いてください そしてこれがそのファイルを開いた状態です このファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう この「index.css」ファイルは 以前のレッスンで GitHubからダウンロードしてきた プロジェクトテンプレートファイルを 今回の地図アプリ用に 修正したものとなっています このファイルを目で追いながら どのようにCSSコーディングを行っているか 確認していきたいと思います まずはこちらの「#app」が付いた 「div」タグです こちらの「div」タグには どのような解像度を持つ端末で このアプリを表示しても 横幅及び縦幅が その画面全体になるようにしています そして次に こちらの「#map」が付いた「div」タグ こちらの「div」タグは Google Mapを表示するための 「div」タグとなっていますが こちらの「width」や「height」は 先ほどのこちらの「div」タグと違って 「auto」という値を入れています Google Mapを表示させるためには それを囲っているHTML要素 今回だと こちらの「#map」が付いた 「div」タグですね こちらの「div」タグの横幅や縦幅の値を しっかりと「%」指定や「auto」ではなくて 例えば「100px」や「200px」 そういった形で具体的に 指示してあげる必要があります ただそうなると さまざまな解像度を持った端末の サイズに合わせることができないため そのサイズを合わせるために JavaScriptを使って こちらの「#map」の付いた 「div」タグの 横幅 縦幅を制御していきます この方法については 以降のレッスンでご紹介していきますので そちらも合わせて 参考にしてみるとよいでしょう そして次は こちらの「#searchBox」の付いた 「form」タグと そしてこちらの「#search」が付いた 「input」タグについて見ていきます 今回 地図を検索するための検索ボックスは Google Mapの レイヤーの上に設置していきます ですので こちらの「form」タグの方には 「position: absolute」として そして「z-index」を指定して Google Mapよりも上のレイヤーで 表示するようにしています そして「top」から「40px」ということで 位置を調節しています また こちらの「#search」が付いた 「input」ボックスですが 見慣れないプロパティが付いていますね こちらの「-webkit-appearance:」 というのはブラウザが勝手に付けてくる 「input」ボックスへのデザインを 無効化しています そうすることによって 自分好みの 「input」ボックスのデザインに 変えることができるわけですね そして そのデザインを こちらの方で定義しています アプリの中でこういった 「form」要素を設置した時に 意図しないデザインに なってしまうようであれば このようなプロパティを付けて 試してみるとよいでしょう 以上でレッスンは終了です 今回は前回のレッスンで作成した 地図アプリのHTMLファイルに対して CSSでスタイルを調節する方法について 解説いたしました 以降のレッスンからは JavaScript Google Maps APIを使って 実際にアプリ内に 地図機能を実装する方法について 解説していきますので そちらも合わせてご覧ください

PhoneGap Buildで作るGPSを使ったスマートフォン用地図アプリ

PhoneGap BuildとはHTMLやCSS、JavaScriptなどを使って制作したファイルをモバイルアプリに変換してくれるWebサービスです。このコースではPhoneGap Buildを使いながらGPS機能を用いた地図アプリの作成する方法について学習します。PhoneGap Buildの事前準備や地図機能の実装方法などについて詳しく解説します。

1時間15分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2015年03月11日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。