CATEGORY

Tips

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

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

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

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

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

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

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

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

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

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

【クリック率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(コンフリクト)。 コンフリクトした際に自分のコードをいちいち避難して、バックアップとって…というのはめちゃくちゃ手間ですよね。そんな手間なくコンフリクトも解消できて、自分のコードを保持しつ […]

【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で画像をクイック書き出し、アセット書き出しする時に画像の色が大きく変わってしまったので、これはいかんと思い修正する方法を探し回ったのでシェアします。 ぶっちゃけ多少の色の変化は仕方がないだろーとごまかしていてはいつかクライアントにガチギレされるので、チェッ […]