忍者CODE

ログイン

#忍者CODEスキルUP動画

このページのスクショはOK!
Tweetする際は
「#忍者CODEスキルUP動画」
を付けて頂けると
忍者CODE側が探しやすいです!
New!
菜箸くらいよく使うBookmark8選

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

続きを見る
3分で分かるページ速度改善!重たい画像を探し出す方法

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

続きを見る
VSCodeを使ってSSH接続

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

続きを見る
シミュレーターを使って精密検証

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

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

続きを見る
JavaScriptで簡易自動化をしてみよう

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

続きを見る
基礎学習ってどのくらいやればいいの?

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

続きを見る
ダークモード時のスタイル変更

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

続きを見る
ショートカットキー一覧

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

続きを見る
Basic認証を使おう

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

続きを見る
画像圧縮は必要不可欠

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

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

続きを見る
JavaScriptで九九を実装

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

続きを見る
JavaScript練習問題[FizzBuzz]

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

続きを見る
clipyとかいう神ツール

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

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

続きを見る
オススメGoogle拡張機能5選

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

続きを見る
ローカル開発環境の作り方

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

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

続きを見る
Web魚拓の使い方

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

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

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

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

続きを見る
ローカル環境をスマホで実機確認

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を実行することができるエリアになります。

続きを見る
コース一覧のアイコン

無料コース一覧

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET