初心者のための10のCodepenのヒント
Codepenは、とても簡単で人気のあるサイトです。 ペン 作業中のフロントエンドコードコンボ 直ちに。 Codepenがどのようなものであるか、または以前に聞いたことがないかわからない場合は、基本的には オンラインソースコード遊び場 （それを呼びましょう OSCP フロントエンドコーディングの三銃士のために（オタクのために）。 HTML, CSS そして JavaScript.
JSFiddle、JS Bin、CSSDeck、Dabbletなど、他にも似たようなOSCPがあります。 Codepenは間違いなくフロントエンド開発者の間で最もよく知られているものの1つです。さらに苦労することなく、いくつかに飛び込みましょう。 基本的で便利なヒント Codepenを使用するための.
1.実行ボタン
あなたがCodepenであなたのコードの出力が更新され続ける方法のファンでなければ しながら あなたが入力している、あなたはできる からオプトアウト “自動更新プレビュー” オプション, 代わりにRunボタンをクリックしてください。それをクリックすると、あなたはあなたのコードの出力を見て更新することができるでしょう いつでも好きなときに.
あなたがその出力がそのコードで働いているならば、これはまた素晴らしいオプションです。 たくさんのレイアウト変更を経る, 更新されるたびに再描画するため、処理が遅くなります。.
2.番号の増減
Codepenでコード内の数字を増減する 新しい番号を入力せずに. あなたがしなければならないのは、Ctrl / Cmdのキーの組み合わせを使うことだけです。 そして 上下の矢印.
3.複数カーソル
あなたはカーソルを置くことができます ソースコード内の複数の点, それからそれらのすべての点でタイプするか編集する 同時に. これは、同じ情報を入力している場合にのみ機能し、コピー＆ペーストの必要性を減らします。 Ctrl / Cmdキーを押しながらそれらの複数の点をクリックするだけです。.
4.色分けされたコンソールメッセージ
の コンソール JavaScriptオブジェクトは もう少し方法 そのほか ログ（） あなたができるようにする Webコンソールで印刷する.
あなたが使用することができます info（）, 警告する（） そして エラー（） メソッド 情報, 警告 そして エラー. 通常、Webコンソールはこれらのメッセージをタイプごとに色付けするか、またはそれらの横に適切なアイコンを表示します（警告メッセージの警告サインなど）。 より簡単に認識するため.
Codepenには独自のコンソールがあります これは左下隅にあるコンソールボタンをクリックして開くことができます。コンソールメッセージを簡単に確認するのに理想的です。 ブラウザのコンソールを開かなくても. このコンソールは、さまざまな種類のコンソールメッセージを区別します。 背景色が異なる.
5.エクスポート
保存したら、 ペン （単一のCodepenエンティティ）をエクスポートすることができます ZIPファイルとして HTML、CSS、およびJSコードのすべてがファイルに含まれています。ペンを保存するオプションもあります Githubの要旨として （Gitリポジトリ）各ペンの右下隅に[エクスポート]ボタンがあります。.
6.検索と置換
検索と置換 - 時々変数名を変更する傾向がある人々のための不可欠な操作。 Ctrl / Cmd + Shift + Fがコンボキーです。 開く “検索と置換” ダイアログ.
7.エメットタブトリガー
Emmetコーディングのタブトリガーについて知っていますか？ Emmetは、フロントエンド開発者向けの生産性向上ツールです。 後で拡張される型スケルトンコード. Codepenでこれを行うには、エディタに適切な略語をすばやく入力してTabキーを押すと、コード全体が一度に表示されます。. HTMLでのみ利用可能 Codepenで.
8.個々のコードファイルを入手する
前述のようにエクスポートオプションを使用すると、ペンの3つのファイル（HTML、CSS、およびJS）すべてが取得されます。しかし興味があれば これらのファイルのうち1つか2つのみ, そして、それらを個別にダウンロードしたいのですが、Codepenにもそのためのオプションがあります。.
Codepenにログインしたら、あなたのペンに行き、そして右上隅のChange Viewボタンをクリックしてください。ドロップダウンリストの一番下に、 個々のファイルへの直接ダウンロードリンク.
9. JavaScript変数を調べる
CodepenのJavaScriptコンソールはペンに保存されているJavaScriptに接続するので、それを使ってJavaScriptをすばやくテストすることもできます。この機能は特に便利です。 JS変数を調べる, このようにあなたは 追加のコンソールや警告メッセージを挿入する必要はありません テスト目的のためだけに元のコードに組み込む.
10.ペンをテンプレートにする
あなたがペンであなたのペンのほとんどを始める傾向があるなら 同じコードセット, あなたがテンプレートを使用することができます 繰り返しコードを保存する. ペンをテンプレートに変える, テンプレートオプションをチェックします 設定メニューの下で。後で新しいペンを作成するときに、 保存したテンプレートから始めます New Penボタンの右側にある下向き矢印をクリックします。保存したすべてのテンプレートを含むドロップダウンリストが表示されます。.
