コードを上手にしたいですか？誰かにCSSを教えてください。

最近、友人が私にプログラミングガイダンスを求めました。彼女はプログラミングについて何も知らない絶対的な初心者です。私は自分の出発点であるHTMLとCSSから始めることにしました。 Codepenを使用して、既存のコードスニペットのコピーと変更を開始します。すぐに、学習パスが明確に提示されました。

この記事の目的は、CSSの基本を習得した読者にCSSの基本を教えることではなく、初心者が学習するよう促し、機会があるときに他の人に知識を伝えるように促すコンテンツに焦点を当てることです。他の人を助けることはとてもうれしいです。そして、私はコードについての考え方を変えた貴重な経験を学びました。 win-win！

他の人にCSSに教えた後に学んだ5つの教訓を次に示します。

レッスン1：ゼロから始めないでください

12年前にWebプログラミングの学習を始めたとき、私はレイアウトから始めました - フロート、マージン、フィル、ポジショニングの宣言を使用しました。これは最近少し時代遅れに見えるかもしれませんが、それは私が当時の新しいプログラミングパートナーから始めたところです。

結果は理想的ではありません。

ご想像のとおり、「これは画面の中央に空のボックスを見つける方法」から始めることは間違いです。なんて退屈だ！ FlexBoxが画面の中央に要素を配置する方法を示す能力に感銘を受けましたが（詳細については、後で詳しく説明します）、すぐに場所に関係のない他の多くの問題に直面しました。

「それで、色を変える方法は？」

「ホバリングするときに形を変えることはできますか？」

「Webページで使用できるフォントは何ですか？」

これを学ぶのにさらに数週間かかると思いました。

それで、12列のグリッドを教えるという私の計画は保留にされました。私たちは、いくつかのコピーされたコードスニペットとともにクリスの名前のカラーテーブルを持ち出し、試し始めました。まず、Cassidy Williams Netflix/Netlifyロゴの色を変更しました。おお！それはすぐに彼女の注意を引き付けました。

<code><a href="https://www.php.cn/link/2080dd731c0a27c6944f58acae270b81" target="_blank"> 
</a></code>
<div></div>
<div></div>
<div></div>

<div>きれい</div>

次に、CSSへのいくつかの簡単な微調整：

 <code>body { background: #F9F2DB; color: #092935; font-size: 50px; } a { color: #092935; } .logo .uno, .dos, .tres { background: #C61561; } .logo .dos { box-shadow: 0 0 20px #F9F2DB; } .logo::before { background: #F9F2DB; } .name { letter-spacing: 8px; }</code>

数分以内に、私の友人は魅了されました！心配する退屈なポジショニングはありません。コードの単純な行がほんの少しだけ馴染みのあるものをまったく違うものに変えることができます。

それから彼女は何でも色を変えることができることに気づきました！ブラウザによく知られているWebサイトをいくつかロードし、DevToolsを使用してテキストと背景の色を変更しました。これらはすべて数分で行われました。ミッションは完了しました！私の友人は魅了されました。

学んだ教訓：ゼロから構築しようとすることを心配しないでください。既存のリソースを使用してみてください！

レッスン2：コメント

これはコースの私の計画の一部ではありませんが、一部のCSSセクションがなぜ /および終了するのか、 /で終了する理由について疑問が生じます。

これは私の仕事について考え始めました。私は本当に十分なコードコメントを書いていませんでした。すべての（私はすべてを意味する）新しいプログラマーを観察することで、自分自身だけでなく、より広いチームにとっても、将来のあなたにとっても、コメントがどれほど有用であるかを実感しました。 （Sarah Drasnerはこのトピックについて素晴らしいスピーチをしています）。

ここにあります。その前に、私はコメントを書くのに非常に熱心だったと思いました。しかし、これを行う他の人を観察することで、コード（特にJavaScript）を何回見たことがあり、その時点で何をしていたかを思い出させるために1つか2つの行を追加したいと思います。 10秒のタスクは、時間（またはそれ以上）の時間を節約するかもしれません。これは蓄積され、今は私が改善に取り組んでいます。

学んだ教訓：もっとメモを書く。

レッスン3：ポジショニング

私たちはいくつかの基本的なHTMLから始めましたが、正直なところ、友人の目を見たとき、私はすぐに栄光を失いました。 （事前に書かれたCSSの編集とは異なり）すぐに機能するのを見ることができないと、あまりにも退屈に見えます。しかし、私たちは結果を忍耐して達成しました。

私を信じて、空の周りに1ピクセルの境界線を使用しないでください

要素は配置されています。あなたは聴衆の注意を非常に迅速に失うでしょう。犬の写真、またはヨーダやピザを空にしない限り、犬の写真を置いてください。その後、FlexBoxに目を向けました。最初は、CSSグリッドが少し多すぎることがわかりました。 CSSグリッドを簡単に調べましたが、それに関する多くの記事を読んでいるとき、多くの人が読者がすでにCSS、特にFlexBoxに精通していると仮定していることは明らかです。私の友人はFlexBoxから始めることにしました。

私は認めます：私はUIフレームワーク（特にブートストラップ）を使用することに慣れているので、ポジショニングのためにCSSを書くことはめったにありません。私はそれがどのように機能するか、そして（ほとんど）声明を知っていますが、比較的簡単な状況であっても、私はまだそれを自分で書き留めることはめったにありません。教えさせて、UIフレームワークへの依存について考えさせられました。はい、彼らは間違いなく素晴らしいです、そして私たちのプロジェクトで多くの時間を節約しますが、私は基本的に2ページしかない最近のプロジェクトでBootstrapを使用したことを覚えています。

学んだ教訓：プロジェクトが小さく、配置する必要がある要素の数が最小限である場合は、フレームワークを放棄し、コードをゼロから作成することを検討してください。最終結果は、より軽く、より速く、より満足のいくものになります！

レッスン4：タイプセット

私はタイポグラフィが好きです。私は過去数年にわたって素晴らしいデザイナーと仕事をすることができて幸運でした、そして、それは私がタイポグラフィのニュアンスを把握するのに本当に役立ちました。ラインの高さや単語間隔などの変化が、デザインを通常から優れたものに引き上げることができることは驚くべきことです。これは、私が習得することを学びたい新入生に欲しいものです。まあ、私が最初に興味を持っていたのはフォントを変更することだけだったので、私は気にする必要はありません。そして、私にとって重要なのは、私たちが使用できるフォントの数でした。選択はほぼ無限です。ウェブフォントとファウンドリを提供するサービスは、過去数年間で非常に速いペースで何かが可能になり、積み込み時間に小さな影響を与える地点まで急増しています。

しかし、デザイナー（そして私のようなフロントエンド開発者）についてのことはこれです。フォントの選択に関しては、私たちは少し狭いかもしれません。デザインは、同じサービスの同じサービスの同じフォント（ロボットとオープンサン？）に固執する傾向があります。初心者でフォントを探索することで、古い基準を超えて新しいことを試してみました。私は今、新しい組み合わせを探しており、それらが画面上でどのように機能するか、デザインの全体的なルックアンドフィールへの影響を微調整しています。要するに、タイポグラフィについて他の人に教えることで、私自身のタイポグラフィの歴史が改善されました。

学んだ教訓：タイポグラフィの最新のアップデートについて。

レッスン5 :: Hoverはすべてを楽しくします

これまでのところ、すべてが順調に進んでいますが、ご想像のとおり、物事はまだかなり静的です。実際の計画がなければ、私たちは誤って要素のホバー効果を追加しました。初めて色を変えたように、すぐに彼女の注意を引きました！

Hoverは相互作用を追加し、感動しやすくするため、初心者が試してみるのに最適です。オブジェクトをスケールし、ボックスを正方形から円に変更し、コンテンツを非表示にする - すべてが簡単に実行できるので、ホバリングは新しいプログラマーが即座に結果を得るための理想的な方法です。 「このようにプレイ」が他のドアを開けます。 「これをやるだけで？」これは、私たちの多くが私たちの毎日の仕事でめったに自問しないという質問です。明確なデザインでは、プレイする機会はほとんどなく、実験する機会もほとんどありません。

だから、ここに最後のレッスンがあります：プレイする時間を作ってください。 「どうやってこのことをさせますか？」と尋ねられています。私は新しいことを学び、CSSについて新しいことを学び、私が日常生活に戻すことができるものを理解することを強制します。実験（またはさらに良い、プレイ）は私をより良いデザイナーにし、私はもっとやります。

学んだ教訓：プレイする時間を作る。

結論は

初心者CSSを教えることが私に何かを教えてくれたなら、それは私が再びゼロからコードを書くことはめったにないということです。コードスニペットとオートコンプリートは時間の時間を節約しましたが、これらの便利さが非常に基本的なものを忘れさせました。私が知っておくべきこと。他の人に教えることにより、たまに15分しかかからないとしても、私のコーディングは全体的に改善されました。

私の友達は？まあ、彼女は私たちが一緒にいたので、CSSに非常に夢中になっていたので、HTMLを含むオンラインコースを受講していました。

以上がコードを上手にしたいですか？誰かにCSSを教えてください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。