Web制作Tips

本

Web制作会社を退職したので、マガジンとして過去記事をまとめました。少しでも参考になれば幸いです。

運営しているクリエイター: KojimaKohei

完全未経験からのプログラミング独学方法まとめ【 Web制作】

完全未経験からプログラミング学習3ヶ月で、Web制作会社に転職することができました。この経験を元に、完全未経験からプログラミング（Web制作）を独学した方法についてご紹介します。独学できるかどうかはその人次第。よって、再現性があるか？と聞かれたら「向き不向きがある」と答えます。様々な要因から「独学に向かない人」もいると思っていて、そんな人はプログラミングスクールに通うのが効果的なのでしょう。あくまでも僕が行ってきた経験談を元に解説しますので、参考にして

30歳未経験からWebコーダーになった僕が転職活動で意識したこと

３0歳、実務未経験からWebコーダーとして内定をもらうことに成功しました。 8社応募して4社から内定をいただくことができたのは嬉しい誤算です。僕が転職活動を進めるにあたって、意識したポイントだったり、感じたことをご紹介できればと思います。当記事の内容転職活動で意識したこと実際に面接を受けてみて感じたことざっくりこの２つのテーマで解説をしていきます。特に、他業界から未経験でWebコーダーを目指す方に、少しでも参考になれば嬉しいです。完全未経験からコ

デザインデータからコーディングできる練習素材まとめ【無料あり】

おはようございますさて、本日はコーディング練習素材についてまとめました。 TwitterのTLを見てると、「模写しました！今日の積み上げ！！」みたいなツイートが流れてきます。正直、ただ模写するだけでは正直あまり意味ないかなと思ってますこちらの吉本さんのツイートは本質を突いてるなーと思っていて、既存サイトを模写するのなら、デザインデータを元にコーディングする方が実践的で力がつくはず。 ※コードレビューしてもらえると更に良いそこで、実際にデザインデータからコー

【gulp4】もう迷わないgulpfile.jsの書き方

gulpとは、Node.jsで動作するビルドシステムヘルパーと言って、web制作において時間のかかるタスクを自動化できる便利なツールです。 gulpを使うことで様々な処理を自動で行うことができ、とっても便利なのです。さて、 gulpは前から使っていたのですが、gulpfile.jsの書き方が非推奨となっていたため、一から書き直してみました。 Node.jsの説明やgulpの環境構築についてはこの記事では触れません。環境構築から知りたい方は、ICS MEDIAさん

ページ遷移時にアニメーションをつける

お洒落なサイトでよく実装されているのが、「ページ遷移時のアニメーション」ですね。例えば、企業のアイコンを表示させたり、画面をスライドさせたり、フェードインさせたり、様々なアニメーションをつけてユーザーを飽きさせないようにしてます。（あまりやりすぎてるサイトは離脱率が上がりそうですが）　jQueryのプラグインで有名どころとしてはANIMSITIONですね。今回は、プラグインを使用せず、ページ遷移時のアニメーションを実装してみます。参考にしたサイト、は記事最

スクロールに連動して要素をアニメーションさせるTips

アニメーションといえばスクロール連動ですね。画面をスクロールしていって、特定の要素が画面内に入った時にアニメーションが発生してくれると、いい感じです。一見難しそうに感じますが、少し前に書いたスティキーヘッダーのTipsを参考に進めれば難しいことはありません。スクロール連動してアニメーションさせるアニメーションさせるには、クラスをつけるまずはやりたいことを整理します。・スクロールし、特定の要素が画面内に入った時にクラスをつける・クラス付与をトリガーに、要素

Twitter風入力文字数チェック

今日のjQueryTipsは、Twitter風文字数カウントです。 Twitterをやってる人ならご存知かもしれませんが、文字を入力していくと、右下にドーナツ型のアイコンが出てきて、「あとどれくらい入力できるか」が視覚的にわかるようになってます。この機能が実装された当初は「わかりにくい」と否定的な意見もあったみたいですが、個人的にはお洒落で気に入ってます。 TwitterはReactで実装されてますがjQueryでもこの仕組みは作ることができます。ただ、完璧にコピ

jQueryで実装するフォームバリデーション

HTML5では、type属性を指定すれば自動でバリデーションがかかったり、requiredを指定するだけで入力チェックをかけることが可能です。 HTML5の入力検証機能はとっても簡単に導入できるのですが、下記のようなデメリットのため、使わないことの方が多いです。・ブラウザによってエラーの表示内容が異なる・JSで組んだ方がカスタマイズしやすい date,search,number,range,colorなどはいまだにIEやsafariが対応してなかったりするみたいなの

基本のスティッキーヘッダー４種盛り

おはようございます！先日、買い物から家に帰るとポイントカードが無いことに気づき、慌ててスーパーに戻って店員さんに聞いたり、小一時間捜索したあげく、ズボンのポケットにカードが入ってました。どうも、若年生認知症のこうへいです。(なぜなのか) さて、Webサイトを作っていてよくあるのが「スティッキーヘッダー」「スティッキー（sticky）」をgoogle翻訳してみるとこんな感じ↓ 想像以上にネチョネチョな翻訳でビビりましたが、つまりこういうこと。「スクロールして