Wordpress関係

codepenを使ってみました。

2020/05/25

1 Code  Pen探索の経緯

html、cssのコーディングは大変!。考慮しなければいけないことがいっぱいあって…。なんか、html,css,表示ブラウザを一緒に見れるエディターはないものか?と探したところ、見つかりました。

 

例を挙げれば、padding(内側の縁)、margin(お隣さんのボックスとの境界)、line-height(文字の高さ)、img(contain、width,)flex、@media(スマホ対応)、position(center、top,reletive(相対位置)、absolute(絶対位置))、column(スマホでは縦並べ),文字や写真のレイヤー(z-index、background-imgとbackgroundの違い)、等々、まさにお手玉頂戴。

一旦作ったサイトでも新たに似たようなレイアウトを作ろうとすると、様々なレイアウト崩れが発生し、使い物にならない。そこで、汎用的にレイアウトを使えるようにできないかと思って、探したところ見つけたのがこのcode pen。まだまだ、この使いこなしはできていませんが、使った感想などを記載させていただきたいと思います。

2 code penとは

CodePenは、ユーザーが作成したHTML、CSS、およびJavaScriptコードスニペットをテストおよび展示するためのオンラインコミュニティです。開発者は、「ペン」と呼ばれるコードスニペットを作成してテストできる、オンラインコードエディタおよびオープンソースの学習環境として機能します。とあります。ウイキペディア

3 実際に使ってみた結果

下記のとおり、code penのpageからショートコードをコピーしてきて、WordPressになんとか

See the Pen 20200523_正円レシポンシブル by 佐久間 俊雄 (@zojydusc) on CodePen.39140

 

-Wordpress関係