#忍者CODEスキルUP動画

Web制作をする上でよく使う便利ツール8選を解説しました！

ブラウザの検証ツールを使った重たい画像の探し出し方です！ページ速度に直接影響する部分なので是非覚えておきましょう！

VSCodeの拡張機能「Remote - SSH」を使いサーバー上にあるファイルを編集,保存する方法を解説します。

PC上でスマホの実機確認をする超優れたアプリケーションの紹介です‼︎

XcodeをインストールしてSimulatorを起動するだけです！

グーグルクロムでのブックマークを使った自動かをJavaScriptを使って実装してみよう！

基礎に終わりは無いので出来るだけ早い段階で制作物を作りましょう！

お使いの端末のダークモードの変更が簡単にわかります。

PCやVSCODEを使用する際の便利なショートカットキー一覧を解説しております！

Basic認証を使っていこう！
・ディレクトリごとに制御が可能だよ！
・.htaccessに.htpasswdのパスを記述しよう
・.htpasswdには、自身が発行したIDとPASSを記述しよう

実務で必要不可欠な画像圧縮のやり方を解説致します！
・tinypng(パンダで覚えてね)
・ImageOptime(ローカルで圧縮できる!?)

ちなみに、tinypngはpng,jpgでの圧縮が可能で、ImageOptimeはpng,jpg,svgも可能です！かなり便利なので使ってみください！

RunJSと言うアプリを使っています！

JavaScriptのfor文if文を応用してFizzBuzzを実装しよう！
【ルール】
1.1~30までの数値をconsole.log表出
2.3の倍数でFizzを表出
3.5の倍数でBuzzを表出
4.3と5の倍数の値が同じ際はFizzBuzzを表出

clipyをインストールしましょう
インストール後画面右上のclipyのアイコンを押下し
●環境構築の【ショートカット】でclipyの出現カットキーを好みのものにしましょう。
【一般】で履歴の項目を好きな数にできます。

●スニペットを編集から【フォルダの追加】→【スニペット追加】でご自身の好きなパスワードなどを記憶させましょう

・The QR Code Extention
・HTMLエラーチェッカー
・GoFullPage
・テキストエンコーディング
・PerfectPixel

-VSコードからローカル環境構築-
VSコードのプラグインでLiveServerをインストールする。
開きたいディレクトリファイルをプロジェクトとしてVSコードで開き画面右下のLiveServerを押下すると自動でブラウザが立ち上がります。
※右下にLiveServerがない場合は、プロジェクトを終了しもう一度立ち上げてください。

-MAMPでローカル環境構築-
MAMPをインストールします。
検索等でMAMP　インストールと調べるとMAMPのインストールページがでます！
インストールしたら、document rootに開きたいディレクトリを設置します。
設置したらMAMPを起動してください。
起動後自動的にブラウザが立ち上がります。
立ち上がりましたら、localhost:8888のみを残してリロードしてください

Web魚拓を検索してアクセス

用途１ 過去のアーカイブを見る

用途２ ご自身の魚拓を取る

ご自身の魚拓を取る場合はアーカイブに残る為、注意も必要です。

1. ローカルサーバーの立ち上げ
(MAMPやXAMPPなど)

2. PCとスマホを同じWi-Fiにつなぐ

3. スマホでお使いのブラウザのURLで
[IPアドレス:8888]

1. ご自身のprojectフォルダの中にoverrideディレクトを格納してください！

2. ブラウザ上部に出てくるGoogleの許可をYesと選択

3. overridesしたいファイルを右クリックしてseve for overrideを選択

4. エディタで自由にできるよ

5. stylesでの反映も影響されるので注意

使用方法
・ブラウザ上で右クリック→「検証」
・Command + alt + i (macの場合)

-Elements-
・文字列を書き換えれる
・class名の追加、削除、書き換えが可能
・imgやファイルを右クリックから「open in new tab」で別タブ表示可能
・force stateでhoverした状態をデフォルト化できる
・CSSプロパティ値の書き換え可能
・擬似要素の追加が可能
・幅や高さなど数値で見ることが可能
・スマホの確認もできる
-Console-
・JavaScriptを実行することができるエリアになります。