オンラインでHTMLやCSSのコーディングができる「CodePen」の紹介

2024.01.04
オンラインでHTMLやCSSのコーディングができる「CodePen」の紹介

HTMLを作成して表示のテストをしようとすると、エディタとブラウザが必要になります。
ちょっとHTMLやCSSを試したい時、オンラインのエディタですぐ確認できたら便利ですね。
今回は、Webブラウザ上で簡単にHTMLを作成して動作確認ができるサイト「CodePen」を紹介します。

「CodePen」とは

「CodePen」は、Webブラウザ上でHTML、CSS、JavaScriptのコードを書いてそのまま実行できるWebサービスです。
無料で会員登録をしなくてもコードの確認ができますが、会員登録すると記載したコードを保存できるだけでなく、他のユーザーへの公開やブログへの埋め込みも可能です。

「CodePen」を使ってみよう

まず、CodePenのサイトへアクセスします。

https://codepen.io/trending

(1)右上の「Start Coding」を選択してください。

CodePenの実行画像

(2)HTML、CSS、JavaScriptを記述するスペースが表示されるので、テストしたいコードを入力してください。

CodePenびテストしたいコードを入力する画像

(3)入力すると、自動でページがリロードされて再実行されます。
サンプルでは、HTMLで「Hello,World!」と記述し、CSSで太字設定をしています。
下段の白色の部分に実行結果が表示されているのがわかります。

ページが再実行される画像

高度な使い方

HTMLやCSSだけではなく、例えば「jQueryで画面操作を実装したい」というようなこともあるかもしれません。
そんな時「CodePen」ではjQueryをはじめとする主要なJavaScriptライブラリを読み込んで使うことができます。
その手順を説明したいと思います。

(1)画面上部の「Settings」を選択してください。

CodePenの高度な画像

(2)設定ウィンドウが開きますので、「JS」を選択し、検索ウィンドウを使ってライブラリ(今回は「jQuery」) を検索します。
検索結果から「jquery」を選択してください。

実行画像

(3)ライブラリが読み込まれ、 jQuery を使うことができるようになりました。

実行画像

まとめ

オンラインでHTMLやCSS、JavaScriptのコーディングができるサイト「CodePen」を紹介しました。

  • 無料、ユーザー登録せずに気軽に使うことができる
  • 環境構築不要でHTMLやCSSを確認できる
  • jQueryなど主要なJavaScriptライブラリを読み込んで使うことができる

特にHTMLやCSSの勉強をしている方には手軽に使うことができるオンラインエディタですので、是非活用してみてください。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5