自分のサイトを持っていて、いろいろいじっているうちにだんだん既存で用意してある色や線だけでは物足りなくなったりしませんか。
そして、他のサイトを見て
- あれはどうやるんだろう
- このデザインを自分のサイトにも使いたいなぁ
- 線の太さを変えたいけど、見た目はどうなるかな？
など思うことがあるかと思います。
でも、自分のサイトにHTMLやCSS、jQueryなどのコードを書いてとなると、ローカル環境上でFFFTPなどのアップロードソフトを用意したり、今多くの人が利用しているワードプレス(WP)も外観、テーマの編集で追記したらエラーで動かなくなった！などいろいろ大変かと思います。
そこで紹介したいのが「jsFiddle」というサイトです。
アカウントを作ったりする登録など一切なく誰でも利用できるというものです。
例えば、
この水色背景に白文字の文字色を変えて雰囲気を確かめたい
とすると、変更したい場合など普段みなさんはどうしてますか？
それでは「jsFiddle」の使い方を簡単ではありますが紹介していきたいと思います。
いろいろ使える機能はありますが、このページではHTMLとCSSを使用した例をご紹介します。
目次
はじめに
STEP.1)公式サイト「jsFiddle」を開く
細かい事がわからなくても大丈夫です。ただ「黒い画面が出たなぁ」と思う程度で構いません。
STEP.2)左上にある青いメニューの中から「Empty」を押す
違うコードを選択したい場合は左上にあるjsFiddleのロゴマーク(雲みたいなもの)を押すと最初の画面に出てきたものが現れます。
HTMLとCSSを記述する
今回使用するものは、上の例で紹介をした水色背景に白文字です。
<div class="example">
<p>この水色背景に白文字の・・・</p>
</div>
.example {
background-color: #42acdd;
}
.example p {
color: #fff;
padding: 10px;
}
STEP.3)HTMLとCSSを記述し「Run」を押す
「Run」を押すと右下に結果が現れます。これを見ながらいろいろ試してみてください。
表示結果を保存する
STEP.4)「Save」を押してサイトに一回保存します。
STEP.5)「Embed」で埋め込み用のタグを出す
タグを保存する
STEP.6)「Embed snippet:」に表示されたものをコピーする
もちろんこのままでも使用可能ですが、JavaScriptが最初に表示されるなどして使い勝手が悪い場合があるので、次に紹介するやり方で進めます。
1の「Embed」を押した後に2の「Prefer iframe?」を押すと、同じ箇所に下の画像が現れると思います。このタグをコピーしておいてください。
コードを埋め込む
STEP.7)表示したいところに先ほどのコードをペーストする
あれっ？何も表示されてないけど、どうして？
そうなんです！「Prefer iframe?」をコピペしただけでは上のような表示になるんです。JavaScriptを最初に表示させたい場合はいいのですが、表示順やサイズも変更できたら便利ですよね！
「jsFiddle」で作成したものをそのまま使用するのであればこれで終了ですが、引き続きカスタマイズのやり方を紹介するので、興味がある方は引き続き見ていってください。
カスタマイズする
既存のいいところは、コピーするだけで簡単に使えるというところですが、自分のページに必ず合うというわけではないですよね。
そこで、ここからは表示順やサイズもカスタマイズするやり方を紹介します。
「変更前」が先ほどコピーしたものです。
<iframe width="100%" height="300" src="//jsfiddle.net/unw28653/1/embedded/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
変更後
<iframe width="100%" height="140" src="//jsfiddle.net/unw28653/1/embedded/result,html,css/" allowpaymentrequest allowfullscreen="allowfullscreen" frameborder="0"></iframe>
わかりやすく黄色のマーカーを引きましたが、/embedded/の後ろを主に変更しています。
他にも、今回は
- JavaScriptを削除
- 表示順を、結果、html、CSSに変更
- 高さ(既存height=”300″)を140に変更
などしています。
カスタマイズした変更後のものを表示すると下のようになります。
HTMLやCSSから表示したい場合は、result,html,cssの順番を変更するだけでできます。
最後に
簡単に個人のブログサイトを作れたり、昔は業者に依頼して作ってもらっていたオンラインショッピングサイト（ECサイト）も自分で作れたりするサービスがたくさんありますよね。
そんなサービスをフル活用しつつ、プラスα(アルファ)で自分好みのサイトに仕上げられるツールの一つが「jsFiddle」だと思います。
操作も埋め込みもとても簡単なので、ぜひ試しに使ってみてください。
この記事へのコメントはありません。