CodePenでブログのカスタマイズ(CSS、HTMLを手軽にテスト)

wordpress編

こんにちは

ブログの記事装飾やデザイン変更などで利用されるhtmlやcss。

参照サイトからコピペで利用したり、独自に手を加えたりして自分のサイトに
適用するんですけど、いきなりhtmlやcssを挿入しても、うまく動作しない
とか、思っていた表示にならない
、と言うような経験があると思います。

そんな時、事前にhtmlやcssの記述をテストできたら便利だと思いませんか?

今回は、そんな要望を叶えてくれる簡単で便利な無料ソフト

CodePenを紹介します。

CodePenは元々、プログラマーさんがWebブラウザ上でHTML/
CSS/JavaScriptなどの言語をコーディングしたりするサービスで
すが、おじさんのようなプログラミング音痴でも十分活用(学習)
できるソフトだと思います。

スポンサーリンク

CodePenを使う前に

CodePenはアカウント登録しなくても、そのままで利用できますが、書き込ん
だコードなどを保存したりする場合は、アカウント登録する必要があります。
まずは、下記のサイトにアクセス↓

サイトにアクセスすると、

このような画面が現れますので、サインアップしましょう。

サインアップは、TwitterやFacebookなどのアカウントも利用できます。
サインアップを終えたら、右上のLog inボタンをクリック、

ログイン画面です。

ログインできたら、左の「Pen」をクリック、

コードの編集画面に変わりますので、ここにhtmlやcssを書き込んでいきます。

CodePenを使ってみよう

では実際に編集画面でhtmlを書いてみます。

○○○○の下に、太さ3PX・赤色の実線を引くhtmlです。

<span style="border-bottom: solid 3px #ff0000;">○○○○
</span>

上記のhtmlをCodePenにコピペすると、

①のhtmlの記述が正しければ、②のように結果がすぐさまプレビューできます。

次は、cssを試してみます。

クラス名をunder1にして、太さ3PX・黒の実線を引くように記述します。

.under1 {
  border-bottom: solid 3px 
  #000000;}

そして、htmlの欄に

<span class="under1">下線に黒の3PX</span>

と書いて、プレビューで確認すると、

け~さん
け~さん

ここまで説明すると、わざわざCodePen使わなくても
エディタで書いて、プレビューすればいいんじゃない
?と思うでしょう。

はるこ
はるこ

でも、CodePenならコードの記述がリアルタイムで
即座に確認できるし、値を変更するときなどにも便
利ですね。

ここまでは簡単なコードの例を紹介しましたが、例えばサイトデザインの
カスタマイズなどの複雑なコードを確認するのにも重宝します。

例えば、H2見出しのデザインをカスタマイズする場合、

h2 {
  position: relative;
  padding: 1rem 2rem;
  border-bottom: 6px solid #094;
}

h2:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 20%;
  height: 6px;
  content: '';
  background: #00cc5b;
}

cssでこのように書いて、htmlで

<h2>見出しデザインの見本</h2>

このように指定すると、

下段にサンプルが表示されます。

この時、下段のサンプルを見ながら、cssのpadding、width、height、px、
などの値を変えてたり、色を変更してみたりして細かいデザインの変化を確認
することができます。

はるこ
はるこ

気に入ったデザインが決まったら、そのままコピペす
れば簡単に利用できます。

け~さん
け~さん

よく使うコードは、CodePenに保存しておくこともで
きます。

まとめ

CodePenはプログラマーやウェブデザイナーの間では、よく利用されている
ウェブサービスですが、プログラミングに詳しくない方でも簡単に使用できます。

はるこ
はるこ

cssやhtmlの基本を覚えたりするのにも利用価値あり。

け~さん
け~さん

コードを書きながら、リアルタイムでデザインの変化
を眺めているだけでも楽しい。

みなさんもCodePenを使って、楽しみながらcssやhtmlを学んでみては
いかがでしょうか?

以上、CodePenの紹介でした。

それでは

コメント

タイトルとURLをコピーしました