コードブロックに折り返しボタンを実装する
ブログやサイトなどにソースコードを載せる際、行を要素の端で折り返すか、それとも折り返さずに横スクロールありで表示するかで迷ったことはありませんか？ 筆者はどちらかというと折り返さない派なんですが、…
ラベル Web 制作 の投稿を表示しています。 すべての投稿を表示
【jQuery 不要】複数の details 要素のうち1つだけを開く
複数の details 要素を並べたメニューを作ったとき、 details 要素がいくつも開いた状態になるのが気になってしまいました。 その問題を解決しようと「アコーディオンメニュー 1つだけ…
目次に戻るリンクをクリックしたら目次を開く
長い記事を読んでいると、目次に戻りたいなと思うことはありませんか？ そんなときに便利なのが「目次に戻る」リンクです。ページの途中でもこれをポチッと押すだけで目次に戻れるので、ページの全体像を把握しな…
X（Twitter）の埋め込みポスト（ツイート）をダークテーマに自動対応させる
サイトやブログをダークモードに対応させるために、メディア特性の prefers-color-scheme を利用している方は多いのではないでしょうか。 prefers-color-sch…
上付き文字 sup と下付き文字 sub を正しく表示させる
ブログで上付き文字 sup や下付き文字 sub を使うと、場合によって正しく表示されないことがありました。本記事ではその原因と解決方法について述べていきます。
コードブロックに行番号を実装する
ブログやサイトなどでのコードブロック（ソースコード表示）に、highlight.js や Google Code Prettify、Prism などのシンタックスハイライターを用いたり、 pre …
コードブロックにコピーボタンを実装する（Clipboard API 対応版）
ブログやサイトなどでのコードブロック（ソースコード表示）に、 highlight.js や Google Code Prettify 、 Prism などのシンタックスハイライターを用いたり、素…