Qiitaで記事にCodePenのPenが埋め込めるようになったので、実際に作りつつ埋め込み方を紹介します。 CodePenのエディタの開き方 CodePenにアクセスし、ログインまたは登録後「Create」→「New Pen」を選びます。 するとエディタ画面が出ます。 HTML, CSS, JSなどを入力してSaveします。 埋め込み方 エディタ画面の右下のバーに Embed という項目があるのでクリックします。 するとモーダルが出るので、HTML形式を選択してボックス内のHTMLタグをコピーします。 コピーしたHTMLは以下のような感じになると思います。 <p data-height="265" data-theme-id="0" data-slug-hash="dJgNLK" data-default-tab="js,result" data-user="tomoasleep" da
![Qiitaで記事にCodePenが埋め込めるようになりました - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3775fd73b0dfce522243f4c490a1b0545001cee/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9UWlpdGElRTMlODElQTclRTglQTglOTglRTQlQkElOEIlRTMlODElQUJDb2RlUGVuJUUzJTgxJThDJUU1JTlGJThCJUUzJTgyJTgxJUU4JUJFJUJDJUUzJTgyJTgxJUUzJTgyJThCJUUzJTgyJTg4JUUzJTgxJTg2JUUzJTgxJUFCJUUzJTgxJUFBJUUzJTgyJThBJUUzJTgxJUJFJUUzJTgxJTk3JUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz03YjJlZDRjNTlhMDk2NGFiMjRhZmUxYzRjY2Y1NDUyZg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwUWlpdGEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTExZjUzMjRiM2M5YTIwOGQ1OTc2Yjg5M2U5YjM2MThk%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dab6a65935f4116f5270e03aff1242270)