VSCodeでimgタグのwidthとheightを自動入力・更新する

画像サイズを自動入力するまでの流れは下記です。
ショートカットで紹介します。
（windowsの場合は、CommondをCtrlに変えてください）

1つの画像サイズを追加・更新する

①追加・更新したい画像のimgタグにカーソルを移動
②「command + shift + p」
③「emmet: イメージ　サイズの更新」を選択

これだけで、widthとheighが追加されます。

複数の画像サイズを追加・更新する

①「img src」をドラッグ
②「Commond + Shift + L」ですべて選択
③「command + shift + p」
④「emmet: イメージ　サイズの更新」を選択

これで複数の画像のwidthとheightを一瞬で追加・更新することができます。

個人・商業問わずイラスト制作を受け付けているので、興味がある方はぜひ♪

「サイハテ」へのリンク

コーディング関係に便利なツール

・OneClickCSS
HTMLを書いて、「Simple CSS」、「Childrens CSS」、「Child CSS」、「LESS / SCSS」、「SASS」をクリックすることでCSSを自動生成してくれるツールです。

「OneClickCSSはこちら」

・RGBA変換ツール
カラーコードを入力することで、RGBAに変換してくれるツールです。
CSSで透過させるときなど、RGBAの変換がめんどくさいので重宝する。

「RGBA変換ツールはこちら」

・様々なファビコンを一括生成
ファビコンを一括生成することができるツールです。
画像を選択することで、簡単に様々なサイズの生成を生成することができます。

「様々なファビコンを一括生成はこちら」

・pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール
レスポンシブのコーディングで、pxを%に変換したいときに便利なツールです。
親要素と子要素のサイズを入れることで、比率計算をしてくれます。

「pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツールはこちら」

・テキスト比較ツール difff《ﾃﾞｭﾌﾌ》
テキストをコピペすることで、文章の差分を表示してくれるツールです。
あまりにもテキストが多いと思い場合があるので、VS Codeが使えないときだけ使ってます。

「テキスト比較ツール difff《ﾃﾞｭﾌﾌ》はこちら」

・Can I use…
CSSでブラウザの対応状況を確認する際に使用します。
プロパティを入力することで、各ブラウザの対応状況を表示してくれます。

「Can I use…はこちら」

デザイン関係に便利なツール

・OGP画像シミュレータ
OGPを作成した際に、どのように表示されるのか確認できるツールです。
サービスによって表示方法が変わるので、どれでもいい感じに見えるようにデザイン調整に使います。

「OGP画像シミュレータはこちら」

ボタンクリックで指定の要素にclass追加・削除する

まず今回使用するHTMLを用意します。

<button class="js-btn">ボタン</button>
<div class="content">コンテンツが入ります。</div>

続いてCSS。
非表示・表示のみの簡単なものにしていますが、必要に応じてアニメーションなどをつけてください。

.content{
  display: none;
}
.content.js-active{
  display: block;
}

今回メインのJavaScript。
「querySelector」で、ボタンと表示する部分を取得して使います。

const content = document.querySelector(".content");
const btn = document.querySelector(".js-btn");
       
btn.addEventListener("click", () => {
  content.classList.toggle("js-active");
});

独学でweb制作！コーディングで収入を得る

スクールで学ぶという選択もありますが、web制作は、独学でも学ぶことができます。
ここでは、独学でweb制作についてのスキルを身につけて収益を得れるようになる方法を紹介します。

web制作に必要な物はなに？

web制作で必要なものはPCです。
PCとインタネット環境さえあればすぐに取り掛かることができます。

PCが必要なのは何となく分かるけど、PCでも一般的にwindows、Macの２つの選択肢があります。
どちらも選べば良いのかわからないという方にはMacをおすすめしています。
これは人によって意見が分かれそうですが、個人的にはMac一択です。

なぜMac？というところですが、web制作においてはブラウザのSafariが使えるから！
昔はwindowsでもSafariが使えたんですが、今では使えなくなりました。
そもそもSafariって何よと思う方もいるかも知れないので説明すると、Safariとはブラウザのことです。
ブラウザは有名なものだとGoogle Chrome、Internet Explorer、Firefox、Edgeなどがあります。
これらのブラウザを通してwebサイトを閲覧します。

このブラウザってみんな違うんですよね…Google Chromeが好きで使っている人、何も考えずwindows標準のEdgeを使っている人…
最近では少なくなってきましたが、このブラウザが違うことでwebサイトの見え方が違う場合があります。
ブラウザで見え方が変わらないようにコードを書く必要がありますが、windowsではSafariでどう見えるかのチェックができません。
これがMacを選ぶ1つ目のメリットだと僕は思います。

２つ目は、WebエンジニアがほぼMacを使っているから。
web制作から初めてwebサービスを作りたくなったり、システムを作ったり、スマホアプリを作ったりとステップアップをした際にみんなが使っているMacだと都合がいいです。
不具合が出た際にMacの人が多いので周りに聞きやすい、ネットで調べても同じ状況になっている人を見つけやすく問題解決がしやすいメリットがあります。

なのでこれからPCを選ぶという方、PCをにこだわりのない方はぜひMacの購入を検討してみてください。
Macのどれがいいのかというとメモリを16GB積んでいるものであれば、最近のスペックであれば問題ないです。

初めに学ぶのはHTML、CSS

コーディングで副業、フリーランスをやっていくには、webサイトをデザイン通りに作れる必要があります。
まずは、動きのないサイトでいいので、デザイン通りにサイトを作れるようになりましょう。
基礎を学ぶには、プロゲートやドットインストールがおすすめです。
はじめは基礎でやっていてもあまり面白くありませんが、全体の把握とこんな感じのタグがあるんだなと思ってもらうぐらいで良いと思います。

基礎を学ぶ際は、どうやって作られているのかが重要で、１つ１つのタグを完全に覚える必要はありません。
よくプロゲートを◯周した！とか全部制覇したとかいっている方がいますが、同じことを何周してもそこだけ覚えても仕方ないです。
僕もはじめはドットインストールで学びましたが、やったのは１つの「webサイトを作ってみよう」みたいなのを一周しただけです。
あとはひたすら調べて、実装、調べて実装を繰り返していたらいつの間にかできるようになっていました。

web制作について勉強できるオススメのYouTubeチャンネルを紹介しているので、是非参考にしてみてください。

JavaScriptを学ぶ

サイトに動きをつけれるようになりましょう。
近年HTMLとCSSだけで作られているサイトはありません。
スクロールするとふわっとコンテンツが出てきたり、ボタンを押すと表示されるなどアニメーション要素は必須になります。

こちらを学ぶ際にもまずは、プロゲートやドットインストールがおすすめです。
web制作ではまだまだjQueryが使われることも多いので、合わせて学習してみてください。

3.WordPressを学ぶ

web制作ではWordPressが使用されていることが非常に多いです。
webサービスを作る場合には、使用されない場合が多いですがコーポレートサイトやLPの案件を取るにはもはや必須と言っても良いかもしれません。

ここでは０から自作のWordPressテーマを作れることを目標にします。

おすすめの書籍はこちら「WordPressオリジナルテーマ制作入門」。
オリジナルのWordPressテーマの作り方を学ぶことができます。

4.CSS設計を学ぶ

上記まででなんとかなりますが、ここからはプラス要素として補足しています。
「CSS設計」という言葉を知っていますか？
webサイトは作って終わりではありません。
作ってから運営して育てていく。作るのはスタート地点で、そこから日々更新やメンテナンスが行われます。
その際に、とりあえず見た目だけできてるサイトで中のコードはぐちゃぐちゃのサイトだと更新がしずらかったり、CSSを新たに書いても何故か反映されないという問題が起きてきます。
その破綻したCSSを作らないためにCSS設計の勉強が必要になります。

・Web制作者のためのCSS設計の教科書
CSSは書けるけど、CSS設計ってなんぞやって方は一回読んでほしい。
「予測しやすい」「保守しやすい」「再利用しやすい」「拡張しやすい」を意識して書く必要があります。
いろいろな方法がありますが、まずはこちらを読んでみるのがおすすめです。

5.Sassを学ぶ

最近生のCSSだけで書いてあるサイトをあまり見かけなくなりました。
現在制作会社で4年ほど働いている中でもみんな使用しているのはSass。
いまのweb制作の現場ではもう必須と言っても良いかもしれません。

・Web制作者のためのSassの教科書
この本では、Sassとは何なのかどうやって使えば良いのか、詳しく説明されています。
生のCSSで書くよりもより便利にCSSを書けるので、ぜひ制作に取り入れてみてください。

6.ポートフォリオ作り

WordPressでポートフォリオを作成します。
WordPressじゃなくてはダメということはないですが、
・上記で上げたオリジナルテーマを作ること
・今後自分がやった案件で公開していいものは、ポートフォリオの実績に加えやすいこと（管理が簡単）
・ブログ機能をつけて自分の学んだスキルなどを発信できる（発信するとSEOも学べたり、どんな事ができる人なのかわかってもらいやすい）
の３点がかなえられると思うからです。

このポートフォリオを作る際に、デザインを全くやったことがない人・やらないと決めている人はどうするかということですが、
・自分でポートドリオぐらいは挑戦してデザインしてみる
・ココナラなどデザインだけ制作を依頼する
とよいでしょう。

僕の場合、初めは自分でデザインして全部自分で実装しました。
（デザイン経験はなし）

案件を取る

一番簡単なのは、知り合いから仕事をもらうことです。
最初はかなり安い金額になることが予想できますが、金額より実績を取るべきです。
友達から仕事をもらう際は金額は安くする代わりに実績公開の許可をもらうようにするのがオススメ。
ただ、無償でwebサイトを作るというのやめたほうが良いです。
お金が発生しないと責任も発生せず、お互いなぁなぁになって結局完成しなかったりする可能性が高くなります。

そんな友達はいない！という方は、ランサーズやクラウドワークス、ココナラなどを通して案件を獲得するのが一番簡単かと思います。
ただ実績がないとなかなか案件を取れないので、ポートフォリオのクオリティが重要になってきます。
基本的にはやりたい案件に応募する形になるので、各サービスに合わせて記事を作成しようと思います。

https://ninjinmilk.com/icon/

デザインからコーディングまでさせていただいております。

https://ninjinmilk.com/icon/

デザインからコーディングまでさせていただいております。

オリジナルアイコンがほしい方はぜひ！！

スプラトゥーン3（スプラ3）を一緒に遊ぶ友だちを探している人は、お気軽にご活用ください。

今流行のプログラミングやハッカーの話が好きな方はのめりこめる内容かと思います。
すでに完結しているので、今から読んでも先が気になる！！とならずに最後まで読むことができます。

王様達のヴァイキンのあらすじ

2013年5月7日、浅草の取り壊し寸前のビデオ屋での“怪物”と“天使”の邂逅が、大航海の始まりだった。天涯孤独の天才ハッカー・是枝一希が、エンジェル投資家・坂井大輔に導かれ、数々のサイバー事件を解決していくうちに、信頼できる仲間を得て、才能を大きく開花させる、その成長の航跡を描く。

wikiより

PCしかできない主人公が自分の得意分野を仕事にし、ときにはできないことに悩み苦しみながらも先に進んでいきます。
今の日本は、なんでも平均的にできないといけない風習がありますが、これからはなにか１つのことに秀でた人が上に行く時代になっていると感じているので、時代に合ったまた未来な話にも感じました。

まとめ

読んでいると少しPCのセキュリティにも詳しくなり、普段のパスワードの設定や管理もしっかりしないとダメだなと思わされます。
IT用語も多数出てきますが、コミックの最後に説明もあるので知らない用語の勉強にもなります。

プログラマやエンジニアを目指している方、今やられている方、またどちらもやっていない方でも楽しめる内容だと思うのでぜひ読んでみてはいかがでしょうか。