PhoneGap Buildで作るスマートフォン用メモ帳アプリ

メモ帳アプリのCSSコーディング

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

ぜひご覧ください。

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

字幕

このレッスンでは 前回のレッスンで作成した メモ帳アプリのHTMLファイルに対して CSSでスタイルを調節する方法について 解説致します まずはダウンロードしてきた こちらのcss_coding というフォルダの中に入っている こちらのcssフォルダの中の index.cssファイルを エディタで開いて下さい そして これがそのファイルを開いた状態です このファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは早速レッスンを始めていきましょう それではまず 画面の こちらの部分にご注目下さい この部分は先程ダウンロードしてきた ファイルの中に入っている index.htmlファイルをブラウザで 開いたものとなります 今回は既にこのindex.cssファイルに メモ帳アプリのCSSコーディングを 行っている状態となっているので このようにレイアウトが整えられた状態で 表示されているのが分かります それでは こちらの左側部分の index.cssファイルを目で追いながら いくつかのポイントについて 確認していきたいと思います まずはこちらの部分から見ていきます こちらの部分ではアプリの一番の 外枠を囲っているbodyタグ そしてclass appのついたdivタグ そして そのdivタグの中に 入っている section 各ページの一番の外枠ですね そちらに対してwidth100%を 指定しています このようにすることで どのような 解像度の端末で閲覧しても 横幅いっぱいの幅でコンテンツが 表示されてくるようになります 現在 iPhoneやAndroid端末の 解像度は かなり多種多様になってきていますので このように%指定をしておくことによって どのような解像度で閲覧しても 横幅いっぱいのサイズで 表示させることが可能です では次を見ていきましょう まずはこちらのメモ一覧画面の方から メモ一覧画面においては 特に注意すべき点はありません 通常通りのCSSコーディングを 行っていただければ大丈夫です ただこちらの+ボタンのように 画像をコンテンツの中に設置する場合には Retina Displayや iPhone 6 Plusなどといった 高解像度の端末に対応させるために 実際の見た目の画像サイズよりも 2倍ないしは 3倍程度の 大きい画像を利用していきます その場合は CSS等で実際の見映えの サイズに縮小してあげる必要があります その部分はこちらの方に記述しています このように imgタグに対して width:40px height:30px というように 実際の見映えのサイズを指定してあげます 高解像度の端末で 実際の見映えのサイズ そのままの画像を利用してしまいますと 見た目がぼやけた感じになってきますので その際には 実際の端末で 見映えをよくチェックしながら 調節するとよいでしょう それでは次にメモの個別詳細画面の方について 見ていきたいと思います それはこちらのコメントの部分から 以下の部分で記述しています ちなみにこちらのブラウザ上ですと こちらの部分がメモの詳細部分となっています こちらも特に意識することなく 通常通りのCSSのコーディングで大丈夫です ただし こちらのメモ帳の 本文の部分の高さですが この部分は実際の端末の高さに応じて 動的に設定してあげる必要があるため この部分はCSSではなくて JavaScriptで後ほど 実装していきます また こちらのボタンが2つおいてある いわゆるフッター部分のところですが こちらはposition: absoluteを指定してあげて そして bottom: 0px を おいてあげることで こちらの画面の最下部に設定しています あとは 今現在の画面に2つの画面が両方とも 表示されている状態になっていますので まずアプリを起動してから 初めに表示される こちらの一覧画面のみを 表示させた状態にして こちらの詳細画面は非表示にしておきましょう こちらの section#detailの displayの値を noneに変更しておいてあげます そして こちらのブラウザ側を更新すると このように詳細画面が非表示となって 一覧画面のみが残りましたね この状態でCSSコーディングは 完了となります 以上でレッスンは終了です 今回は 前回のレッスンで作成した メモ帳アプリのHTMLファイルに対して CSSでスタイルを調節する方法について 解説致しました 以降のレッスンでは HTMLファイルから JavaScript jQueryを読み込む方法 そしてメモ帳アプリを開発するにあたっての JavaScriptでの事前設定の 方法について解説していきますので そちらも合わせてご覧下さい

PhoneGap Buildで作るスマートフォン用メモ帳アプリ

PhoneGap Buildを使えば、HTMLやCSS、JavaScriptを使って作成したコンテンツを簡単にモバイル用アプリに変換することができます。このコースではPhoneGap Buildを使ってiOSやAndroid端末に対応したメモ帳アプリを作る方法を学びます。アプリのビルドや実機端末へのインストール、各種機能の実装などについても説明します。

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

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

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

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