こんにちはヒカルです。今日はプロゲート上級編を完了させました。
毎日最低30分が目標です
上級編の内容はレスポンシブデザインとなっています。
最近はほとんどのユーザーがスマホですので、スマホ対応したサイトもかっこいいですね。
またタブレットで見る人も多いのでそれぞれのデバイスに対応したデザインが必要ですね
スマホ用のデザインもカッコいいですよね
レスポンシブデザインの書き方はCSSに以下のコードを書いていきます。
@media (max-width:1000px) { }意味はあまり考えないようにしてます。なんか難しいですね。なんとなくこんな方法もあるんだくらいでいきたいと思います。
難しい感じがしますが覚えないようにしたいです。そのうち慣れると思うので、メモ帳にメモしてしてコピペで使っていきたいです。
ここに範囲を入れてそれぞれのデザインを書いていきます
@media (max-width:1000px) { /* h1のcolorをblueに指定してください */ h1{ color:blue; } } @media (min-width:1001px) { /* h1のcolorをgreenに指定してください */ h1{ color:green; }この表記だとデバイスの幅が1000pxまでならh１タグのカラーが青色になります。1001pxからはh1タグの色が緑になります。
以上で上級編のレスポンシブデザインは終了です。なんかホームページっぽいのができるようになってきました。
プロゲート上級編では画像のようにのレスポンシブデザインのコーディングをしていきます。
こんな感じのレスポンシブデザインが書くことができたらかっこいいですよね。
上級編のコースを完了するまでの時間は大体1.5時間くらいでしょうか。
慣れてきたのであまり時間を掛けなくてもサクサク勧めれるようになってきました。なんかホームページっぽいのが作れるようになってきています。
しかし、ここまでくると理解が追い付かなくてイライラすることも出てきます。（私が初心者のもありますが）ここまでやってきて自分なりにイライラの解消法をまとめたいと思います。
イライラの原因は今のところ大体こんな感じです。
エラーを自力で解決できない
とにかくエラーメッセージが出まくります。プロゲートでは大体間違ってるところを教えてくれますが実際にコーディングをするときは自分でエラーの原因を見つけないといけません。（初心者でこれならゾッとする）
専門用語が理解できない文法も多くある
初級、中級のじてんでも多数のよくわからない文法があります。
floatイメージしにくすぎ
このよくわからない文法を自分で調べるのですが、調べる量と時間で萎えてしまいます。１つのことを調べるので数時間かかるのも珍しくないです。
- 基本はGoogleで自分で調べることが重要
- ググり方は覚えてセンスを磨く必要がある
- ググり方の例を覚える→float 使い方float 解説など
- 最近流行りのやつ
- コードを直接入れてもエラーの場所を教えてくれる
- リライトもしてくれる
- 頼りすぎに注意
- わかり安く説明してくれてる
- 始めはこれでOK
- 調べたら自分で理解しているかチェックが必要
- とりあえず自分で書いてみる
- でも暗記はしない
- 書いたコードはメモ帳にストック
