<div
    v-if="headings.length"
    class="mr-3 block hidden w-full border-l p-4 sm:hidden md:hidden lg:block lg:w-64 xl:block xl:w-80"
>
    <!-- Table of Contentsの見出し -->
    <div class="mt-10 text-xs">Table of Contents</div>
    <div>
        <ul class="removePotch">
            <!-- 各見出しをリストアイテムとして表示 -->
            <li v-for="(item, index) in headings" :key="index">
                <a
                    :href="'#' + item.id"
                    @click.prevent="scrollTo(item.id)"
                    :class="{ [item.tag]: true, highlighted: highlighted === item.id }"
                    ><{{ item.text }}></a
                >
            </li>
        </ul>
    </div>
</div>
                        

Aの説明

このコードは、Vue.jsのコンポーネントで、見出しのリストを表示し、それらの見出しに対応するセクションが表示領域に入るときに見出しをハイライトする機能を持つものです。

このコードは、Vue.jsのコンポーネントで、見出しのリストを表示し、それらの見出しに対応するセクションが表示領域に入るときに見出しをハイライトする機能を持つものです。


<div
    v-if="headings.length"
    class="mr-3 block hidden w-full border-l p-4 sm:hidden md:hidden lg:block lg:w-64 xl:block xl:w-80"
>
    <!-- Table of Contentsの見出し -->
    <div class="mt-10 text-xs">Table of Contents</div>
    <div>
        <ul class="removePotch">
            <!-- 各見出しをリストアイテムとして表示 -->
            <li v-for="(item, index) in headings" :key="index">
                <a
                    :href="'#' + item.id"
                    @click.prevent="scrollTo(item.id)"
                    :class="{ [item.tag]: true, highlighted: highlighted === item.id }"
                    ><{{ item.text }}></a
                >
            </li>
        </ul>
    </div>
</div>
                        

Aの説明

このコードは、Vue.jsのコンポーネントで、見出しのリストを表示し、それらの見出しに対応するセクションが表示領域に入るときに見出しをハイライトする機能を持つものです。

このコードは、Vue.jsのコンポーネントで、見出しのリストを表示し、それらの見出しに対応するセクションが表示領域に入るときに見出しをハイライトする機能を持つものです。

Aの説明

このコードは、Vue.jsのコンポーネントで、見出しのリストを表示し、それらの見出しに対応するセクションが表示領域に入るときに見出しをハイライトする機能を持つものです。

このコードは、Vue.jsのコンポーネントで、見出しのリストを表示し、それらの見出しに対応するセクションが表示領域に入るときに見出しをハイライトする機能を持つものです。


export default {
    props: {
        headings: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            highlighted: '',
            observer: null,
        }
    },
    mounted() {
        this.initObserver()
    },
    updated() {
        this.initObserver()
    },
    beforeDestroy() {
        this.observer.disconnect()
    },
    methods: {
        scrollTo(id) {
            const element = document.getElementById(id)
            if (element) {
                element.scrollIntoView({ behavior: 'smooth' })
            }
        },
        initObserver() {
            const options = {
                root: document.body,
                rootMargin: '0px 0px -80% 0px',
                threshold: Array.from({ length: 101 }, (_, i) => i / 100),
            }

            const observerCallback = (entries) => {
                const entry = entries.find((entry) => entry.isIntersecting)
                if (entry) {
                    const index = this.headings.findIndex((heading) => heading.id === entry.target.id)
                    this.highlighted = this.headings[index].id
                }
            }

            this.observer = new IntersectionObserver(observerCallback, options)
            this.headings.forEach((heading) => {
                const element = document.getElementById(heading.id)
                if (element) {
                    this.observer.observe(element)
                }
            })
        },
    },
}
                        

Bの説明

テキストが入ります。

Area 2

テキストが入ります。



.highlighted {
    color: #4285f4; /* ハイライトされた要素の色を変更 */
    font-weight: bold;
}
.removePotch {
    /*ポチ消す*/
    list-style-type: none !important;
}
.container {
    width: 100%; /* 任意の横幅を指定 */

    aspect-ratio: 16/9;
}

                        

Cの説明

テキストが入ります。

Area 2

テキストが入ります。

Codeの全体像です


<div
    v-if="headings.length"
    class="mr-3 block hidden w-full border-l p-4 sm:hidden md:hidden lg:block lg:w-64 xl:block xl:w-80"
>
    <!-- Table of Contentsの見出し -->
    <div class="mt-10 text-xs">Table of Contents</div>
    <div>
        <ul class="removePotch">
            <!-- 各見出しをリストアイテムとして表示 -->
            <li v-for="(item, index) in headings" :key="index">
                <a
                    :href="'#' + item.id"
                    @click.prevent="scrollTo(item.id)"
                    :class="{ [item.tag]: true, highlighted: highlighted === item.id }"
                    ><{{ item.text }}></a
                >
            </li>
        </ul>
    </div>
</div>




                        
【即レス・ストレスフリー・ITにめっぽう強い】
あなたの税務ニーズに 小松啓公認会計士・税理士事務所が お応えします! エンジニアとクリエイターなど限られた業種に お得な格安プランを用意しています。
創造力を邪魔するペーパーワークを一網打尽! ビジネスの成長をサポートします

税務や会計業務を効率的にサポートします。 記帳代行や確定申告、税務相談などお悩みをすぐに解決し、 お客様の本業に集中できる時間を増やすことが事業目的です。

記帳代行!

お客様は、領収書や請求書を送るだけ。 あとはお任せください。 クリエイティブな時間に 没頭していれば完了!

業界最安値への挑戦!!

業種限定の格安プランを用意しています。 ITエンジニア・クリエイティブ職・ ・運送業・フリーランスの方限定です。 お気軽にお問い合わせください。

経営相談

事業を大きくするためのアドバイスを提案し、 ITを利活用しながら、 事業を成功させるお手伝いをします。

オンラインでのサポート

各種ITツールを利活用します。 チャット・Web会議ツールを利用し、 最高の品質を全国どこへでもお届け

確定申告・税務相談!

E-taxによる電子申告で ペーパーレス! 普段のやり取りも紙を使わず環境にも配慮。 税務調査もお任せください。

節税シミュレーション

税額をシミュレーション。 現在・将来のライフプランから 最適な事業形態をご提案。

報酬・料金プラン

税理士紹介会社経由の お問い合わせは以下の料金に紹介会社への紹介料を上乗せします。 こちらのWebをご覧になったら、 ぜひ直接、ダイレクトにお問い合わせフォームから お気軽にお問い合わせください<(_ _)> ※24時間以内に必ずご連絡します ※税理士ドットコム様経由ですと、紹介手数料は年間報酬総額の72%もかかります^^;

【格安プラン】

【創業年度限定】 業種・売上規模などに限定した、税務格安プラン

業種・規模など限定してご提供!
クラウドサービスの利活用
マルっと記帳代行~電子申告まで
【2023年度限定】ぽっきり
年13.2万円(税込) 年10万円(税込み)!*
¥1.1万円/月(税込)
まずはこちらからスタート
【税務標準プラン】

小規模事業者向けの 税務サポート

業種・規模などによって価格変動あり
クラウドサービス・ITの利活用
マルっと記帳代行~電子申告まで
税務相談・節税対策サポート込み!
【経営支援プラン】

ちまちました節税なんてダサい! 経営改善をトータルサポート

業種・規模などによって価格変動あり
クラウドサービス・ITの利活用
マルっと記帳代行~電子申告まで
税務相談・節税対策サポート込み!
経営戦略・経営管理相談込み!
個別のニーズに応じたプラン
*契約初年度のみのサービス値引きです
うまい、早い、やすい!

格安だといって侮ることなかれ。 会計ソフトの使いにくいところは、 自身でクロム拡張を開発し 記帳データ確認に要する手間をゼロにします

摘要欄にGoogleDriveへのリンクを貼っています。MF会計の標準ではリンクも付きません。 そこでリンクをつけ、かつ、お客様の共有Driveに保存した領収書・レシートをマウスオーバーで簡単に確認できるように クロム拡張を開発しました。また、これを実現するには、多くの工程を要します。 領収書レシートをスキャナーで読み取り、仕訳を作り、共有Driveに保存し、そのリンクを取得して、インポートcsvに記述します。 私共の記帳代行サービスではここまでやります。
お客様の声
“仕事が忙しい中、記帳代行サービスを利用し、業務時間をより有効に使えるようになりました。 3月の税務申告もスムーズに行え、安心して仕事に集中できています。”

ITエンジニア (フリーランス:女性)

“税金についてはよくわからず、税務関連のことはとても煩わしいものでした。 記帳の代行と税務申告をお願いしてからは、安心してクリエイティブの制作に専念できるようになりました。”

クリエイティブ職 (フリーランス:女性)

“配送業者として働いているため、日々の業務に追われていました。 記帳代行サービスを利用してからは、面倒な税務手続きを専門家に任せられるので、仕事に集中できて助かっています。”

配送業者(個人事業主:男性)

よくあるご質問
格安プランについて詳細を教えてください
オンラインでのサポート方法について詳細を教えてください
初めての決算で不安があり、申告期限が近い場合や過ぎた場合の対応、会計ソフトへのデータ入力ができていない場合でもサポートが受けられますか?
決算だけの依頼や顧問契約、税理士の必要性、税務調査対応、地方企業へのサービス提供、面談相談が可能ですか?
料金や支払方法について教えてください
代表紹介!

会計・税務・経営支援と IT・マーケティングの専門家による支援を
ワンストップで提供いたします

税理士・公認会計士 小松啓
小松 啓

税理士・公認会計士

大分県津久見市出身。大分高校卒業、中央大学卒業。
有限責任 あずさ監査法人にて上場企業の監査業務、フロンティア・マネジメント株式会社で経営コンサルティングに従事し、投資ファンドを経て、独立。
情報をわかりやすく伝達するコンテンツの制作・それを用いたサービスを作って多くの人に良い影響を与えられる仕事が生きがいです。

自己紹介はこちら
事務所概要
事務所名称 小松 啓 公認会計士・税理士事務所
所在地 101-0026 東京都千代田区神田佐久間河岸78-3 柴田ビル7階
代表 小松 啓(公認会計士・税理士)
開業 2015年12月に開業
2017年9月に公認会計士登録(登録番号 : 37444)
2022年6月に税理士登録(登録番号 : 148517)
お気軽にお問い合わせください。
お問い合わせ
私たちについて

当税理士事務所は、他の税理士事務所とは毛色が異なります。 私(小松)は、クライアント様の経営・事業(再生)支援に取り組んできました。 事業再生フェーズからサポートするのではなく、創業フェーズや成長フェーズから企業に携わることができる「税理士業」に興味を持ちました。 私は「美容室(の創業)」に特化しています。 その理由は、顧問先様に経営アドバイスが出来るような「税理士」を目指しており、業務効率を高めるために業種に特化する必要があったからです。