CodePenは公式アプリはありませんが、モバイルブラウザからPC版とほぼ同等の機能を利用可能です。快適に使うためのコツを解説します。
1. 基本的な利用方法
- ブラウザでアクセス: iPhoneならSafari、AndroidならChromeで codepen.io にアクセス。
- ログイン: メニューから「Log In」を選択。
- エディタを開く: 「Create」→「Pen」を選択して開始。
2. モバイル版エディタの操作のコツ
- タブの切り替え: 上部の「HTML」「CSS」「JS」タブをタップしてエディタを切り替えます。
- プレビューの表示: コードエリアの下、または別タブでリアルタイムに結果を確認できます。
- 「デスクトップ用サイト」モード: 画面が狭い場合は、ブラウザ設定でPCレイアウトに切り替えると操作しやすいことがあります。
3. スマートフォンで使う際の注意点
- キーボードの占有: 画面が狭くなるため、Bluetoothキーボードの使用が推奨されます。
- 自動保存の確認: 通信環境に注意し、こまめに「Save」ボタンを押しましょう。
- 高度な設定: ライブラリの追加などは、歯車アイコンの「Settings」からPC版同様に行えます。
4. ホーム画面に追加してアプリ化する
ショートカットを作成するとアクセスがスムーズになります。
- iPhone (Safari): 共有アイコン → 「ホーム画面に追加」
- Android (Chrome): メニュー(3点ドット) → 「ホーム画面に追加」