![サムネイル.png](https://prod-files-secure.s3.us-west-2.amazonaws.com/eb8d5e58-f3a1-4bc2-a979-0a4cf4cd5364/d5296607-480d-4ffe-be4b-2347a399554f/%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB.png)
<aside>
<img src="/icons/preview_blue.svg" alt="/icons/preview_blue.svg" width="40px" /> りょーの情報発信媒体
X (Twitter)
りょー|コーダー兼ディレクター (@Ryo_web_cording) / X
Portfolio
Ryo's Portfolio
Blog
RyoBlog
Youtube
りょー コーダー
</aside>
<aside>
<img src="https://appdata.chatwork.com/avatar/oMpwPvoO76.png" alt="https://appdata.chatwork.com/avatar/oMpwPvoO76.png" width="40px" /> はじめに
- プレゼントをご覧いただきありがとうございます!そして、日々の私のポストにいいねやリプ、リツイートをして盛り上げてくださり本当に感謝しております🙇♂️
- そんな皆様への感謝の気持ちとして、私がよく使用しているスニペットをまとめて共有させていただきます!
- あくまで一例なので、必要ないものは消したり、普段よく使用するcss設計に合わせてclass名など適宜変更してご活用ください!
- 丸っとそのままコピーして「おぉ〜〜」ではなく、ご自身で「よく使うな〜」と思うものを私と同じような方法でスニペットとして登録し、今後の学習や業務に有効活用していただければと思います!
- また、スニペットの説明や解説動画も所々にあげておりますので、併せて見ていただけますと幸いです!
- 参考になる部分があれば、ご自身のアウトプットなどを添えて X (Twitter) でメンションして発信してくださると嬉しいです😊
- (このようなプレゼント企画やセミナーに参加した際は、「ただ感謝の気持ちを伝える」というよりかは、「何を学んだか」「どんなスキルアップに繋がったか」を添えてツイートした方が X を営業時に見せた時に見栄えが良くなります✨)
</aside>
<aside>
<img src="https://cdn-icons-png.flaticon.com/128/10001/10001590.png" alt="https://cdn-icons-png.flaticon.com/128/10001/10001590.png" width="40px" /> ご利用上の注意点
- このページ自体に編集権限は付与されておりませんので、編集などをする際はご自身のNotionページに複製してからのご利用をお願いします。
- 基本的にはスニペットの使用例動画は音声は入っておりません。(Youtubeにアップされているものは音声ありとなっております!)
</aside>
<aside>
<img src="https://cdn-icons-png.flaticon.com/128/5726/5726532.png" alt="https://cdn-icons-png.flaticon.com/128/5726/5726532.png" width="40px" /> スニペットとは?
- スニペットはよく使うコードをまとめて『型』として「スニペット」に登録しておくことで、短いコードで簡単に呼び出せる機能(「テンプレート」「雛型」みたいなもの)です。
- あらかじめ定義されているスニペットを利用する以外に、自分でスニペットを定義することもできます(ユーザースニペット)。
- ソースコードでも文章でも、普段の作業でよく入力するテキストを登録しておけば作業のスピードアップになるし入力間違いを防ぐこともでき、使い方によって作業効率がかなり上がります。
</aside>
<aside>
<img src="https://cdn-icons-png.flaticon.com/128/5453/5453681.png" alt="https://cdn-icons-png.flaticon.com/128/5453/5453681.png" width="40px" /> 使用方法
- VSCodeにスニペットを初めて登録する方は、スニペットの登録方法 に登録方法をまとめましたのでご参照ください。
- 「とりあえず使ってみたい!」という方は、コード総まとめ から丸っとコピーしてご使用ください。
- 上記以外のページにそれぞれのスニペットの使用方法、使用例、解説動画などをまとめてありますのでぜひご覧ください!
</aside>
<aside>
<img src="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" alt="https://cdn-icons-png.flaticon.com/128/6687/6687986.png" width="40px" /> 各ページへのリンク
【Home】 フォロワー3,000人記念プレゼント
スニペットの登録方法
コード総まとめ
HTML, PHPに関するスニペット
CSSに関するスニペット
JavaScript (jQuery)に関するスニペット
swiper
contact form
cssアニメーション (keyframes)
汎用性の高いheaderの型
YouTube解説動画
</aside>
3,000人記念コンテンツ一覧_DB