キーテイクアウト

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

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

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

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

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

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

1。 CSSオプション

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

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

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

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

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

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

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

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

4。コレクションとタグ

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

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

5。異なるペンビュー

Codepenには、ペンの合計(jì)8つの異なるビューがあります。それぞれのビューには獨(dú)自の利點(diǎn)があります。

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

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

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

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

6。 Codepen Pro Views

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

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

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

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

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

7。ブログ

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

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

8。コミュニティ

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

9。インスピレーション

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

Jack RugileによるCanvas Sparkle Light Trial

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

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

ジュリアン?ガルニエ

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

  の使用に関するよくある質(zhì)問（FAQ）

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

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

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

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

以上がCodepenを使用する必要がある9つの理由の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。