文字色やサイズ、背景、レイアウトデザインなどを変更するためにCSSを編集します。
通常は、外観プレビューやデベロッパーツール（右クリック→「検証」で開く画面）を使いながら調整していくはず。しかし、実際のWebサイトを開いたまま編集していると、何度も画面を更新（リロード）する手間が発生してしまいます。
そこで役立つのが、今回ご紹介する無料ツールです。サイトを直接触らずに編集のシミュレーションができ、コードを書く練習にも最適です。
ブラウザ上で完結、初心者向けのおすすめツールです。
リアルタイムで表示されるプレビュー
See the Pen Untitled by mikoto (@mikotohodo) on CodePen.
CodePen（コードペン）公式サイト(https://codepen.io)
このCodePenを知っていれば、カスタマイズのハードルが一気に下がります。 どのように使うか説明していきます。
サイトを壊す心配なし！本番環境を汚さずテストできる
CodePenを使えば、プレビューを見ながらの不本意な上書きミスを減らせます。新しいデザインを試すときも、まずはCodePenで形を作り、完成したコードを本番へコピペするだけ。このステップを踏むだけで、表示崩れのリスクを最小限に抑えられます。
CodePenでコードの編集をする事で、Webサイトでの不要な画面更新も減らせます。
使い方は簡単です。海外のサイトなので難しそうに見えますが、やることは入力欄にコードを書き込むだけです。WordPressの複雑な設定画面を彷徨うよりずっとシンプルです。
最低限これだけ！CodePenで遊ぶ3ステップ
1.「Start Coding」を押す。
公式サイト（CodePen.io）の左上にあるボタンを押すだけ。
面倒なユーザー登録やログインは後回しで構いません。
ボタンをクリックした瞬間に、すぐコードが書けるエディタ画面が開きます。
2.HTML・CSSの入力欄にコードを書きこむ。
JS（JavaScript）の入力欄は一旦無視してOK！。難しいことは考えず、自分が試したい見た目を整えるコードのHTML・CSSを入力するだけで完結します。
3.リアルタイムで表示されるプレビュー画面の「おっ、変わった！」を楽しむ。
コードを1文字書き換えるたびに、プレビューが即座に反応します。これがCodePenの醍醐味と言えるでしょう。
手軽にコードの結果が知れる
手軽に使えるのがCodePenの良い所でもあります。
ブラウザのお気に入りから簡単に入力画面に行けるので、本当に手軽に使えます。
Webサイトに影響なくHTMLとCSSを書き込み、その結果をリアルタイムに表示できます。何一つデメリットがありません。
まだ使った事がない人は、是非活用してみてください。
まずは1行、文字の色を変えるだけでも構いません。
[CodePen公式サイト] を開いて、その『即時反映』の快感をぜひ体験してみてください。
コメント