KojimaKohei

2児のパパ 経歴：病院事務 →エンジニア 趣味はアニメ鑑賞。最近はMinecraft …

KojimaKohei

2児のパパ 経歴：病院事務 →エンジニア 趣味はアニメ鑑賞。最近はMinecraft https://kei01011.hatenablog.com/

  • Web制作Tips

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

  • 転職

    医療事務からWeb系エンジニアへ転職、その後データアナリストへ転職。 転職関係の記事です。

  • 固定された記事

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

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

KojimaKohei

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

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

      KojimaKohei

      • フルリモート勤務になったので、PC周りを整えてみた

        Webプログラマーから転職し、フルリモートで働いています。 今後は自宅のデスクが仕事場になるわけなので、なるべく快適な環境で仕事したい！そう思ってコツコツと作業環境を構築していきました。 僕の作業環境はこんな感じです。 なんだか、いい感じですよね（自己満足） #買ってよかったもの はこちら↓ FOLCO Majestouch2 赤軸 メカニカルキーボードが欲しいなーと思い、HHKBを購入するか随分悩みましたが、中古品のFILCOを購入。 理由は、独立したカーソ

        KojimaKohei

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

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

          KojimaKohei
        • 固定された記事

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

        KojimaKohei

        マガジン

        • Web制作Tips
          9本
        • 転職
          2本

        記事

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

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

          KojimaKohei

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

          KojimaKohei

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

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

          KojimaKohei

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

          KojimaKohei

          Twitter風入力文字数チェック

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

          KojimaKohei

          Twitter風入力文字数チェック

          KojimaKohei

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

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

          KojimaKohei

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

          KojimaKohei

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

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

          KojimaKohei

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

          KojimaKohei

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

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

          KojimaKohei

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

          KojimaKohei