コーディング– category –

最近案件でEJSを使用してるのだがこれが超便利だ。特に静的コーディングをやる際には手放せないくらいに効率が上がる。 今日は久しぶりの投稿ということでライトに、EJSの便利さについて語りたい。 【EJSを使うとコーディングが5倍楽になる。】 EJSとは静...

目次を自動スクロールってどうやれば良いんだろう。 前回実装したハイライト機能の実装。一つ問題がそれは本文をスクロールして行った時、目次が見切れてしまうとハイライトが見えなくなってしまうこと。 See the Pen ハイライト機能 by YT (@YT-the-scrip...

スクロール位置に合わせて、目次がハイライトされる実装をしたい。 zennの目次のように、スクロール位置に合わせてサイドバーの目次のハイライト位置が変わる実装。https://zenn.dev/nondescript/articles/72aabaaeda4e39前回の記事では、本文から目次を動...

桜吹雪が散るローディング画面を作りたい。 See the Pen 5-6 桜が散る by YT (@YT-the-scripter) on CodePen. ↑こんな感じのローディングアニメーションを作りました。(右下の「Rerun」を押すと、リロードされます。) 実際に実装したサイトをご覧ください...

タブを切り替えて、表示させるコンテンツを変えたい こんな感じのタブをクリックするとそれに応じた、文章とか画像が表示されるやつ。 今回はタブアニメーションの実装方法をご紹介します。 【コード】 こちらが実際のコードと挙動です。 タブをクリックす...

お問い合わせとかでよく使う、プラスアイコンとマイナスアイコンってどうやって作るんだろう？ 質問項目の右端で、クリックするとプラスアイコンとマイナスアイコンが切り替わるサイトってよくあります。 今回は、プラスとマイナスをどうやってcssで表現す...

余白調整といえば、paddingとmarginですが、「gap」を使えば楽に調整できます。 ※ただし、display: flex;、もしくは、display: grid;を使っている場合のみ有効なcssです。 実際に使ってみます。 【gapを使った余白調整】 gapを使うとcssを1行加えるだけで...

swiperのページネーションの色と形ってどうやってかえるの？ ページネーションの大きさを変えたり、色を変えたり、はたまた画像に差し替えたり。 swiperのページネーションをカスタマイズする方法を紹介します。 【ページネーションの付け方】 まずはシン...

タイトルにletter-spacingをつけたけど、カンプと比べて若干ずれてしまうのはなんでだろう？？ 下記のようなイメージです。 これ実はletter-spacingをつけていることが原因です。 【letter-spacingは後ろにスペースがつく】 letter-spacingは文字の後ろに...

カード型レイアウトを並べた時に、他の要素に合わせて高さを自動調整できないかな？ See the Pen Untitled by YT (@YT-the-scripter) on CodePen. ボタンがガタガタ..... こんな感じのカード型レイアウトで、ボタンの高さを下揃えにしたい時ってありますよ...