Codepenを使用する必要がある9つの理由

キーテイクアウト

• codepen.ioは、ユーザーが「ペン」またはセットのHTML、CSS、およびJavaScriptを作成できる汎用性の高いプラットフォームです。バグ、コラボレーション、およびインスピレーションの発見。
• Codepenは、CSSLINT統合、HTML、CSS、JavaScriptのさまざまなフレーバーのサポート、より速い開発のためのエメットのようなツールキット、PENのさまざまなビューなど、コーディング効率を高めるさまざまな機能を提供します。ビュー。
• このプラットフォームは、その強力なコミュニティの側面のために際立っており、建設的な批判を共有して受け取る能力と、インスピレーションの源としての役割を担い、ユーザーの仕事を改善するためのホームページに印象的なペン、記事、コレクションを表示します。 HTML、CSS、およびJavaScriptの知識

codepen.ioで、彼らは自分自身を「ウェブのフロントエンド側の遊び場」と表現しています。 Codepenは、バグをテストし、コラボレーションし、新しいインスピレーションを見つけるのに最適です。 HTML、CSS、およびJavaScriptのセットである「ペン」を作成できるようにすることで機能します。その後、これらのペンをプロフィールに表示し、フィードバックを受け取り、いつでもペンを編集し続けることができます。

多くのライブコードプレイグラウンドと同様に、Codepenはオープンソース環境で学習し、コード変更のライブプレビューを表示し、以下のようなWebページのようなWebページにCodepenデモを埋め込むことさえできます。

codepenで1つのdiv（@onediv）によるペンフルCSS nesを参照してください。

この記事では、この記事を超えて、Codepenが競合他社よりも上に置かれていると思われるもののいくつかを説明し、まだそうしていない場合はチェックする必要がある理由を説明します。

これらの機能を説明しながら、各セクションにランダムだがクールなペンも埋め込み、チェックアウトします。

1。 CSSオプション

Codepenには、CSSをより速く書くためのいくつかの素晴らしい機能が含まれています。ラジオボタンをクリックするだけで、CSSにremormize.cssまたはreset.cssを含めるように選択できます。 -Prefix -FreeまたはAutoprefixerも使用することもできます。このようにして、外部ファイルにリンクするために時間をかける必要はありません（必要に応じて可能な場合も可能です）。

使用されているCSS技術のいくつかがわからない場合はどうなりますか？心配しないで; CodePenにはCSSLINT統合があり、CSSコードを検索し、エラー、警告、ブラウザのサポートが不十分な場合に警告します。

2。 HTML、CSS、およびJavaScriptのフレーバー

Codepenは、HTML、CSS、およびJavaScriptのフレーバーのトンをサポートしています。 HTMLの場合、Haml、Markdown、Slim、またはJadeを使用できます。 CSSの場合、彼らはSASSとSCS（オプションのコンパスまたはバーボンアドオンを使用）をサポートします。

JavaScriptメニューの下で、CoffeeScriptまたはLiveScriptを選択できます。また、jqueryやangularjsなどの最新バージョンを持つことができるドロップダウンメニューもあります。

3。エメットとVIMのバインディング

Codepenは、より速く、よりスムーズな開発についてです。そのため、エメットなどのツールキットを利用して、プロジェクトを動かし続けるのに役立ちます。 CodePenエディターを使用すると、コマンドラインキーボードショートカットであるVIMキーバインディングを使用できます。これらのツールは両方とも、より高速なワークフローを作成するのに役立ちます。

エメットの詳細については、記事をより速くワークフロー：マスタリングエメットをチェックすることができます。

4。コレクションとタグ

ペンにタグを追加して、検索可能になります。 「ローダー」や「フォーム」などのタグを検索すると、大量の有益なインスピレーションが生まれます。

必要に応じて、特定のトピックに関連するペンのコレクションを作成することもできます。 Codepenの共同設立者の1人であるChris Coyierは、「パスドローイング」や「繰り返しパターン」などのコレクションを作成しました。

5。異なるペンビュー

Codepenには、ペンの合計8つの異なるビューがあります。それぞれのビューには独自の利点があります。

エディタービュー - これは、ペンの編集のデフォルトビューです。コードプレビューターのサイズを調整し、表示する言語を選択できます。

詳細ビュー - このビューでは、ペンのタグ、ハート、コメント、フォークペンなどを見ることができます。これには、Codepenのソーシャル機能のほとんどが含まれています。

全ページビュー - これはかなり自明です。それはあなたのペンをiframe内でフルスクリーンにし、Codepenフッターのみを残します。

デバッグビュー - デバッグビューはフルスクリーンビューですが、追加の機能があります。 JavaScriptコンソールアクセスを容易にするために、iframeとCodepenフッターを削除します。これは、Codepenが干渉している可能性があると思われるコードをテストするのに最適です。

6。 Codepen Pro Views

あなたがCodepen Proユーザーである場合、より多くのビューにアクセスできます：

プレゼンテーションモード - このモードは、特にオーバーヘッドプロジェクター用に作成されます。ヘッダーを削除して、より多くのスペースを確保し、コードエディターのフォントサイズと色をすばやく変更できます。コードを変更せずにプレビューターのサイズを変更することもできます。

ライブビュー - CodePenライブビューを使用すると、ペンのフルスクリーンディスプレイがあります。そのペンを編集すると、入力すると自動的に更新されます。これは、複数のデバイスでテストするときによく使用されます

教授モード - このモードにより、人々はリアルタイムでコードを見ることができます。教授と学生がチャットできるチャットウィンドウもあります。

コラボードモード - コラボードモードでは、複数のプログラマーが同時にペンの編集を行うことができます。教授モードのように、チャットウィンドウもあります。

7。ブログ

ブログはCodepenの新機能であり、通常のブログのようにコードについて簡単に書くことができます。

マークダウンで書き込み、必要に応じてペンを埋め込む特別な埋め込みツールを使用できます。投稿にカスタムCSSを追加できます。投稿をテストするための非常にシンプルなプレビューがあります。

8。コミュニティ

これが、ロングショットで競争に先立ってCodepenを設定するものです。コミュニティは、最初からCodepenの大きな部分を占めてきました。コメントと共有を通じて、人々は建設的な批判を与えて受け取り、一緒に学ぶことができます。 4AE9B8やブルギットなどのグループは、CodePenを通じて会話から始まりました。創設者は、CodepenポッドキャストでCodepenコミュニティについてどう思うかについて話しました。

9。インスピレーション

印象的なペンは、常にホームページに表示され、優れた記事やコレクションが表示されます。ペンはインスピレーションと学ぶ楽しい方法の両方としてポーズをとります。素晴らしいペンを検索すると、独自の作業を改善し、HTML、CSS、およびJavaScriptの知識を向上させるのに役立ちます。 以下は、チェックアウトするためのいくつかの優れたデモです：

Jack RugileによるCanvas Sparkle Light Trial

1977年からティムピエトラスキー

によるスターウォーズオープニングクロール Justin WindleによるMakisu CSS 3Dドロップダウンコンセプト

ジュリアン・ガルニエ

による
• css 3d x-wing マリウス・バラジによるホバー付きのソーシャルボタンanand
• によるwebglデモ
confick
• による涙の布
• 結論
• 最終的に、Codepenを使用すると、より速く学習し、大規模なコミュニティの一部になるのに役立ちます。 SitePointの記事は、多くの場合、Codepenを使用してチュートリアル用のコードを埋め込みます。 Codepenのより優れた機能に興味がある場合は、これらをご覧ください。
  • bookmarklets
  • wordpressプラグイン
  • oembed
  • ボタンを雇ってください
  Codepen

  の使用に関するよくある質問（FAQ）

  開発者にとって好ましい選択肢となるCodepenの主要な機能は何ですか？
  Codepenは、開発者にとって好ましい選択肢となるさまざまな機能を提供する社会開発環境です。これは、コードの変更のライブビューを提供します。つまり、開発者はリアルタイムで行う変更を確認できます。この機能により、開発プロセスが大幅に高速化されます。 Codepenは、SCSS、Less、Stylusなどの前処理者もサポートしています。これは、開発者がより効率的なコードを作成するのに役立ちます。また、複数の開発者が同じプロジェクトで同時に作業できるようにするコラボレーションモードも提供します。この機能は、チームプロジェクトとペアプログラミングに特に役立ちます。
  テストとデバッグにCodePenを使用するにはどうすればよいですか？
  Codepenは、テストとデバッグコードのための優れたツールです。メインプロジェクトに影響を与えることなく、コードを作成、テスト、デバッグできる孤立した環境を提供します。 「ペン」を他の人と簡単に共有できるため、フィードバックを得てデバッグを支援するための優れたツールになります。 CodepenはConsole.logもサポートしています。これは、JavaScriptのデバッグに非常に役立ちます。 Codepenは、教育と学習のコーディングの両方に最適なツールです。教師はコーディングの概念を示すために「ペン」を作成することができ、学生はこれらの「ペン」をフォークして実験して学習できます。 CodePenには、教師がライブコーディングデモンストレーションを提供できるようにする「教授モード」もあります。Codepenをオフラインで使用できますか？
  Codepenは主にオンラインツールですが、オフライン機能を提供します。 Codepenをオフラインで使用して「ペン」で作業することができますが、変更を保存するためにオンラインに行く必要があります。 Codepenは簡単です。 「ペン」のURLを共有するか、別のWebサイトに「ペン」を埋め込むことができます。 Codepenは、ライブデモやプレゼンテーションに最適な「プレゼンテーションモード」も提供しています。仕事を共有したり、フィードバックを得たり、他の人から学びたり、プロジェクトで協力したりすることさえできます。コミュニティは、開発者として学び成長するのに最適な場所です。

  商業プロジェクトにCodepenを使用できますか？

  はい、商用プロジェクトにはCodepenを使用できます。ただし、CodePenで作成する「ペン」はデフォルトで公開されていることに注意することが重要です。したがって、「ペン」に機密情報や独自の情報を含めないように注意する必要があります。 JavaScript Pre-Processors？

  Codepenは、SCS、Less、Stylus、StylusなどのさまざまなCSSおよびJavaScriptの前処理をサポートしています。バベル、タイプスクリプト。これは、コードをPre-Processor言語で記述できることを意味し、CodepenはCSSまたはJavaScriptにコンパイルします。 、あなたが考慮するかもしれないいくつかの選択肢があります。これらには、jsfiddle、プランカー、グリッチが含まれます。これらの各ツールには独自の長所と短所があるため、最良の選択は特定のニーズと好みに依存します。

以上がCodepenを使用する必要がある9つの理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。