前回からの続きで、フロントエンドエンジニアになるために学習すべきこと、順序を解説していきます。
WEB DEVELOPER ROADMAP 2020とは
GitHubで公開されているWeb系エンジニアなるために学習すべき知識、順番などを示してくれているものとなります。
kamranahmedse/developer-roadmap
Roadmap to becoming a web developer in 2020. Contribute to kamranahmedse/developer-roadmap development by creating an account on GitHub.
kamranahmedseフロントエンドエンジニア
ロードマップ
アイコンの説明
各ブロックの左上についているアイコンの意味を説明します。
パープルのチェック
個人的にオススメ。
優先度は一番高い。
グリーンのチェック
紫のチェック以外の選択肢、これか紫のチェックについて学ぼう。
２番めに優先度は高い。
グレーのチェック
いつ学んでもよい。
優先度は最も低い。
グレー
オススメしない。
個人的にはやらなくていいと思う。
CSS
CSSです。
HTMLが骨組みでCSSは装飾になります。
文字に色をつけたり、線を引いたりなどなど。
- 基礎を学ぶ
- レイアウト
- レスポンシブデザインとメディアクエリ
基礎を学ぶ
ひたすら覚えるしかないのでがんばってください。
Cascading Style Sheets - Wikipedia
Contributors to Wikimedia projects
CSS の基本
HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。つまり HTML 文書の要素に選択的にスタイルを適用できます。例えば、HTML ページのすべての段落要素を選択し、その中のテキストを赤色にするには、次のような CSS を記述します。
Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
レイアウト
よく使いますのでしっかり理解しましょう。
最近はFloatはあまり使わないので飛ばしてもいいかも。
フロート
あなたは今、現代のウェブ開発でフロートについて知っておくべきことがすべてわかっています。 過去のレイアウト方法の使用方法については、過去のレイアウト方法に関する記事を参照してください。 古いプロジェクトで作業している場合に便利です。
位置指定
私はあなたが基本的な位置指定と一緒に遊ぶことができて楽しかったと確信しています。 これは、レイアウト全体に使用する方法ではありませんが、ご覧のとおり、それが適しているタスクはたくさんあります。
display
display は CSS のプロパティで、要素の表示種別を指定し、これは要素がボックスを生成する方法の二つの基本的な品質から成ります。 — 外部表示種別はボックスがフローレイアウトにどのように加わるのかを定義し、内部表示種別はボックスの子がどのように配置されるのかを定義します。
ボックスモデル
以上が、ボックスモデルについて理解する必要があるほとんどのことです。レイアウト内の大きなボックスの大きさについて混乱している場合は、このレッスンに戻ってください。
グリッド
この概要では、CSS グリッドレイアウトの主な機能について説明しました。 あなたのデザインでそれを使い始めることができるはずです。 仕様をさらに深く掘り下げるには、以下にあるグリッドレイアウトのガイドを読んでください。
フレックスボックス
これで、フレックスボックスの基本についてのツアーは終了です。 私たちはあなたが楽しみを持って、学習と共に前進するにつれてそれと一緒に良い遊びがあることを願っています。 次に、CSS レイアウトのもう1つの重要な側面、CSS グリッドについて見ていきます。
レスポンシブデザインとメディアクエリ
必須の知識です。
これができないと仕事になりません。
レスポンシブウェブデザイン - Wikipedia
Contributors to Wikimedia projects
レスポンシブデザイン
モバイル向けとデスクトップ向けの Web サイトの開発に対する 別々のサイト 手法に関連する問題に対する反応として、比較的新しい (実際は とても古い) アイディアが人気を集め始めています。ユーザーエージェントでの判別とは別れを告げ、かわりにクライアント側のブラウザの機能でページを対応させましょう。この手法は Ethan Marcotte のブログ記事 A List Apart で紹介され、レスポンシブ Web デザイン として知られるようになりました。分離したサイト開発手法と同様に、レスポンシブ Web デザインにも短所があります。
メディアクエリの使用
メディアクエリは、一般的な端末の種類 (プリンタと画面など)や特定の特性 (画面の解像度やブラウザーのビューポートの幅など) に応じてサイトやアプリを変更したいときに便利です。
記事が長くなるので今回はここまで。
次回はJavaScriptについてやります。