ロゴ

2019.8.10

CodePenでコードを非表示にして、結果をフルスクリーンで表示させる

概要

CodePenの各投稿を開くと、下の画像のように、デフォルトではHTMLとCSSとJavaScriptのコードを記述するスペース(コードエディタパネル)が表示されています。

CodePenを各端末で表示させたときの画像

特にスマホでは、コードエディタパネルのせいで結果部分の表示領域が狭くなっています。これを解決する方法を、スマホ版とPC・タブレット版に分けてご紹介します。

スマホでのやり方

下の画像で赤丸で囲まれたアイコンをクリックしてください。そしてその中の「Full Page View」をクリックしてください。すると結果がフルスクリーンで表示されます!

CodePenを各端末で表示させたときの画像

PC・タブレットでのやり方

右上にある目のアイコンのボタンをクリックしてください。そしてその中の「Full Page View」をクリックしてください。すると結果がフルスクリーンで表示されます!

PCとタブレットでのpenの表示