テックアカデミーのWEBアプリケーションコース:レッスン3ではHTMLとCSSについて学びました

2018年2月23日

学びましたとはいっても、一応HTMLとCSSは既にある程度知ってるつもりなので、サラっと流しただけなのですが。

Code Penが便利すぎる

何より便利だと思ったのはCODE PEN(コードペン)というツールです。

これテックアカデミーの教材の中に埋め込まれていて、ブラウザで開くことができます。

画面を見ると左の枠からHTML部分、真ん中がCSS部分、下が表示部分となっています。

HTMLとかCSSの部分を自分で編集することができます。

例えばいま表示部分を見ると赤文字で飲料水、パン、牛乳、鶏肉、と書いてありますよね。

で、これをCSSのこの部分をgreenとかにすると、

すぐさま下の表示部分に反映されて緑色になります。これは便利。

プログラミングの学習するのにこんなに良いツールがあったなんて!

いよいよCloud9をさわる!

Lesson0でAWS Cloud9の登録と設定を行っております。
なのでいよいよCloud9でHTMLやCSSの記述を行っていく形となります。

ローカルパソコン上でHTMLファイルを作成したり‥ということはやりません。全てCloud9上で出来るようです。

いまいちCloud9の使い方がわからないので備忘録として残しておきます。

AWS Cloud9にログインしたらこの画面になるので画面右下の「OPEN IDE」をクリック。

こんな画面が出てきます。で、この画面で

ファイルの新規作成を行います。

ここでWEBページを作っていくようですね。

Cloud9でコピペが使えない?!

出てきた画面に、教材のHTMLコードをコピペ‥
変なエラー出てきた。

よくわからないのでGoogle翻訳してみたら

ネイティブクリップボードに関する重要な情報

デフォルトでは、ブラウザはネイティブクリップボードをメニューで使用することはできません。 つまり、メニューを介してコピーするものは、メニューに貼り付けてCloud9でのみ動作させる必要があります。

ネイティブキーボードを有効にするには、MacではCommand-Cを、WindowsではCtrl-Cを使用するか、ChromeではCloud9 Appをインストールします

とのこと。意味わからん。コピペは出来ないようだ。

と、思ったらキーボードの「Ctrl+C」でペーストできました。
「右クリック>Paste」とやるとエラーが出るようですね。

教材のネタバレになっちゃうんで具体的な課題とかコードは書きませんけど。Cloud9の使い方は慣れそうな予感です!

で、Windowsのデスクトップで普通にやってるように「Ctrl+S」で保存も出来ました。

なんとなく使い方わかってきました!

Cloud9にアップロードする方法

教材とちょっとやり方が違っていた気がするのでメモ。

ローカルPC上にあるファイルや画像なんかをアップロードできます。

Cloud9の画面上部にあるFile>Upload Local Files とすすみ

出てきた画面上に、ファイルやフォルダをドラッグアンドドロップすればOKです。
フォルダごとアップできる、というのが素敵ですね。

課題の提出もCloud9上でできる!

Lesson3の途中でさっそく課題の提出がありました。Cloud9でファイルを作成したことによって課題提出となりました。Cloud9はLesson0時の設定でテックアカデミーの先生と共有しているので、Cloud9に勝手に入ってもらってレビュー等をしてもらえる形です。

これは便利だし、ファイルを送信したりする必要が無いので楽です。

課題のレビューが完了して「合格」をもらいました!!

CSSも学んだ、長年の謎が解明!

実は私、CSS知ってると言っても実はあまり知りません(^_^;)

サイトを作る時、既に用意されたCSSとか誰かが作って公開している無料の物とかを利用させてもらうことが多く、イチから作ったことがないのです。だいたい既にあるものを編集したりは出来るんですけど。

なので今回のCSSのレッスンは楽しみの1つでもありました。

今まで知らずに使っていたmarginとpaddingの違いも判明したしclearfixの意味もわかったので大満足です!

てことで、また次回!

テックアカデミーはこちら↓

以下は自分用メモです。

■単独で書くクラスと、要素内のクラス

.aiueo {
	color:red;
}

p.aiueo {
	color:red;
}

は意味が違う。上のほうは全部の呼び出し元に対してフォントカラーを赤にするが、下の方は

タグにclass=aiueoと指定したところだけフォントカラーが赤になる。

■要素内の特定の要素にだけ適用する

div article h3 {
	color:red;
}

と書くと、div内のarticle内のh3にだけ、フォントカラー赤が適用される。

今までこれを知らずにやってました。

見よう見まねで知ってるのと、ちゃんと理解してるのでは大違いですね。。