HTML/CSS/JavaScriptのソースコードを公開する方法。ブログに張り付けて公開するにはJSFiddleが便利！
こんにちは。きっしーです。
今日はJSFiddleの紹介です。
WEBデザインの勉強をしていて、わかったことをブログで公開して共有したいと思ったことはありませんか？
HTML/CSS/JavaScriptのソースをハイライト表示できて、かつ、結果を見れるそんなサービスが「JSFiddle」です。
JSFiddleでブログに張り付けた様子
まずは、JSFiddleでブログに張り付けた様子を見てみましょう。
簡単なHTML/CSSのソースを載せてみました。
いかがでしょうか？ソースコードとプレビューをタブで切り替えができて、とても分かりやすいですね。
JSFiddleの登録からブログ貼り付けまでの手順
JSFiddleを使ってブログに張り付けるまでの手順は以下の通りです。
JSFiddleアカウントを作成する
JSFiddleにアクセスします。
画面右上の「Sign in」を選択します。
「Log in」ボタン下の「Sign up」をクリックします。
「E-mail address」「Username」「Password」「Repeat password」を入力して「Create an account」ボタンをクリックします。これでアカウントの作成が完了です。
ソースコードを書く
ブラウザ上に「HTML」「CSS」「JavaScript」が表示されていると思います。ここにソースコードを書きます。
実行して動作を確認する
「Run」をクリックすると、「Result」に結果が表示されます。
「Settings」で設定を変えるとリアルタイムで結果に反映することもできます。
ソースコードを保存する
「Save」をクリックするとソースコードが保存されます。再度編集した場合は、「Update」をクリックします。
「Settings」で設定を変えると自動で保存することもできます。
ブログに張り付ける
「Embed」をクリックすると、貼り付けのフォーマットを設定する画面が出ます。「Embed code」をコピーしてブログに張り付ければ完成です。
「JavaScript」のコードを張り付けてうまく動かないときは、「iframe」のコードで試してみてください。
まとめ
いかがでしたでしょうか？
JSFiddleを使うと、
- ブラウザで簡単にHTML/CSS/JavaScriptをコーディングできる
- ソースコードを簡単に共有できる。
- 共有したソースコードはハイライト表示され、ソースコードとプレビューをタブで簡単に切り替えできる。
こんなことが簡単にできることがわかりました。
あなたもぜひ、JSFiddleを使ってソースコードを共有してみてはいかがでしょうか。
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。