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

この記事の 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 のベストプラクティスを実践する