Angular.jsで作るノートパッドWebアプリケーション

ノートパッドWebアプリケーションのCSSコーディング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
作成したノートパッドWebアプリケーションのHTMLに対してのCSSコーディングの方法について、いくつかポイントを確認します。
講師:
03:57

字幕

このレッスンでは 前回のレッスンで作成した ノーパットWebアプリケーションの HTMLに対して CSSコーディングを行う方法について いくつかポイントを確認していきます まずはダウンロードしてきた こちらの「css_coding」という フォルダーの中に入っている 「HTMLファイル」と「CSSファイル」 そして「JavaScriptファイル」を 「エディタ」で開いてください そして これが それらのファイルを開いた状態です これらのファイルを使って 今回のレッスンの解説を 進めていきたいと思います それでは 早速 レッスンを始めていきましょう まずは この「index.html」を ブラウザで開いて 現状の内容を確認してみたいと思います ちなみに こちらの「CSSファイル」には このとおり 今回ご説明するCSSコーディングが すでに記述された状態となっています それでは 先ほどのダウンロードしてきた こちらの「index.html」 こちらをブラウザで開いてみましょう 今回 確認に利用するブラウザは 「Chrome」ブラウザを利用します それでは開いてみましょう すると このような形で表示されてきましたね このように 本をデザインした形となっています この画面の中の こちらのこの左ページ部分 この部分は 複数の「ノート」のデータを リストにして表示させる部分となり こちらの右半分の部分 こちらは こちらで選択した「ノート」の 詳細なデータが 表示される部分となっています このレイアウトを CSSで どのように実現しているかを 確認していきたいと思います それでは「エディタ」に戻ります こちらが その「CSSファイル」ですね 基本的には Angular.jsを利用するからといって 特に難しく考える必要はありません 普段どおりに CSSのコーディングをしていけばOKです どのようにコーディングしているかというと まずは こちらの「div#container」に対して ノートがデザインされた画像を 背景に設定しています そして このノートのデザインの左サイド部分 要するに ノートのリスト表示部分ですね こちらと そして 詳細を表示するための右部分 この部分は 「div#list」と そして こちらの「article#detail」 という形に分けています そして それぞれに こちらの「display: inline-block;」を することによって 左右に並べて表示させています そして こちらのリストの中にある 様々な要素や こちらの詳細部分の中にある 様々な要素に対しては 「position: absolute;」を使って 「top」と「left」 もしくは 「right」や「bottom」を使いながら 位置を調節して それぞれのデザインに合うように 配置していっています そして 右の詳細部分に設置している 「input」ボックスと「textarea」に関しては 「border:none;」に設定して フォーム要素の枠線を消して デザインに馴染むように調整しています 以上が 今回の ノートパットWebアプリケーションを 作成していくための CSSコーディングのポイントとなります 以上で レッスンは終了です 今回は ノートパットWebアプリケーションの CSSコーディングの方法について いくつかポイントを確認いたしました 以降のレッスンでは この「HTMLファイル」から Angular.jsとJavaScriptファイルを 読み込む方法について 解説いたしますので そちらもあわせてご覧ください

Angular.jsで作るノートパッドWebアプリケーション

Angular.jsはJavaScriptライブラリで、複雑なWebアプリケーションを簡単かつ効率的に開発していくことが可能です。このコースではノートパッド機能をもったWebアプリケーションを実際に作り、それをAngular.jsを使って実装する方法について学習します。このコースを見れば、Angular.jsの基本的な内容とワークフローがわかるでしょう。

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

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

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

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