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.このブログではこれまでに上のようなものを何度か使っています。これが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では同時に出すことができませんでしたが、同時に出せるスマホやタブレットがあったり、もしくは設定などで出せるのかもしれません。次に拡大と縮小方法です。画面下の中央付近に「1×」「0.5×」「0.25×」と書かれたボタンがあると思います。初期画面では×1になっています。「文字が大きすぎてみにくい」と思えばこれを0.5×、もしくは0.25×にすることで、表示画面を縮小することができます。ここは自分の使用しているデバイスと好みに合わせて変更してください。今回、Codepenで作ったコードにはa要素によるリンクが組み込まれています。青文字で「こちら」と書いている場所をタップすると、このブログのトップページが表示されるようになっています。トップ画面に行ったら、CodePenの画面上からはもとの実行画面に戻ることはできません。一度元の画面に戻りたいというときは、画面右下の「Rerun」と書かれたボタンを押してみてください。すると、CodePenに書かれたコードが再実行され、もとの画面に戻ることができます。わからない画面がでるHTMLが表示されているときにHTMLボタンを押すなど、「現在表示されている画面を押す」ことで、エラー?ではないと思いますが、よくわからない画面がでてきます。僕が読み手としてCodePenを初めて使ったとき、この画面のせいで「何これ意味わからん」ってなりました。その場合、もう一度別のボタンを押すことでもとのページに戻ることができます。それぞれのボタンは表示のON・OFFを切り替えるように設定されています。今表示されているのがHTMLで、その状態でHTMLボタンを押すと画面に何も表示されないという状態になってしまいます。その状態で出てくるのが、あの画面なのだと思います。以上が、ブログの読み手側からしたCodePenの基本的な使い方です。使う側からしてもとても簡単で、見る側としてもとても簡単です。扱うときは「全部英語で、よくわからない」となるかもしれませんが、慣れてしまうととても便利なサービスです。このブログだけでなく、いろいろなWebの技術系ブログでCodePenは使われています。一度使い方を覚えておくと、他のブログをみたときにもとても役に立ちます。これを読んでくれているあなたが「Webの技術系ブログ」を始めることがあれば、ぜひCodePenを使ってみてください。見出しを表す方法【HTML】h要素はHTMLにおいて「見出し」を表します。...初心者向けリンクの貼り付け方法【HTML】こんにちは、Kosei()です。け】この記事ではCSSの基本書式について、初心者向けにわかりやすく解説しています。...CSSでできることと組み込み方【初心者向け】CSSでできること、組み込み方を初心者向けに記述した記事です。...p要素、div要素、span要素の違いを初心者向けに解説【HTML】p要素、div要素、span要素の違いについて初心者向けに解説した記事です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。