BLOG
ブログ

           

【初心者向け】コーダー愛用！時短に必須のスニペット３選

良かったらハートを押してね！

こんにちは。WWGコーダーのもぐらです。

未経験で入社してから、あっという間に一年が経ちます。早いものですね。

今回は、そんな私が普段使っているエディターソフト『Visual Studio Code』のスニペットについてご紹介していきたいと思います。

スニペットとは、あらかじめ決めておいたキーとなる短いコードを呼び出すだけで、実務で頻繁に使うコード群を一瞬で呼び出すことのできる便利な機能です。

任意で決めた名前のコードをたった一行書くだけで、100行に渡るコードも一瞬で呼び出せるのでコーディングのスピードも上がるわけですね。

コーダー歴が浅くても使える＆現場で使っている実用的なものなので、「コーディングで時短したい！」とお考えのコーダー仲間さんのお役に立てたらうれしいです！

目次

  1. スニペットの登録方法
  2. コンテンツ幅の指定と中央寄せ
  3. 背景画像
  4. 疑似要素
  5. まとめ

1.スニペットの登録方法

まずは簡単にスニペットの登録の仕方をご説明します。とても簡単です。

『ファイル』→『ユーザー設定』→『ユーザー スニペット』を選択して、登録したいファイルの.json拡張子のファイルを開きます。

今回であればscssファイルをご紹介したいのでscss.jsonファイルを開きます。

開いたファイルにスニペットを登録すれば、いざコーディングする際にはもうスニペットを呼び出すことができるようになっています。とても簡単かと思います。

2.コンテンツ幅の指定と中央寄せ 

"inner002": {
			"prefix": "inner002",
			"body": [
			   "margin-left: auto;",
			   "margin-right: auto;",
			   "width: 90%;",
			   "max-width: 1280px;",

			],
			"description": "1280pxの中央寄せautoです。"
		  },

コンテンツ幅を指定して、それを中央寄せにするコード群です。

コード群がどういったものなのかを説明するdescriptionの部分ですが、自分さえわかれば良いと思って全然正しくない日本語で記述しています。ご容赦ください…。それにしてもひどいですけどね。

上の画像ではinner002となっている、コード群を呼び出すスニペットの名前もわかりやすくシンプルな命名をすることがポイントです。あまりにもシンプルすぎると他のスニペットとごちゃごちゃになるのでそこだけ気を付けたいですね。既にinner001というスニペットが存在していたので上記のスニペット名は002となっているわけです。

この4行のコードですが、これはかなり頻繁に使うのではないでしょうか。

webサイトのコンテンツの横幅の多くが1280pxになっていて、それを中央寄せにするパターンは多いですからね。

応用編として、もし幅が1280pxでもなく中央寄せでもない場合で、コンテンツ幅が1600pxで右寄せの場合でもmax-widthの部分を1600pxに、margin-rightを0に変えれば簡単に書き換えれます。

一から書くよりかは圧倒的に速く、ミスも減らせます。

3.背景画像

二つ目は背景画像のスニペットですね。

		"bgimage01": {
		  "prefix": "bgimg01",
		  "body": [
			"background-image: url(../img);",
			"background-position: center;",
			"background-size: cover;",
			"background-repeat: no-repeat;",
		  ],
		  "description": "背景画像です。"
		},

背景画像を実装する際は大抵この4行を使うのではないでしょうか。

background-imageは当然不可欠だし、background-repeatもno-repeat（繰り返しなし）にすることが大半です。後はデザインによってbackground-sizeの値や、background-positionの値を適宜変えることがあるくらいですね。それでも、上の画像のようなcover,centerで落ち着くケースが多いです。

4.疑似要素

三つ目は疑似要素のスニペットですね。これも汎用性が高いのではないでしょうか。

		  "giji": {
			"prefix": "giji",
			"body": [
				"content: "";",
				"position: absolute;",
				"width: ;",
				"height: ;",
				"top: 0;",
				"left: 0;",
				"inset: 0;",
				"z-index: 0;",
				"background: #000;"
				

			],
			"description": "疑似要素です"
		  },

毎回、content,position,height,width,top,left,z-index,background～って手書きで書くのは大変ですし、ミスも増えそうですからね。

疑似要素もこれらのコードを書けば大抵完結する事が多いのであるととても便利です。

5.まとめ

以上3つとなります。いかがだったでしょうか。

一度スニペットを登録してコードを書くのを省略化してしまえば、本当に楽だしミスも減ります。手書きで全部書いていた頃には戻れません。

スニペットの登録も一見面倒くさそうですが、いざやってみると何も面倒なことはなく、10行以内のコード群であれば数分で終わる事でしょう。

「このコードは今後も使いまわすこと多いかも！」と思ったものは積極的にスニペットに登録していきたいですね。

何か一つでもできることが増えたり、自分の成長が実感できると嬉しいですね。それはこれからもずっとそうだと思います。

これからも驕ることなく貪欲に新しい技術を身に付けていければと思います。

【ホームページ制作】Webコーダーあるあるを漫才で味わう

【自由研究】コードだけでイラストを描く【プログラミング・マークアップ】

コーダーが選ぶアニメーションがすごいサイト3選

【WEB制作】新人コーダーがコーディングする際に気を付けていること

愛知県内から名古屋市を中心にホームページ制作を行っている会社
株式会社 WWG（ダブルダブルジー）
愛知県 名古屋市中村区名駅5-16-17　花車ビル南館5F

TEL： 052-890-7007
※ ホームページ制作や活用サポートのお問い合わせはコチラから

プロフィール写真

もぐら

コーダー

2022年入社。実務未経験ながらも一念発起してWeb業界に飛び込みました。日進月歩の変化の速い業界で日々の勉強が必要不可欠ですが、楽しみながら一人前になるべく頑張っています。

良かったらハートを押してね！
arrow_left
一覧へ戻る
arrow_right
arrow_left
arrow_right
一覧へ戻る

おすすめの記事

  1. 2022.6.28
    【Word Press】single.phpをカテゴリ・ターム毎に分岐
  2. 2024.4.22
    ホームページを作るメリットは？ホームページ制作会社が解説
  3. 2022.9.20
    【WEB制作】新人デザイナーが気づいた「ベテランの仕事は新人と何が違うのか」
  4. 2024.1.12
    詩的なフォントの名前当てクイズ
  5. 2023.8.2
    作成されたホームページと、プライバシーポリシーの改定（2022年4月施行）について
  6. 2023.9.4
    ワイヤーフレームとは？チェックすることで理想のホームページに！
 

人気の記事

  1. 【iPhoneでも設定できる】VPNとは？そのメリット・デメリット
  2. 実はヤバい？aタグと別タブで開く（target=”_blank”）の使い方　
  3. 今さら聞けない！ZOOM（ズーム）の使い方と６つの基本操作

おすすめ記事

  1. 【2023年版】YouTubeの関連動画を非表示にする方法【ショート動画も】
  2. 【話題沸騰中】Misskey(ミスキー)とは？ エンタメ性抜群な分散型SNS！【2023年7月26日更新】
  3. 【最初に読む】Threads(スレッズ)の始め方＆使い方をわかりやすく解説

カテゴリー

アーカイブ

CONTACT

お問い合わせ

ご不明な点やご質問等、
まずはお気軽にお問い合わせください。

CONTACT