現役エンジニアが副業・転職に使えるWEB制作のお役立ち情報を発信｜無料面談相談であなたに合った学習プランをご提案｜html/css/JavaScript/PHP/Rubyなど全1044問の問題集を無料提供中⏩ninjacode.work/drill/?ni=t_9…
Joined October 2019
- Tweets 12,417
- Following 743
- Followers 16,678
- Likes 122,307
2,537 Photos and videos
Pinned Tweet
プログラミングを学びたい方へ。
忍者CODEではLINE友達限定で
✅ Web制作問題集1044問
✅ 問題の解説
✅ 有料講座の学習動画を一部公開
・HTML/CSS
・JavaScript
・Python
・SQLなど
学習に役立つコンテンツを無料で公開中です✨
▼こちらからLINE登録できます▼
liff.line.me/2001517587-Bk73…
4
11
567
毎日見ているから気付かないけど、
SNSには
「つい押したくなる」
工夫がたくさんあります。
❤️ いいね
🔔 通知
✨ CTA
👤 フォロー
実はこういう小さな動きにも
ちゃんと役割があります!!
4
380
こういうアニメーションは
目立ちすぎないのに、
「スクロールしてね」
「ここを見てね」
が伝わります🤲
さりげなく
「次に何をしてほしいか」を誘導。
Web制作は
デザインだけじゃなく
誘導も大事だなと思います🪄
3
12
502
Webサイトで見かけると
ちょっとテンションが上がるやつ。
✔ 浮くカード
✔ 光るボタン
✔ グラデーション背景
✔ 点滅テキスト
全部CSSだけで作れます。
仕組みはスレッドで解説👇
7
441
独学で勘違いしやすいこと💭
古い技術 ＝ 使われていない
ではありません。
WordPress案件では
jQueryが今もよく登場します。
実務では
「新しく作る」
より
「既存サイトを直す」
仕事も多いからです。
だから大切なのは
書けることより読めること。
保存推奨です！
3
16
619
CSSアニメーション初心者は
まずこの3つだけ覚えてください。
✔ translate
✔ rotate
✔ scale
実はこの4つも
全部この組み合わせで作れます。
スレッドで
「なぜ動くのか」まで解説します！
保存推奨📌
1
4
27
954
4つとも別々のアニメーションに見えますが
実は仕組みはほぼ同じです。
① transformで見た目を変える
② @ keyframesで動きを決める
③ animationで実行する
まずは
✔ rotate
✔ translate
✔ scale
を理解するだけでも十分。
CSSアニメーションは
「暗記」よりも「仕組みの理解」が大切です📌
2
422
・モーダル
・タブ
・アコーディオン
・スライダー
全部別の技術だと思っていませんか❓
実はやっていることはかなり似ています。
クリック
↓
class追加・削除
↓
CSS反映
↓
見た目が変わる
この考え方を理解すると
UI実装がかなり分かりやすくなります
UIの共通ルールを学ぶイメージです💭
4
28
753
デザインのフォント選び
こんなつもりじゃなかったのに...
3
11
640
「jQueryは古い」これ半分正解。
確かに新規開発では減りました。
でもWordPressや企業サイトの改修では
今も普通に使われています。
実はJavaScriptとjQueryは
「ライバル」ではなく
「本体」と「便利ツール」の関係です。
学習順で迷っている人向けに
違いを1枚で整理しました👇
保存推奨📌
5
26
728
独学で見落としがちなこと。
Web制作の仕事は
「作る」より「直す」が多い。
だからjQueryも消えていません。
実務で求められるのは
書く力より読む力。
意外と知られていない現場のリアルをまとめました👇
6
30
716
GoogleがWeb開発者向けに公開している
「Learn CSS」が無料で読めるの知っていますか❓
アクセシビリティからz-indexまで
CSSの全知識を体系的に学べます。
独学でCSSを勉強しているなら
この1サイトだけ読めば基礎は完璧です。
しかも無料・広告なし・日本語対応‼
⏩web.dev/learn/css
12
592
💻✨→📱🤯
「完成した！」と思った5分後…
PCでは綺麗なのに、
スマホで見ると崩れる。
Web制作学習者あるあるです。
モバイルファーストを意識し始めるきっかけは
だいたいこの経験。
1
14
604
プログラミング学習中に信じてはいけない言葉の1つ。
「jQueryはもう不要」
確かに新規開発では減りました。
でもWeb制作の現場では
WordPressや企業サイトの改修で今もよく使われます。
学習で大切なのは
"最新を知ること"より
"現場を知ること"
この違いを1枚でまとめました👇
保存推奨です📌
2
36
1,024
ハンバーガー
モーダル
タブUI
アコーディオン
スライダー
全部別の技術だと思っていませんか？
実はやっていることはほぼ同じです。
querySelector
↓
addEventListener
↓
状態変更
↓
CSS反映
違うのはactive切替・高さ変更・横移動
などの部分だけ。
UI実装シリーズで学んだ内容をまとめました💻
4
27
891
UI実装で
「クリックしても動かない…」
となったことありませんか❓
実はその原因
JavaScriptそのものではなく
✔ querySelector取得ミス
✔ addEventListener未発火
✔ class名不一致
✔ active用CSS不足
✔ z-index設定ミス
などの基本的な見落としが多いです。
3つ以上当てはまったら要復習⚠️
2
22
807
Swiperを使う理由は
「スライダーが自作できないから」ではありません。
自作しようとすると
・矢印操作
・スマホのスワイプ
・ループ処理
・レスポンシブ対応
など実務で必要な処理がかなり増えます。
Swiperはそれらをまとめてくれるライブラリ。
原理を理解し
コピペから一歩抜け出しましょう💪🆙
9
34
1,065
スライダーUIって
画像を切り替えていると思っていませんか❓
多くの場合横に並べた要素を
translateXで動かしているだけです。
Swiperも原理は同じ
querySelector
↓
addEventListener
↓
translateX変更
↓
CSS反映
これを理解すると
UI実装がかなり分かりやすくなります
保存推奨📌
6
32
1,095
Web制作の学習って
HTML→CSS→JavaScript
と勉強しているうちに
「今どこを学んでいるんだろう？」
となりがちです。
実際の現場では
設計→HTML→CSS→JavaScript
→テスト→公開
という流れで進みます。
今まで学んできた内容が
実務のどこにつながるのかを1枚にまとめました。
保存推奨📌
6
39
1,037
アコーディオンUIって
複雑そうに見えますが
クリック
↓
addEventListener
↓
active切替
↓
CSS反映です。
回答が表示されるのも
JavaScriptが内容を作っているわけではなく
「高さを変えている」だけ。
ハンバーガーメニュー
モーダル
タブUI
アコーディオン
全部同じ流れで動いています💻
3
28
851