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サイトを作るというのやめたほうが良いです。
お金が発生しないと責任も発生せず、お互いなぁなぁになって結局完成しなかったりする可能性が高くなります。

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

目標を考える

WEB制作といっても、WEBデザインだったり、デザインされたものをコードにする作業だったりが存在します。
デザインが得意だけど、コーディングはちょっと…だったり、デザインはできないけどコーディングだけなら！という方、もしくはどっちもバリバリできる！という方でも副業やフリーランスで稼ぐことができるかと思います。

どちらもまったくわからないという方は興味がある方を考えてみてください。
いやそんなの無理という方は、どちらも少しやってみると自分に向いている方がわかるかもしれせん。

WEBデザイン（webデザイナー）で稼ぐ

1.デザインの基礎を学ぶ

「ノンデザイナーズ・デザインブック」や「デザイン入門教室」の書籍がおすすめです。
どうするにしてもまずは基礎を知らないとどうしようもありません。

2.制作ツールの使い方を学ぶ

最近のWEB制作の現場では、「adobe XD」、「adobe Photoshop」、「Figma」がよく使用されています。
たまに「adobe Illustrator」でデザインを作っている方もいますが、正直やめてほしい…（サイズが曖昧な値になったり、webデザインをわかっていない人が多くコードを書く人には嫌われがちです）
僕も個人で案件を受けるなら正直プラス料金や断りたいところ…

3.とにかく作る

自分で架空のサイトを考えて作ってみましょう。
どんなサイトが思いつかなければ、普段行っているパン屋さんや飲食店など行ったことあるお店で想像してみると考えやすいかもしれません。
ここで、デザインを作る時イメージに合うサイトを探し参考にしてみてください。
まるごとパクるというのはよくありませんが、真似することで新たな学びが多いです。
初めはうまくいかない場合は、まるごとパクっても問題ありません。（※ただパクったものをそのまま納品やインターネット上に公開する行為はやめましょう。）
自分の中での練習として取り組む分にはパクるのは問題ありません。

4.コーディングを学ぶ

webデザインがしたいのにコーディングを学ぶ必要があるのか？？
これはYES!
どんなものでも作れるようになるまで覚える必要がありません。
概念としてどうやって作られているのかを学んでいるとただただデザインが作れる人から１つ抜けられます。
これは、コーディングする人とのやり取りがスムーズになったり、webデザインでやってはいけないことが見えます。

学習方法としては、プロゲートでHTML,CSSをやって見るぐらいで問題ないと思います。

5.ポートフォリオ作り

今まで学んだことを活かし、作品を作ります。
少なくとも3サイト以上のwebデザインを用意するとよいでしょう。
簡単な副業案件をすぐにでも取りたいという場合は、架空のバナーをいくつか作ってみるのが良いと思います。
金額は高くありませんが、バナーを作るという案件は多数あります。

コーディングで稼ぐ

HTML、CSSを学ぶ

コーディングで副業、フリーランスをやっていくには、webサイトをデザイン通りに作れる必要があります。
まずは、動きのないサイトでいいので、デザイン通りにサイトを作れるようになりましょう。
基礎を学ぶには、プロゲートやドットインストールがおすすめです。

ここではどうやって作られているのかが重要で、１つ１つのタグを完全に覚える必要はありません。
よくプロゲートを◯周した！といっている方がいますが、同じことを何周してもそこだけ覚えても仕方ないです。
わからなければググればいいので…（プロの現場でもうまくググれるかのほうが重要です）

JavaScriptを学ぶ

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

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

WordPressを学ぶ

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

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

既存のテーマがたくさんあり、画像やテキストを変えるだけでサイトを作っている人もいますが、激安案件ばかりなので正直やる必要はないかと思います。

案件を取る方法

一番簡単なのは、知り合いから仕事をもらうことです。
友達の好みで仕事をもらうと実績としても公開できると思うので非常に良いです。

そんな友達はいない！という方は、ランサーズやクラウドワークス、ココナラなどを通して案件を獲得するのが一番簡単かと思います。
基本的にはやりたい案件に応募する形になるので、各サービスに合わせて記事を作成しようと思います。

ココナラでweb制作の仕事を受けるにはまずは下記から会員登録をしておきましょう。

今回は「functions.php」でJavaScriptを読み込む方法について紹介します。

WPのJavaScriptの読み込みを管理する

早速JavaScriptを読み込んでいきましょう。

WPのJavaScriptの読み込む基本的な書き方

JavaScriptの基本的な書き方は、下記になります。
パスは、読み込みディレクトリのパスに合わせて変更してください。

functioncustom_print_scripts() {
wp_enqueue_script('common-js', get_template_directory_uri() . '/common/js/common.js', '', '', true );
}
add_action('wp_print_scripts', 'custom_print_scripts');

「wp_enqueue_script」の5番目の引数を指定なしの場合「wp_head()」に出力、「true」の場合は、「wp_footer()」に出力されます｡

JavaScriptファイルを指定ページだけで読み込む

if文で指定ページだけで読み込みも可能です。
ページのスラッグやIDで指定します。

functioncustom_print_scripts() {  //sampleページで読み込む  if(is_page("sample")) {
wp_enqueue_script('sample-js', '/パス/', '', '', true );  }
}
add_action('wp_print_scripts', 'custom_print_scripts');

全ページに必要なもの以外は、ファイルを分けておくことで余計な読み込みを回避できます。

Sass（SCSS）でコーディングを効率化

「@mixin」とは

「@mixin（ミックスイン）」とは、CSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せる機能。
引数（cssの値）が利用できるのも特徴です。

「@mixin」の基本

「@mixin」の基本について解説します。

「@mixin」の設定（記述）

下記のように「@mixin hogehoge」のように設定を行います。
「hogehoge」は自分で自由に決めることができます。

@mixin hogehoge {
width: 100px;
height: 100px;
border-radius: 100%;
}

「@mixin」を利用する（呼び出し）

「@include」＋先ほど決めた名前を記述することで、使いたいところで呼び出すことができます。

.sample {
@include hogehoge;
background: red;
}

出力結果

.sample {
width: 100px;
height: 100px;
border-radius: 100%;
background: red;
}

引数を使用する方法

引数を使用することで、色々なサイズの対応や状況に合わせて使用できるようになるので、使いやすさがアップします！

引数を使用した「@mixin」の設定（記述）

下記だと「$haba」に数値がか入ります。
ここの名前も自分で自由に決めることができます。

@mixin circle($haba) {
width: $haba;
height: $haba;
border-radius: 100%;
}

引数を使用した「@mixin」を利用する（呼び出し）

先程の「$haba」に数値を入れます。

.sample {
@include circle(250px);
background: red;
}

出力結果

.sample {
width: 250px;
height: 250px;
border-radius: 100%;
background: red;
}

おすすめmixinスニペット集

ウィンドウ幅に合わせてフォントサイズを自動変更

vwでフォントサイズ指定。
ウィンドウ幅に合わせて、デザイン通りのフォントサイズにすることができる。

@mixin fontsize($fsize){
$windowW : 750;
font-size: ($fsize / $windowW) * 100 + vw;
}

//呼び出し
@include fontsize(24);

positionで要素をセンター寄せ

引数「$direction」に「xy（上下左右中央）」、「x（左右中央）」、「y（上下中央）」のいずれかを入れることで、容易に中央寄せできます。
親要素に「position:relative;」忘れに注意！

@mixin center($direction) {
position: absolute;
@if $direction==xy {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@else if $direction==x {
left: 50%;
transform: translateX(-50%);
}
@else if $direction==y {
top: 50%;
transform: translateY(-50%);
}
}

//呼び出し
.sample{
@include center(xy);
}

フォントサイズと行間指定

@mixin l_height($pixels , $height) {
font-size: $pixels * 1px;
line-height: $height / $pixels;
}

//呼び出し
.sample {
@include l_height(14 , 26);
}

文字感調整

@mixin l_spacing($spacing) {
letter-spacing: ($spacing / 1000 ) + em;
}

// 呼び出し
.class {
@include l_spacing(100);
}

他にも自分が使いやすいように「@mixin」を追加してみてください。

印刷専用のCSSを書く

では早速書いていきます。
今回使用するのは「@media print」です。

使用方法は簡単で、CSSの中に「@media print」で囲ってCSSを書くだけです。

@media print{
color: #000;
}

こんな感じです。
「@media print」内に書いたコードはwebサイトには反映されません。
webサイト上に表示されないので、印刷用にフォントサイズを10ptで「px → pt」に変えて読みやすいサイズに変更すると印刷しても字がでかすぎたり、小さすぎたりを避けることができると思います。

また、「display:none」を使用すれば印刷時に入らない要素も消すことができます。
webサイトを印刷しても使いたいという需要にマッチし、覚えておくと便利に使えます。

HTMLだけでリッチなカレンダーを表示する

では、早速カレンダーを実装していきましょう。
今回使用するのは、inputの「type=”datetime-local”」。
これをつけるだけで簡単に実装することができます。

「datetime-local」

<input type="datetime-local">

実行結果

こんな感じで、これだけでリッチなカレンダーを表示することができます。
JSなどで実装するのはまぁまぁめんどくさいので、便利な時代ですね(^o^)

では、早速実装してみましょう！

HTMLだけでアコーディオンを実装する方法

今回使用するHTMLタグは「details」。
詳細折りたたみ要素です。

「details」の中に「summary」を追加して使用します。
「summary」の要素をクリックすることで、隠してある要素が表示されます。

<details>
    <summary>詳細を見る</summary>
    詳細です。詳細です。詳細です。詳細です。詳細です。詳細です。
</details>

＜実行結果＞

こんな感じ！
JSを書かず、HTMLだけで簡単にアコーディオンを実装できるのでめちゃくちゃ便利ですね。
ただ実務であんまり見たことないけど…