福野泰介の一日一創

一日一創にサイドナビを追加。画面が大きい最近のスマホ用にメニューは下。文章の始まりが見えないとストレスなので、右下に配置。ひとまず上部のメニューと連動して表示する形にしてみました。

「一日一創 サイドナビ付き」
何か新しいものを作る時、そういえば前、似たようなものを作ったはず！と自分のサイトもよく見ます。次はタグやカテゴリーをもっとうまいことしたいところ。

「Code for FUKUI on GitHub」
Code for FUKUIのリポジトリ、500を超えてました！

「dummy-text tag」src on GitHub
適当に長い文章が入れるための拡張タグ dummy-text。下記のようにHTMLElementを継承して、constructorに書くだけ簡単、ESモジュール対応の環境やHTML内で自由に使えます。 const dummy = "あいうえお。"; export class DummyText extends HTMLElement { constructor(n = 1024 * 10) { super(); const s = dummy.repeat(n / dummy.length); this.textContent = s; } } customElements.define("dummy-text", DummyText);

「side-nav tag demo」src on GitHub 同じく拡張タグで作った menu-icon タグで作った、右下のメニューアイコンを押すと、かわいくアニメーションしながら

サイドナビが表示されます。

実際の一日一創内で書いているコードはこちら。 import { SideNav } from "https://js.sabae.cc/side-nav.js"; const as = document.body.querySelectorAll("#links a"); const menus = []; for (const a of as) { menus.push({ title: a.textContent, url: a.href }); } document.body.appendChild(new SideNav(menus));

モバイルやウェブに関するいろいろを作りたい人向け、jig.jpオンラインインターンの募集、始まりました！

「【オンライン開催】2023jig.jp春インターンシップ　～募集のお知らせ～｜トピックス｜株式会社jig.jp」

「【オンライン開催】jig.jp勉強会＆会社説明会　～募集のお知らせ～｜トピックス｜株式会社jig.jp」
インターン前に勉強しておきたい人は、こちらの勉強会もどうぞ！