/*サーチコンソール*/ /*google adcense*/

ブログの読み手から見たCodePenの使い方

2020年1月3日

こんにちは、Kosei(https://twitter.com/pompom_stk)です。

当ブログはプログラミング初心者に向けた記事を書いています。その上でコードを目で見てわかりやすくするために、「CodePen」というサービスを利用しています。自分のブログにCodePenを取り入れている人は、使い方は熟知していると思います。

ですがこのブログのターゲットは「プログラミング初心者」です。CodePenを見たことがない、見方がよくわからないという人がほとんどだと思います。

そこで今回は、ブログの読み手側から見たCodePenの使い方を解説していきます。

この記事の要点まとめ
CodePenとは?
CodePenとは、Webブラウザ上で簡単にコードを書き込み、それを実行してくれるサービス。
CodePenの使い方
この記事ではスマホを使った場合の使い方を解説。PCでもタブレットでも基本的な使い方は変わらない。
HTML/CSSの切り替え
HTMLまたはCSSボタンを押すことで、表示するコードを切り替えることができる。
実行画面
Resultボタンを押すことで、コードの実行画面が表示される。
拡大と縮小
1×、0.5×、0.25×ボタンを押すことで、拡大または縮小される。
再実行
Rernボタンを押すことで、コードが再実行される。
よくわからない画面がでる
表示している画面のボタンを押すことで、よくわからない画面が出てくる。もう一度何かのコードがResultボタンを押すことで解決。
CodePenはとても便利
CodePenは、利用者側からも読み手側からもとても便利なサービス。

CodePenとは?

CodePenとは、Webブラウザ上で簡単にHTML/CSS/JavaScriptのコードを書き込み、それを実行してくれる素晴らしいサービスです。このブログを含めた、Webの技術系ブログで使われていることが多いです。

利用者は利用する際、登録をする必要があります。ですが、読み手は登録なしで使う(見る)ことができます。

CodePenの使い方

実際にCodePenをこの記事に取り込んでみます。

See the Pen CodePenの使い方 by Kosei@SplaTech (@pompom_stk) on CodePen.

このブログではこれまでに上のようなものを何度か使っています。これがCodePenです。僕はHTMLやブログを始めたばかりの頃、いろいろなブログを見ていました。するとこの画面がでてくることがよくあり、いつも「もう少し使い方を説明してほしい」と思っていました。

少し使えばわかることではありますが、HTMやブログLについて知りたいのにCodePenの使い方まで考えるのは、正直めんどくさいです。そこで僕のブログでは、CodePenを使っている記事にこの記事のリンクを貼り、使い方がわからない人でも簡単にわかるようにすることにしました。

使用するデバイスによって表示方法や使用方法は少し異なります。現在、PCやタブレットよりスマートフォンを利用して見ることの方が多いと思いますので、この記事ではスマートフォンでの使用方法をご紹介します。基本的にはPCでもタブレットでも使用方法は同じです。

HTML/CSS/の切り替え

まず最初にCodepen画面にはHTML画面が表示されます。そして画面左上に、HTMLと書かれたボタンとCSSと書かれたボタンがあります。HTMLが表示されている状態では、HTMLのボタンが白っぽく、CSSのボタンが黒っぽく表示されていると思います。この白っぽい方が、今表示している画面を表しています。

HTMLではなく、CSSが見たい場合はCSSボタンを押してみてください。するとCSSのボタンが白くなり、画面がCSS表示に切り替わります。

この記事を書いている段階(2019年12月)では、HTMLの記事しかないため書いていませんが、その他の言語を記入することもできます。そのうち増えると思いますが、「見たい言語のボタンを押すとボタンが白くなり画面が切り替わる」、これは変わりません。

実行画面

次に実行画面を見てみましょう。画面中央付近に「Result」と書かれたボタンがあると思います。そのボタンを押してください。

すると先ほどと同じようにボタンが白く変化し、画面がプログラムの実行結果を表します。

PCの場合は画面左側にコード、右側に実行画面を同時に出すことができます。僕のiPhoneとiPadでは同時に出すことができませんでしたが、同時に出せるスマホやタブレットがあったり、もしくは設定などで出せるのかもしれません。

拡大と縮小

次に拡大と縮小方法です。画面下の中央付近に「」「0.5×」「0.25×」と書かれたボタンがあると思います。初期画面では×1になっています。

もし「文字が大きすぎてみにくい」と思えばこれを0.5×、もしくは0.25×にすることで、表示画面を縮小することができます。ここは自分の使用しているデバイスと好みに合わせて変更してください。

再実行

今回、Codepenで作ったコードにはa要素によるリンクが組み込まれています。青文字で「こちら」と書いている場所をタップすると、このブログのトップページが表示されるようになっています。

トップ画面に行ったら、CodePenの画面上からはもとの実行画面に戻ることはできません。もう一度元の画面に戻りたいというときは、画面右下の「Rerun」と書かれたボタンを押してみてください。

すると、CodePenに書かれたコードが再実行され、もとの画面に戻ることができます。

よくわからない画面がでる

HTMLが表示されているときにHTMLボタンを押すなど、「現在表示されている画面を押す」ことで、エラー?ではないと思いますが、よくわからない画面がでてきます。僕が読み手としてCodePenを初めて使ったとき、この画面のせいで「何これ意味わからん」ってなりました。

その場合、もう一度別のボタンを押すことでもとのページに戻ることができます。

それぞれのボタンは表示のON・OFFを切り替えるように設定されています。例えば今表示されているのがHTMLで、その状態でHTMLボタンを押すと画面に何も表示されないという状態になってしまいます。その状態で出てくるのが、あの画面なのだと思います。

CodePenはとても便利

以上が、ブログの読み手側からしたCodePenの基本的な使い方です。使う側からしてもとても簡単で、見る側としてもとても簡単です。初めて扱うときは「全部英語で、よくわからない」となるかもしれませんが、慣れてしまうととても便利なサービスです。

このブログだけでなく、いろいろなWebの技術系ブログでCodePenは使われています。一度使い方を覚えておくと、他のブログをみたときにもとても役に立ちます。

もしこれを読んでくれているあなたが「Webの技術系ブログ」を始めることがあれば、ぜひCodePenを使ってみてください。とても便利で、ブログの質もきっと上げてくれます!

CodePen : https://codepen.io/