codepenを使ってみました。
2023/01/08
１ Code Pen探索の経緯
Html、Css等のコーディングは大変!。考慮しなければいけないことがいっぱいあって…。
例を挙げれば、
・padding（内側の縁）
・margin（お隣さんのボックスとの境界領域指定・内包するブロック要素のセンタリグ等）
・border…（下線や、border-radiusでの角丸や円作成）
・line-height（文字の高さ）
・color：色番号等（＃000）等の色決め
・box-shadow…boxにつける影
・imgタグ（センターよりや右寄り等のポジショニング、枠の中での何％にする？、boxに入れる時の見え方指定（contain、width,）等
・float…文字を写真などの周りに回り込ませたい場合
・display：flex…スマホサイズでは縦長になることを予め想定し、ブロック要素<div＞等を横並びにさせたい
・＠media960px{}（メディア・クエリー：スマホ対応）
・position（center、top等の一決め、reletive（相対位置）、absolute（絶対位置）などの基準点決め）
・flex-direction:column（スマホでは縦に並べる）
・z-index…文字や写真等を重ねる場合のレイヤー
・background-imgとbackgroundの違い）、等々。
まさにお手玉頂戴。
ちょっとでも、違ったコードを書くと、全く動いてくれない。また、ブロック要素やインライン要素などややこしくて、わけわからない。ちょっとでも、すぐにブラウザに反映してくれて「どこかどう変わるか」わかる方法はないものか？探したところありました。それがCode Pen。
今まで、エディターはSublime TEXT3を使っていたわけですが、それより、全然いいです。移行を全面的に検討、新な可能性をおおいに感じます。なんとか使いこなせるようになりたいです。
一旦作ったサイトでも新たに似たようなレイアウトを作ろうとすると、様々なレイアウト崩れが発生し、使い物にならない。そこでもこのcode penは役立ちます。汎用的に使えますし、他のコーダーが作ったコーディングを使うこともできるようです。
２ code penとは
CodePenは、ユーザーが作成したHTML、CSS、およびJavaScriptコードスニペットをテストおよび展示するためのオンラインコミュニティです。開発者は、「ペン」と呼ばれるコードスニペットを作成してテストできる、オンラインコードエディタおよびオープンソースの学習環境として機能します。とあります。出典：ウイキペディア
３ 実際に使ってみた結果
下記のとおり、code penのpageからショートコードをコピーしてきて、WordPressに貼れば、しっかりと映ってくれます。これは嬉しい！、もっともっとコーディングが不毛ではなく、意味のあるもの（今後のスキル向上）になっていく予感を感じました！
