[翻訳] フロントエンド戦略 ～異邦人から無敵のヒーローへ_html/css_WEB-ITnose

この記事の Github リポジトリ

この記事は、FreeCodeCamp の from-zero-to-front-end-hero-part から翻訳されたものです。

翻訳者のナンセンスに興味がない場合は、無視してください

2 日前に記事を翻訳しました: フロントエンドのインタビューを解決する このタイプの記事はすべて、フロントエンドの基本的な知識に関するものです。最後になりますが、記事内のリンクはすべて外国語の資料であり、さらに詳しく学ぶのは思考バーと知識ポイントのリストです。フロントエンド、またはより広範に言えば、クライアント開発のナレッジ ポイント マップについては、私はこれを推奨します。著者は、まず React+Redux+Webpack に関する一連のメモと実践的な演習を完了してから、これらの学習リンクを調べて整理し、中国語のものを見つけるか、自分でいくつかコンパイルして投稿する予定です。既製のものを書いているマスターは、私と共有することを歓迎します。

その年、私が初めてフロントエンドについて学んだとき、膨大な知識の海の中で途方に暮れ、どこから始めればよいのかわかりませんでした。他人にしなさい、他人に押し付けないでください。この記事は、フロントエンド学習の海をナビゲートするのに役立ちます。主に、以前の学習プロセス中にまとめたいくつかのリソースと洞察が含まれています。記事全体を 2 つのパートに分ける予定です。第 1 部では HTML と CSS の基礎知識を復習し、第 2 部では JavaScript、フロントエンド フレームワーク、デザイン パターンについてまとめます。

HTML と CSS の基本

フロントエンドの分野では、HTML と CSS を切り離すことはできません。 HTML と CSS は基本的に目に見えるものすべてを制御し、HTML はコンテンツを定義し、CSS はスタイルとレイアウトを担当します。

まずはHTMLとCSSから始めましょう。 ここでおすすめするのはMDNの公式ガイドです。 MDN では、重要な HTML および CSS コンテンツの詳細かつ体系的な説明が提供され、各章が個別のページとして提供され、CodePen および JSFiddle で表示されるデモが提供されます。

これらの基本的なチュートリアルを読んだ後、CodeAcademy が提供する「Web サイトの作成」シリーズのコースをご覧ください。このコースは完了するまでに数時間しかかかりませんが、もっと練習したい場合は、CSS チャレンジ ゲームである CSS Diner をチェックしてください。

最後に、Google Fonts の使用方法について説明します。CSSTricks の Google Font API の基本を参照してください。

中国で Google Fonts を使用できない場合は、FontAwesome を参照してください。中国語フォントを使用したい場合は、Github で検索することをお勧めします。

タイポグラフィー - インターフェースを構築する際には、タイポグラフィーも非常に重要な部分です。時間があれば、Donny Truong 著の『Professional Web Typography』を読むことをお勧めします。この本では、タイポグラフィーに関する基本的なすべてを学ぶことができます。これらのことを学んでいるときに忘れてしまうのではないかとあまり心配しないでください。いずれにしても覚えられるわけではありません。これらを文書化し、HTML と CSS がどのように機能するかを理解することに重点を置く必要があります。

HTML と CSS の基本を練習する

ここまでで、HTML と CSS の基本的な使用法を理解できたはずです。次は、学んだことを適用する必要があります。このパートでは、Web サイトとインターフェイスを自分で構築できるようにする 2 つの小さな実験が設計されています。実験として説明しているので、失敗を恐れないでください。

実験 1

最初の実験では、オンラインの HTML および CSS 実験プラットフォームである CodePen を使用しました。リアルタイムプレビュー機能もあり一石二鳥です。さて、私たちが作成したインターフェースのプロトタイプを見てみましょう。これはデザインの創造性に満ちています。

私はこのシリーズに惹かれています: 1、2、3、4、5...デスクトップのデザインに比べて少しシンプルなため、モバイルファーストのデザインを選択しましたが、自分で見つけることもできます。

デザインを選択したら、CodePen での作業を開始できます。他の人がデザインしたペンもチェックできます。CodePen のペンも忘れないでください。これはあなたの小さな友達です。最終的に実装したものが設計したものとかけ離れていたとしても、落胆する必要はありません。努力を続ければ必ず改善されます。

実験 2

実験 1 を終えて、あなたはすでに少し自信を持っていると思います。実験 2 では、まず大企業のいくつかの古典的なサイトから学習します。多くのサイトでは、CSS フレームワークを使用しているか、CSS クラス名を難読化しているため、ソース コードを読むのがさらに面倒になっています。より読みやすいソース コードをいくつかリストしました。

• Dropbox for Business: ヒーロー セクションを複製してみてください

• AirBnB: フッターを複製してみる

• PayPal: ナビゲーション バーを複製してみる

• Invision: ページの下部にあるサインアップ セクションを複製してみる

• Stripe : 支払いセクションを複製してみる

繰り返しますが、実験 2 の目的は、ページ全体を再構築することではなく、コンポーネントを分割する方法と他の人がそれを行う方法を知ることです。デザインの経験がない場合は、自分の可能性を探ってみるのも良いでしょう。優れたフロントエンド開発者は、優れたデザインを特定し、それらを完璧に再現できる必要があります。私の記事を参照してください: デザインの目を養いましょう。CodePen を使用してオンラインでプログラミングするか、ローカルで直接開発するかを選択できます。ローカルで実行することを選択した場合は、このテンプレート プロジェクトを使用できます。 Atom や Sublime などのエディターを使用することをお勧めします。さらに、Firefox または Chrome に付属のコンソールと開発者ツールもよく確認する必要があります。

HTML と CSS のベスト プラクティス

さて、HTML と CSS を使っていくつかの簡単なことができるようになったので、いわゆるベスト プラクティスを見てみましょう。ベスト プラクティスは、実際には日々の開発でまとめられた規則の集合であり、これにより、より高品質のコードをより迅速に開発および構築できるようになります。

セマンティック マークアップ: セマンティック マークアップ

HTML と CSS における重要なベスト プラクティスの 1 つは、セマンティックに読みやすいマークアップを記述する方法です。適切なセマンティクスとは、適切な HTML タグと CSS クラス名を使用して、表現したい構造的な意味を伝えることを意味します。

たとえば、h1 タグは、非常に重要なタイトル情報が含まれていることを示します。別の例はフッター タグで、フッター情報が含まれていることを直接示します。 「A Look Into Proper HTML5 Semantics」と CSSTricks の「What Makes For a Semantic Class Name」を読むことをお勧めします。

CSS の命名規則

次に重要なことは、CSS に適切なクラス名を付ける方法です。セマンティック タグなどの適切な命名習慣により、意味がより適切に伝わり、コードの可読性と保守性が大幅に向上します。 OOCSS、ACSS、BEM、SMACSS をご覧ください。これらは何ですか? この記事で説明されている CSS の命名規則について説明します。

全体として、私のアドバイスは、命名規則に関しては自分の直感に従うことです。そうすれば、時間が経つにつれて、その規則に慣れることができます。 Medium などの大企業が BEM のような命名規則をどのように実装しているかを知りたい場合は、「Medium の CSS は実際には非常に優れています」を参照してください。ここでは、高速な反復状況で命名規則を実装する方法を学びます。 CSS の命名規則。

CSS リセット

マージンや行の高さなど、スタイルの細かい点で異なるブラウザ間で不一致があるため、CSS 環境をリセットする方法を学ぶ必要があります。 MeyerWeb は一般的なリセット方法です。詳細については、「独自の単純な Reset.css ファイルを作成する」の記事を参照することをお勧めします。

クロスブラウザーのサポート

クロスブラウザーのサポートとは、コードがほとんどの最新のブラウザーをサポートする必要があることを意味します。トランジションなどの一部の一般的な CSS プロパティは、異なるブラウザーで実行するためにベンダー プレフィックスを必要とします。 CSS ベンダー プレフィックスの記事で詳細な知識を得ることができます。これは、さまざまなブラウザーでのテストにより多くの時間を費やす必要があることを意味します。

CSS プリプロセッサとポストプロセッサ

CSS の歴史を見ると、CSS は 1990 年代から長く険しい道を歩んできました。 UI システム全体はますます複雑になっており、人々はこの複雑さを管理するためにいくつかのプリプロセッサまたはポストプロセッサを使用することを選択するでしょう。 CSS プリプロセッサまたは CSS 言語拡張機能は、変数、ミックスイン、継承などの機能をサイレントに提供します。 2 つの主要な CSS プリプロセッサは、Sass と Less です。 2016 年半ばには、Sass がますます広く使用されるようになり、有名なレスポンシブ フレームワークである BootStrap が Less から Sass に移行されました。さらに、SASS について話すときに、Scss について言及する人も多くいます。whats-difference-sass-scss の記事を参照してください。

CSS ポストプロセッサは、手書きの CSS ファイルまたはプリコンパイルされた CSS ファイルに対して何らかの処理を実行します。例として、レンダリング プレフィックスを自動的に追加できるプラグインがあります。

CSS の前処理と後処理を学習したら、それらを毎日のコンパニオンにアップグレードします。ただし、多すぎるだけでは十分ではありません。変数や Mixin などの機能は、適切な場所で使用すべきです (翻訳者注: この記述は非常に合理的です)。この記事は今でもお勧めしますが、Medium の CSS は実際には非常に優れています。

グリッド システムと応答性

グリッド システムは、要素を水平または垂直に配置するために使用される CSS 構造です。

よく知られているグリッド フレームワークには、Bootstrap、Skeleton、Foundation があり、レイアウトで行と列を管理するためのスタイル シートを提供します。これらのフレームワークは非常に使いやすいですが、グリッドがどのように機能するかを理解する必要もあります。「CSS グリッド システムを理解する」と「グリッドを考えすぎない」を読むことをお勧めします。

グリッド システムのもう 1 つの目標は、Web サイトの応答性を高めることです。レスポンシブとは、Web サイトが画面のサイズに応じて Web サイトのサイズとレイアウトを動的に調整できることを意味します。多くの場合、このレスポンシブ機能は CSS メディア クエリに基づいており、さまざまな画面サイズに応じてさまざまな CSS スタイル ルールが使用されます。

詳細については、「メディア クエリの概要」を参照してください。さらに、いわゆるモバイル ファースト革命が起こっているため、『モバイル ファースト メディア クエリの概要』を読むことをお勧めします。

HTML と CSS のベスト プラクティスを実践する

道教信者の皆さん、おめでとうございます。基礎の構築は成功しました。ここで、学んだ内容を適用します。ここでの 2 つの実験では、主にクリーンなコードを作成し、長期的な可読性と保守性を確保する練習をすることができます。

実験 3

実験 3 では、以前に実行したプロジェクトを選択し、上記のベスト プラクティスを使用してそれらをリファクタリングして、コードがより読みやすく簡潔になるようにする必要があります。コードを効果的にリファクタリングする方法を知ることは、フロントエンド開発者にとって重要なスキルです。もちろん、高品質のコードを作成するには、長期にわたる反復プロセスが必要です。この記事「CSS アーキテクチャ: CSS のリファクタリング」は、学習の良い出発点です。

コードをリファクタリングすることを決定する前に、次の点を自問する必要があります

クラス名の定義は 6 か月後もまだ理解できますか?
HTML と CSS のセマンティックは十分ですか? コードの構造と関係を一目で理解できますか?
同じカラーコードを N 回再利用する場合でも、Sass 変数を使用することを忘れないでください。
あなたのコードはSafariとChromeの両方で正常に実行できますか?
Skeleton のようなグリッド フレームワークを使用して独自のレイアウトを置き換えることはできますか?
! important をよく使用しますか?
実験 4

前述の知識はすべてごちゃ混ぜです。上記を混ぜ合わせたものです。ただし、知っておく必要があるのは、上記のベスト プラクティスの多くは、ドラフトや小規模プロジェクトでは確認するのが難しく、大規模プロジェクトでのみ明らかにできるということです。

したがって、最後のプロジェクトでは、フロントエンド開発者として、個人の Web サイトを電子名刺として構築することをお勧めします。これまでの作品やプロジェクトの蓄積を表示するとともに、開発プロセスや開発履歴を振り返る場所でもあります。

Adham Dannaway の記事「ポートフォリオ Web サイトを設計および開発するための (単純な) ワークフロー」を参照して、ゼロから始めることができます。

最新情報を入手してください

HTML と CSS がすでに朝飯前であるとき、あなたはフロントエンド開発者の宮殿、つまり常に変化する場所に足を踏み入れています。

ここには、いつでもフォローできるブログや日記があります:

CSSTricks
Smashing Magazine

• デザイナーニュース

• Net tuts+

• CSS ウィザード

• 例で学ぶ

最後に、一般的に言えば、学ぶための最良の方法は、他の企業のスタイルと命名規則の別の例です。

スタイルガイド