CATEGORY

プログラミング

画像が更新されない!画像のキャッシュが残らないようにする方法

WEBサイトの案件をこなしていると、クライアントにサイトを納品し最終チェックをしてもらいます。 その時に、必ず発生すると言っても過言ではない問題が「画像のキャッシュ問題」です。 WEBにあまり詳しくない担当者に当たった時には、キャッシュについての理解が無いために無駄な工数を割いてしまうことも多々あり […]

【Swiper】KVとサムネイル連動が連動するスライダーの実装方法

この記事ではSwiper.jsを採用して、キービジュアルとサムネイルが連動するようなスライダーを実装する方法をご紹介します。 限られたスペースで多くの画像を見せたい場合の解決方法としてめっちゃ汎用性効きます。 ちなみにSwiper.jsはjQueryが不要というのが最高です。 カスタム方法とかやって […]

【無料で学べる!】おすすめオンラインプログラミング学習サービス

プログラミングを学んで手に職を付けて稼ぎたいな…と思っているけれども、自分にプログラミングの適性があるか不安だったり、いきなりスクールに通うのに抵抗があったりする方は意外と多いのではないでしょうか? そんな方には無料で学べるプログラミング学習サービスがオススメです! 私自身2018年1月に、プログラ […]

【クリック率UP】カーソルをホバーすると沈むボタンを実装する

HTMLとCSSだけでカーソルをホバーすると、以下のような沈み込むようなボタンを簡単に実装することができます。 ホバーすると沈みます 私自身、他の所有しているメディアのボタンを沈み込む上記のようなボタンに変えただけで、CTR(クリック率)が約2倍になりました。(というか、以前ボタンデザインした時は自 […]

Media Queries(メディアクエリ)でサイトをレスポンシブにする

「モバイルファースト」をスローガンにスマホ最適化が必須となっているこの時代において、サイトのレスポンシブ対応は避けては通れない道です。 この記事ではMedia Queries(メディアクエリ)を用いてサイトをレスポンシブ対応にする方法をご紹介します。 サイトのレスポンシブ化とは サイトのレスポンシブ […]

【IE/Safari対応】特定の要素を上下左右で中央揃えするCSS

要素をCSSで上下中央にピッタリ揃えたいと思っても、IEやSafariで若干ズレていたりしてモヤモヤ悩むことが多かったので、これを書いておけば大丈夫!というCSSを紹介します。 ▼利用シーン トップページの<h1>メッセージ等を画面の上下中央に寄せる ページローディングのクルクルするやつ […]

【header/footer共通化】htmlをphp includeする方法がおすすめ

この記事では、ヘッダー、フッターを共通化するにあたりおすすめの方法をご紹介します。 この度webの制作案件で100ページ超の案件を受注し、全てのヘッダー、フッターをいちいち更新していては死ぬ未来が見えたので、どのような環境下でも機能するヘッダー、フッターの共通化方法を探し回りました。 方法としては、 […]

【間違えてコミット】gitのコンフリクトを解消しつつマージする方法

gitの同じブランチ上で複数人が同時に作業をしてしまってcommit(コミット)した際に起きるconflict(コンフリクト)。 コンフリクトした際に自分のコードをいちいち避難して、バックアップとって…というのはめちゃくちゃ手間ですよね。そんな手間なくコンフリクトも解消できて、自分のコードを保持しつ […]

【初心者向け】未経験からプログラミングを効率的に学ぶ方法

自分自身がフロントエンドエンジニアになって半年経ちました。 神エンジニアにはまだまだ程遠いですが、フルスクラッチ(0から製作)でサイト1本作るぐらいであれば難なくこなせるようになり、バックエンドも若干回りくどいコードになるものの、モノはかなり作れるようになりました。 そんな中、エンジニアになりたいと […]

【Mac用】npmとNode.jsを削除してnodebrewに切り替える方法

npmやNode.jsのバージョンをアップデートし終わった後に、案件によってはバージョンを下げたりしないといけない局面に遭遇したので、「nodebrew use v0.0.0」の魔法の一行でバージョンを切り替えることができるnodebrewをインストールしてみました。 その際に、既にローカルで入って […]

display: inline-block;を指定した要素同士の隙間を埋める方法

display: inline-block:で指定した要素同士を横並びにすると、要素の間に謎の空白が生まれます。 デザインではこの隙間をピッタリ埋めるように指示されている時にこういうズレが起きると地味に手間がかかります。 どちらかにclassを当てて無理やり、水平方向にmarginをマイナスに当てた […]

Photoshopで書き出した画像の色や彩度が異なる時の設定方法

PC変更後の一発目の案件でPhotoshopで画像をクイック書き出し、アセット書き出しする時に画像の色が大きく変わってしまったので、これはいかんと思い修正する方法を探し回ったのでシェアします。 ぶっちゃけ多少の色の変化は仕方がないだろーとごまかしていてはいつかクライアントにガチギレされるので、チェッ […]

AtomでHTMLコードチェックできるパッケージ2つ紹介するよ

人間は絶対にミスをするものなので、コーディング中にミスは絶対に起きます。 AtomでHTMLのコードのエラーチェックできるパッケージを探したところ、便利なものがいくつかあったので2つご紹介します。 Atomパッケージ linter-tidy まずおすすめするのが、linter-tidyです。lint […]

エンジニア未経験の社会人がエンジニア転身後2ヶ月目で月60万稼いだ話

手に職が欲しいけどプログラミングは難しそう… 文系出身でもエンジニアになれるのかリアルが知りたい 未経験でもエンジニアになれるのか 社会人でも遅くないのか? このような疑問をお持ちの方に、エンジニア未経験の文系からプログラミングを学んでエンジニアになり起業した男の体験談をご紹介します。 未経験から稼 […]

【Mac】Visual Studio Code で日本語化する方法 2020

Atom が重すぎて最近 VSCode デビューしました。 (Atomが重すぎたというよりもパッケージ入れすぎて動作が重くなった + なんかよくわからないエラーが時々起きる…) VS Code 使ってみて惚れたところ! とにかく軽い! Atom と違って急に落ちたり、固まったり、エラーが起きづらい! […]

ど文系営業マンがエンジニアに転身する時に感じた不安とその克服

この記事は何? 新しいことに挑戦する時、ワクワクする気持ちも高まりますが、それと同時に不安になる気持ちが3倍くらい自分を襲ってきます。 私は現在、エンジニアに挑戦してたった2ヶ月程度の新米エンジニアですがフリーランスエンジニアとして生計を立てて生きています。 ※詳しくは文系社会人がエンジニアに転身し […]

再読み込み後も「スプレッドシート読み込みエラー」が消えない時の解決方法

Googleのスプレッドシートを読み込もうと思ったら、「スプレッドシート読み込みエラー」がずっと出続けて閲覧や編集ができなくなりました。 この記事では解決方法をご紹介します。 スプレッドシート読み込みエラー解決方法 ユーザーの状況によって原因が違うので、以下の方法を一通り試すと良いです。 ①オフライ […]