【TIPS】CSS のみで開閉するメニューを作る

言語・ライブラリ__CSS 言語・ライブラリ__HTML

モバイル用ページのヘッダーによくあるハンバーガーメニュー。三です。クリックするとメニューが表示するヤツです。この開閉を JavaScript を使わずに、CSS だけで実現したいと思いまして、その TIPS の紹介です。 JavaScript を使った方が簡単かも知れま…

「カスタムデータ属性（data-*）」と「script タグへの JSON 埋め込み」のススメ【JavaScript で扱うデータを HTML に埋める方法2選】

言語・ライブラリ__JavaScript 言語・ライブラリ__HTML

ブラウザに表示されているデータは HTML 上にあり、 JavaScript から取得できるます。これはいいんです。が、ブラウザに表示されないが、JavaScript で扱いたいデータがあった場合は HTML のどこに書くのがよいのでしょう？というのが今回のテーマです。方…

【はてなブログ用】カテゴリーを階層化するブログパーツを作りました【多段階層OK】【脱jQuery】

その他__はてなブログ

2021/03/22 : スクリプトを修正しました。内容は変更履歴をご参照ください。サイドバーのカテゴリー部分を階層化するパーツを作りました。はてなブログ用のカテゴリーパーツは既に何人かの方が実装されていましたが、オリジナルな実装を作成しました。多段…

はてなブログ

カテゴリー階層化

2021-02-23

inliner で JavaScript も CSS も画像も1つのHTMLファイルにできるって、マ？

言語・ライブラリ__npm

「inliner」というツールの紹介です。 HTML が参照している JavaScript、 CSS 、画像などの外部ファイル、それらをまとめて1つの HTML ファイルにしてくれるツールです。このツール、ご存知でしたか？私は全然知らんかったです。ニッチなツールだけれども…

ES6 を IE11 でも動くよう変換したい。そうだ、 Babel を使おう！

環境・ツール__Babel 言語・ライブラリ__JavaScript

IE11 でも動く JavaScript に変換したい！ ES2015(=ES6) 以降の JavaScript を変換して ES5 にダウングレードする方法です。この記事で利用しているのは Babel のバージョン7です。なお、本記事ではあえて Babel 以外のツールは含めないようにしています。 …

npm

JavaScript

babel