�…L@cÏ -ÆÀX K"Y^ҚTy"È¡a"²*µöz½0uü°êN(x`¶X@ÌèÈ2‰­$uM£þ"Cí6µŸ•ÿÏCýÎ}àz[3V2Ì2;kö�!祄 „P³y”Scª„İa6÷u…YC§bidúddates2023-01-23T23:55:00etitlexwスマホフレンドリーなサイドナビをHTMLElementで作ろう!春のオンラインインターン募集中dtagss#js #ced #jiginterncurlxhttps://fukuno.jig.jp/3834dbodyy 一日一創にサイドナビを追加。画面が大きい最近のスマホ用にメニューは下。文章の始まりが見えないとストレスなので、右下に配置。ひとまず上部のメニューと連動して表示する形にしてみました。


「一日一創 サイドナビ付き」

何か新しいものを作る時、そういえば前、似たようなものを作ったはず!と自分のサイトもよく見ます。次はタグやカテゴリーをもっとうまいことしたいところ。


「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」

インターン前に勉強しておきたい人は、こちらの勉強会もどうぞ! cimgxKhttps://img.sabae.cc/data/20230124/a3514807-4dec-4c8d-8b6d-6e433915441e.jpg