ウェブ

Codepenをもっと便利に使うための設定【無料機能】

more-codepen

CodePenで設定しておきたい便利な機能設定についてまとめておきます。無料版での設定ですので、コードの練習に最適ですね。

設定を変えれば、HTMLCSSJavaScriptの他にいろんな方法で書くことができます。
CSSSCSSで書くことができ、「Slick(スリックスライダー)」なども使用することもできます。
種類豊富なので学びながら記録も出来る超便利サイト。

プル

自分にとってCodepenは欠かせないサイトです。

Codepenが初めての方は下記の記事から登録方法から解説しています。

エディター予測変換機能

コードの頭文字から予測変換をする設定についてです。Visual Studio CodeやAdobe Dreamweaverで予測変換機能が付いているように、CodePenにもその機能が備わっています。

この機能があるだけで飛躍的に早くコードミスも減らせる便利機能ですね。

コード予測変換
コード予測変換

右上の「アイコンをクリック」→「Settingsをクリック」

Settingsをクリック
Settingsをクリック

Settingsの「Editor Preferencesをクリック」→Editor Optionsの「Auto completeにチェックを入れる

これで予測変換機能が使用できます。

Editor Preferencesをクリック
Editor Preferencesをクリック

Editor Optionsの設定内容

Editor Options項目設定機能
Line Numbers行番号を表示する
Line Wrapping行折り返しをオンにする
Code Foldingコード折りたたみ機能をオンにする
Match Brackets/Tags対応する括弧をハイライトにする
Autocompleteオート予測変換機能をオンにする
設定内容

コーディング画面変更

コーディングする際に、自身の見やすいようにテキスト色と背景色を変更できます。14種類のパターンがあるので好みの色合いが見つかると思います。

Dark Themes
Dark Themes
Light Themes
Light Themes

他ユーザーのソースコード

複雑なCSSJavaScriptなど実装が難しい場合は、他者のソースコードを参考にするのが学習において効率がいいです。

気になるデザインのソースコードをコピーペーストで自身のコード画面に張り付けて、そのコードの一部分を消したり追加してみたりとどこが変わるか、どんな動きになるのか確認しながら学習することができますね。

Trending
Trending

自身のコードディング一覧

「Save」した自身のコードをプレビュー付きで一覧で管理されています。「Your Work」をクリックして確認。

Your Work
Your Work

WEB制作チーム内でコード共有

チームで分かれてパーツ制作する場合に担当したパーツの共有にも最適。

↓下記本は自身がこの1冊でWebすべての基本が身についたお勧めの本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

▪1冊ですべて身につくHTML & CSSとWebデザイン入門講座
HTMLとCSSとWebデザインを一気にまるごと学べる!1つのサイトを実際に作りながら学んでいくやさしい作りになっている本です。「これからWebサイトを作り始める初心者」「HTMLとCSSを基本から学びたい人」「美しいデザインのWebサイトを作りたい人」「Webの最新技術を学びたい人」この1冊で必要なことがすべて学べます。

book
created by Rinker
¥2,486 (2022/10/04 17:48:05時点 楽天市場調べ-詳細)

↓さらに、一歩進んだWebサイト制作の知識を学びたい方はこちらもお勧めです。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

▪ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
Web界隈やデザイナーに大人気で、Web関連の情報やデザインについて記事が学べる『Webクリエイターボックス』の管理人、Manaさんによる渾身のHTML&CSSとWebデザインの実践知識が一気に学べる本です。

book
created by Rinker
¥2,728 (2022/10/04 16:49:50時点 楽天市場調べ-詳細)

↓また、さらに初心者から抜け出すために必要な知識を学びたい方ようです。

▪プロの「引き出し」を増やす HTML+CSSコーディングの強化書
HTML・CSSの基本をマスターして初心者を脱して、コーダー/マークアップエンジニアとして制作現場でバリバリ活躍する力をつけたい。そんな方に向けた本です。

プロの「引き出し」を増やす HTML+CSSコーディングの強化書
プロの「引き出し」を増やす HTML+CSSコーディングの強化書
book
created by Rinker
¥3,190 (2022/10/04 22:06:53時点 楽天市場調べ-詳細)

まとめ

CodePenは現在日本語対応されていませんが、触っていくうちに操作を覚えていけると思います。リアルタイムプレビューがあるので練習しつつコーディングスキルアップにとてもよいツールです。

プル

この機会にCodePenを使いスキルアップや上級者のコードを見て意欲向上に繋げてみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA