2021年9月17日金曜日

vscode #06 : Markdown PDF でフォント指定してPDF化

どうも、もりもりです。

今回はたまに出てくるvscodeネタです。 今となっては欠かせない人は多いのではないでしょうか。 社内ではレポートや議事録など、Excelで作成するドキュメントが多いのですが まぁ内容が確認できればOKなのでPDFでもOKにしてもらいました。 なのでMarkdownで書いて拡張機能の「Markdown PDF」を入れてPDF化してます。 がしかし!中国語フォントに。。。

と言うことで、「Markdown PDF」使用時のフォントの指定方法を紹介したいと思います。

拡張機能「Markdown PDF」

拡張機能は下記です。

CSSファイルを作成

cssファイルを作成します。ファイル名を付けて保存。 どこに保存してもいいですがPDF化するmdファイルと同階層に格納しておけば後で設定がラクです。 今回はメイリオを指定してみます。

md.css

body {
    font-family: "Meiryo";
}

code {
    font-family: "Meiryo";
}

設定にCSSファイルの相対パスを追加

vscodeの設定を開き(Windows : Ctrl + , / Mac : command + ,) 「markdown styles」で検索。下記設定に、PDF化したいファイルからの相対パスを入力し、OKをクリックするだけ。

今回の例ですと、.\md.cssとするだけ。

拡張機能自身が持っているスタイルを上書きするような記事もあったりしますが 更新時や何かの拍子に元に戻ってしまうこともあると思うので設定に追加する方がいいでしょう。

また、時と場合によってはフォントを変更したいこともあると思います。 なのでこちらの設定に追加する方法をオススメします。

ちなみに拡張機能が保持しているスタイルは下記にあります。(※Windowsの場合)

C:\Users\xxxx\.vscode\extensions\yzane.markdown-pdf-1.4.4\styles

あとはmdファイル内右クリックでPDF出力メニューを選択してサクッとPDF化するだけです。 それでは皆さま、良い vscode life を。

過去のvscode関連記事はこちらを↓↓↓
以上、もりもりでした。

2021年9月11日土曜日

自宅のWiFi環境改善 ~ メッシュWi-Fi導入

こんにちは、やっまむーです。

我が家では以前より無線LANの環境で悩みがありました。
リビングに置いているNintendoSwitchでダウンロードをしようとすると非常に時間がかかるのです。
他にもテレビでYouTube等の動画コンテンツを見ていると、低画質に切り替わったり、ローディングのために再生が停まることもあります。

原因は親機からの距離と間の障害物です。
以下はIO-DATAの『Wi-Fiミレル』というアプリで自宅の無線LANの強度を調べたものです。

リビング側の数値が良くないです。

親機は玄関横の下足箱の中にあるので、その付近はまだよいですが、テレビを置いているリビングは数値が小さくなっています。
普段使いではそれほど気になりませんが、通信に時間がかかるのは許せないので、WiFi環境を改善することにしました。

機器の選定

リビングでも十分な通信速度を確保するため、あと新しい機器を試してみたい欲求から、今回はメッシュWi-Fiを構築することにしました。

要件としては以下になります。

  • メッシュWi-Fi対応 : 必須
  • 有線ポートを複数(最低2つ) : パソコンとNASを繋ぐため
  • 価格 : 出費が嵩んでいるので

そして該当するものから選んだのはASUSの『ZenWiFi AC (CT8)』を選びました。

My new gear!

大きさは160mm × 75mm × 161.5mm と少し大きく見えますが、シンプルな外見でリビングに置いてもそれほど違和感はありません。

大きさ比較

大きい分、ポートの数は充実しています。

WAN×1 + LAN×3、USBも付いています

設置 & セッティング

下足箱のルーターを交換してセットアップを進めていきます。

セッティングはブラウザ、または専用のアプリから行います。
画面の指示に従ってSSIDや管理者の設定、インターネット接続の設定を済ませていきます。

ざっと設定を終えて回線速度を測ってみましたが、スマートフォンではそれほど速度が変わった感じはありませんでした。
しかし、NintendoSwitchに関してはハッキリと違いでており、これまでと比べて格段に改善しました。

さて、セッティングが完了したので、後は家中のデバイスの設定更新をしていきます。
スマートスピーカー等は繋がらなくなるので設定を全てリセットしていきます。
このあたりは導入時の設定が簡単になった影響すかね・・・。

最後にパソコンから回線速度を測ってみます。

有線LANで繋いでいた時は300Mbps以上は簡単に出ていたのに・・・。
やはり有線LANも引く必要がありそうですね。
次はそのあたりの整備をしてみようと思います。

ではではー。

2021年9月3日金曜日

ローカルにあるmdファイル(マークダウン)を見る時は、Chrome拡張機能の「Markdown Viewer」が便利


 こんにちは。よっしーです。


仕事で設計書などをマークダウンで記載することが多くなってきており、

Typoraを使う機会が増えました。


TyporaはEditerとしては凄く優秀なのですが、

ViewerとしてはEditer機能を備えているがゆえにイマイチなところが多く、

(リンクをワンクリックで開けなかったり、リンクから別ページへ遷移する際に別ウィンドウでしか開けなかったり)

マークダウンの記載内容をレビューする際、

Typoraの画面を見せながらというのはあまり適さないと感じます。


では、何を使うか。


Chrome拡張機能の「Markdown Viewer」がおすすめです。


この拡張機能を適応することで、Chrome上でローカルにある

mdファイル(マークダウン)を表示することが出来ます。


※※※ローカルのmdファイルを表示するために以下の設定が必要となります※※※


Chromeに適応後、Markdown Viewer のメニューを開き、

「ADVANCED OPTIONS」を開きます。


「ALLOW ACCESS TO FILE://URLS」 を選択します。

「ファイルのURLへのアクセスを許可する」を有効にします。


以上で、設定は終わりです。


あとは、ChromeへmdファイルをD&Dすると、

こんな感じでキチンとマークダウン記述を解釈して表示してくれます。


もちろんリンクもワンクリックで飛んでくれるし、

別ウィンドウで開くこともありません。

表示もかなり軽いと思います。


私は、

マークダウンの作成は「Typora」で行い、

マークダウンを見せる際は「Markdown Viewer」を使う。

というスタイルに落ち着きました。


興味があれば「Markdown Viewer」を使ってみて下さい。


ではまた~。

2021年8月27日金曜日

Microsoft Edge テーブルの行単位でテキストボックスを編集不可にできないの??

おはようございます。

こんにちは。

こんばんは。

ドラゴンです。


 

タイトルにもある通り、
Microsoft Edgeではテーブルの行単位でテキストボックスを編集不可にできるのか??

結論からいいますと

できません。

補足として、Internet Explorerでは行単位での設定が可能です。

★Internet Explorerの場合
trタグにdisabled属性を設定することで行単位で編集を不可にできます。

<table border="1">
    <tr disabled="disabled">
        <td>
            <input type="text" />
        </td>
        <td>
            <input type="text" />
        </td>
    </tr>
</table>

下の画像のように2つのテキストボックスとも編集できなくなっていますね。

★Microsoft Edgeの場合
テキストボックスそれぞれに、disabled属性を設定してください。

<table border="1">
    <tr>
        <td>
            <input type="text" disabled="disabled"/>
        </td>
        <td>
            <input type="text" disabled="disabled"/>
        </td>
    </tr>
</table>

最後に

今回はタグの中にdisabled属性を設定しましたが、実際の業務では特定の行だけを編集不可にしたい
といった場面が出てくるかと思います。 その場合は、ループで回して各テキストボックスにdisabled属性を設定してもらえればよいかと思います。

それでは、ドラゴンでした~~~。

2021年8月20日金曜日

Typoraの紹介③ ~数式を編集する~

 

おはようございます。ひっくです。

今回も第1回、第2回に引き続き、MarkdownエディタのTyporaを取り扱います。

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介② ~画像の保存先を変更する~

今回は数式の記載方法を紹介します。

何故数式の記載方法を紹介するのか?


簡単な数式を表示する場合、あまり意識することがなかったのですが、

機械学習の学習内容を個人的にまとめたりする際、数式が出てくることが多く

それなりに複雑な数式を記載するとなると、特殊な記法を使用する必要がありました。

 

(理系出身の方だと、PCでレポートを作成する機会があれば使用されているかもしれませんが、

私は文系出身のため、その辺りの知識がありませんでした。)

 

ここに辿りつくまでそれなりに調べたりした過去があるので、まとめておこうと思った次第です。

 

数式の記法(LaTeX)


さてTyporaでは数式の記法として、設定によりLaTeX(ラテック/ラテフ)を使用することができます。

予め決まった記法に従い編集すると、高校等で学習していた際見たことのある

数式が表示されるようになります。

(つまり慣れるまでは記法を覚える必要があります。ここのハードルが少し高いかもしれません。)

 

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

以下赤枠の設定をチェックONにします。

 

右上の「×」を押下後、Typora自体を再起動してください。

これで設定が反映されます。

 

数式を書いてみる


Typoraでは、LaTeX記法の前後を「$」で挟むことで、数式を表現しています。

例えば、「 」のような数式は、次のように表記して表現します。

記法 表示内容 意味・備考
\leqq 小なりイコール
~
※「 \ 」( \ +半角SP)でも可
半角スペース 空白(半角SP)

 

複雑な数式になると、記載する式が多くなります。

例えば、「 」のような数式は、次のように表記して表現します。

記法 表示内容 意味・備考
\sigma σ シグマ(ギリシャ文字)
\sqrt 平方根(ルート)
\frac{α}{β} 分数({}内に分子、分母を記載)
\displaystyle ブロック表記
(インライン表記と同様の表記[ ]でも
行の高さになるべく収めるか否かという点で
表示内容に差異が出る)
\textstyle インライン表記
以下は上記の例をインライン表記にしたもの
\sum 総和
\sum_{a}^{n=1} 「総和」に、下付き(a)・上付き(n=1)を付与
下付きは{}前に「_」を付与
上付きは{}前に「^」を付与する
\overline{a} 上線({}内の文字上部に線を引く)

 

ギリシャ文字や下付き、上付き文字を駆使しながら、表現しなくてはなりません。

 

上記で挙げた例はほんの一部となるので、他にどのような書き方があるだろうと興味を持った方は

是非「LaTeX」「コマンド」等で検索してみてください。

LaTeXの記法(コマンド一覧)をまとめたWebサイトがいくつかヒットします。

(私も学習結果をまとめる際、これらのサイトを利用しました。)

 

まとめ


数式をTyporaで表現するために必要な設定について、今回は紹介しました。

Typoraで記載した数式は、PDFでのエクスポート、HTMLでのエクスポートでも

Typoraで記載・表示した際と見た目が変わることはありません。

数式を表現する機会が多い方、それをPCで編集したい方にピッタリかと思います。

興味を持った方は是非使ってみてください。

 

今回はこのへんで。ではまた!

2021年8月10日火曜日

jQueryでスクロールを連動

どうも、もりもりです。

今回はjQueryで複数のコンテナにセットしたスクロールバーの動きを連動させる方法を紹介したいと思います。 ASP.NETでデータを一覧表示するにあたって、ヘッダはもちろん固定ですが列も一部を固定にしたいという要望が合ったので まずはHTMLでどうすれば良いかを検証します。

まずはコンテナを4つに区切る

一覧を下記の4つに区切ります。

  • ヘッダ固定
  • ヘッダスクロール
  • データ部固定
  • データ部スクロール

index.html

<div class="list">
    <div class="header">
        <div class="fixedHeader">
        </div>
        <div class="scrollHeader">
        </div>
    </div>
    <div class="dataList">
        <div class="fixedDataList">
        </div>
        <div class="scrollDataList">
        </div>
    </div>
</div>

スクロールをコンテナにセット

ヘッダスクロール部には横スクロール、データ固定部には縦スクロール、データスクロール部には縦横両方スクロールをセットします。

index.css

.scrollHeader {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    overflow-x:scroll;
    overflow-y: hidden;
}
.fixedDataList {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    min-width: 204px;
    max-height: 200px;
}
.scrollDataList {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    max-width: 500px;
    max-height: 200px;
}

スクロールバーを連動

ヘッダのスクロールイベントで、横の位置をデータスクロール部の横の位置にセットします。 同様にデータ固定部とデータスクロール部のスクロールイベントにも連動させたいスクロール位置を合わせます。 これだけです。

index.js

var scrollHeader = $('.scrollHeader');
var fixedDataList = $('.fixedDataList');
var scrollDataList = $('.scrollDataList');

scrollHeader.scroll(function() {
    scrollDataList.scrollLeft(scrollHeader.scrollLeft());
});
fixedDataList.scroll(function() {
    scrollDataList.scrollTop(fixedDataList.scrollTop());
});
scrollDataList.scroll(function() {
    scrollHeader.scrollLeft(scrollDataList.scrollLeft());
    fixedDataList.scrollTop(scrollDataList.scrollTop());
});

スクロールバーを非表示

スクロールバーを非表示にするには下記のスタイルを追加。(Chrome、Edge、Safariで有効)

index.css

.scrollHeader::-webkit-scrollbar {
    display:none;
}
.fixedDataList::-webkit-scrollbar {
    display:none;
}

スクロールを高速化

PCによってはスクロールがもっさりと動くことも。そんな時は1行 will-change: transform; を追加するだけ。

index.css

.scrollHeader {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    overflow-x:scroll;
    will-change: transform;
}
.fixedDataList {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: scroll;
    will-change: transform;
    min-width: 204px;
    max-height: 200px;
}
.scrollDataList {
    display: flex;
    flex-direction: column;
    overflow: scroll;
    will-change: transform;
    max-width: 500px;
    max-height: 200px;
}

OSによってはサイズ調整が必要

Macではスクロールバーはコンテナ内に表示されますが、Windowsでは常に表示されます。 スタイルのscrollDataListmax-widthmax-heightを微調整してください。 だいたい17pxぐらいかな?

OSでそれぞれ対応するのが面倒ということでればいっそのことスクロールバーのスタイルを追加して常時表示するという手もありかと。 下記の全体ソースではスクロールバーのスタイルあり版にしてます。

全体ソース

全体はこんな感じです。

※表示幅の関係でスクロールバー分レイアウトが崩れてしまってます。 「0.5x」でご確認いただければと。

See the Pen InterlockedScroll by Y Mori (@ymdevx3) on CodePen.

さいごに

ここまでできたのでASP.NETのListViewで使いたい場合はLayoutTemplateやItemTemplateに落とし込むだけです。 ASP.NET開発においても最終的にできるHTMLを意識しておけば苦労することはないでしょう。

以上、もりもりでした。

2021年7月30日金曜日

マイナポータルAPIを使って算定基礎届を提出してみた!

2020年11月から健康保険組合向けの電子申請が開始されました。
マイナポータルAPIを利用したソフトを開発し、それを使って算定基礎届を提出しました。

マイナポータルAPI対応ソフトの開発


厚生年金向け手続きの電子申請にはe-Govがありますが、健保組合向けにはそうしたサイトはありません。
電子申請するためには、マイナポータルAPIに対応したソフトを利用する必要があります。

https://www.its-kenpo.or.jp/images/NEWS/information/hoken/shikumi.jpg
(「関東ITソフトウェア健康保険組合」のサイトより)

まずは自社で使用することを目的として、昨秋よりマイナポータルAPIを利用したソフトの開発を開始しました。
昨冬の賞与支払届の提出時期には間に合いませんでしたが、この度ようやく完成にこぎつけました。

開発したソフトを利用して初めての申請!


今回開発したソフトは、CSVファイル(KPFD0006.csv)による届出にのみ対応しています。
算定基礎届データが入ったCSVファイルを指定し、申請したところ、手続きが受理されました。


一週間後、手続き完了のメールが届きました。
アプリでもステータスを確認でき、健保組合からのデータをダウンロードして、無事に手続きが完了しました。


当社では2018年から電子申請に取り組んできました。
厚生年金、雇用保険、労働保険などの手続きはすでにe-Govを利用しており、最後に残った健康保険も電子申請できたことで、電子申請への道はここに完結です!


またいつか、どこかで。

2021年7月25日日曜日

43UD79Tにモニターアームを取り付ける

こんにちは。やっまむーです。

子供部屋を作るためにこれまで使っていたPC部屋を明け渡すことになりました。
移動にあたり、これまで壁付けしていた机を写真のような向きに変更することにしました。

いわゆる社長室みたいな配置

ただ、モニターが巨大なうえ、子供達も行き交う場所になるので標準の足だと少しバランスが悪そうです。
そこでモニターアームを導入することにしました。

デカくて重い

今使っているモニターはLGの43UD79T-Bです。
『大画面は正義!』と40インチ以上の4kモニターで、価格の手頃なものを選びました。
個人的にとても満足しています。
ところが、モニターアームを選ぼうとすると色々やっかいな事がわかりました。

  • モニターの重量が約13kg
  • 40インチ以上に対応した製品が少ない
  • 条件にあっても価格が高い

モニターアームだとエルゴトロンが有名ですが、1万円台のエルゴトロン LXだと30インチクラスで11kgぐらいまでしかサポートしておらず、とても支えて持ち上げることはできません。
かと言って、40インチ以上に対応したエルゴトロン HXだと2万7千円くらいになります。
また、中には13kgまで対応した製品もありますが、重量がギリギリのため傾いてしまったり、ほとんど浮かせることができないといったレビューが見受けられました。
個人的に標準の足より少し高い位置に持ち上げたかったので、これらも候補から外れます。

そんな中見つけたのが、AVLT-DM40-1-JPというモニターアームです。

探していた条件に見事合致、価格も1万3千円と手頃です。
さっそくポチって設置していきます。

AVLT-DM40-1-JPを設置する

こちらが届いた商品です。

怪しい日本語訳が不安を煽ります…

ちなみにこちらはVESA規格で100mm×100mmまでをサポートしています。
しかし、モニター側は200mm×200mmなので変換プレートが必要になります。
今回はLGの43インチモニターで写真付きレビューが載っていたEAYHMのVESA変換プレートを選びました。

物によってはモニター側の加工や、干渉しないようにスペーサーが必要になる場合があります。
こちらはそういった事もなくジャストフィットしました。

周囲に干渉する事なく設置完了

モニターアームのVESAプレートもしっかりと固定します。

VESAプレートの六角ネジはしっかり締める事を推奨、ぐらつきやすいです

次はアーム台座を机に設置していきます。
こちらは特に難しいことは無く、手順に従い組み立てていきます。


続いてモニターをアームに掛けます。

手で持ち上げてアームの強さを確認しながらガススプリングの強さを調整していきます。


浮いた!

最後は各所のネジを調整して完成です。
ケーブルカバーもあるので、配線も美しく仕上げられます。

DPケーブルと電源ケーブルを通してみる

ちなみに、最初組み立てた時にVESAプレートの六角ネジをきちんと締めることを忘れており、浮いた後に左右に少し傾いてしまいました。
この注意点は取扱説明書とは別の紙に記載されており、読み飛ばしていた事が原因です。

写真中央の小さいプレート部、ここが緩んでいると傾きます

傾き以外は特にトラブルも無く、非常に満足のいったモニターアームでした。
40インチ以上で重量のあるモニターを利用している場合は、一度検討してみてはいかがでしょうか。

ではではー。

2021年7月16日金曜日

HUAWEIヘルスケアアプリの「ダイナミック追跡」でトラッキング動画を作ってみる!


 こんにちは。よっしーです。


以前「スマートウォッチで心拍数のデータを取る!」という記事を書きましたが、

ヘルスケアアプリに「ダイナミック追跡」という機能が追加されたので、

今回はそれを紹介したいと思います。


HUAWEIのヘルスケアアプリで「ランニング」や「サイクリング」の記録を取ると、

アプリ上からデータを見ることが出来ます。




1回分のデータを見る時に「ダイナミック追跡」という機能があり、

イイ感じにトラッキング記録を動画にしてくれます。



実際に出力してみた動画が以下です。


途中で撮影した写真なんかも自動的に演出として使用してくれるため、

(撮影した位置とマップがリンクしてるところがステキですね)

ユーザーが動画を作り込む必要がなく、簡単にそれっぽい動画にしてくれます。


また、カスタマイズもいろいろと出来るので、音楽や写真の変更、

コメント表示などもある程度自分で設定することが可能です。



スマホ内でチャチャッっと動画出力してくれるので、

Twitter等、SNSへの投稿にも便利そうです。


今回紹介した機能は、スマートウォッチは不要で、

スマホアプリだけで完結する機能です。


自分で1から動画を作ろうとするとなかなか大変ですので、

こういった機能があるといいですよね。


興味があれば皆さんもぜひ試してみて下さい。良いフィットネスライフを~

ではまた~。

2021年7月9日金曜日

算定基礎届をe-Govで届け出してみた!

社会保険被保険者の標準報酬決定のための「算定基礎届」を提出する時期がやって来ました。
e-Govでこの手続きを行うのは初めてですが、その方法は昨冬提出した賞与支払届とほとんど同じです。



申請書の選択


厚生労働省のサイトに算定基礎届の「電子申請利用マニュアル」があります。
しかし、「第6版(平成27年3月)」と古く、リニューアル前の画面で説明されているので、初めて申請する方にとっては参考にしづらいかもしれません。

e-Govの「手続検索」で「算定基礎届」と入力し、検索します。
検索結果の中から「健康保険・厚生年金保険被保険者報酬月額算定基礎届/70歳以上被用者算定基礎届(CSVファイル添付方式)(2020年12月以降手続き)」の「申請書入力」を選択します。



「識別情報」って何だっけ?


申請書入力画面でCSV形式届書総括票を入力しようとしたところ、さっそく手が止まりました。

「➀識別情報」って何だっけ?

賞与支払届提出時にも入力したはずですが、すっかり忘れているので、この機会にきちんと調べることにします。

e-Govのお知らせに掲載されている


には下記のように書かれています。

 (1)識別情報につきましては、以下の設定をお願いします。
   (事業所の場合)事業所整理記号(6桁)+媒体通番(3桁)
   (社会保険労務士の場合)社会保険労務士コード(4桁)+媒体通番(3桁)

事務所整理記号は年金事務センターから送付される書類にも記載されています。(必ずしも6桁とは限りません)
では、媒体通番とは何でしょうか?

これは、添付するCSVファイル内にあります。
社会保険届書作成プログラムや各種ソフトで出力されるこのCSV(SHFD0006.CSV)の仕様は、「電子媒体届書作成仕様書(CD/DVD仕様書)CSV形式届書作成仕様書(電子申請)」に記載されています。
その「4.1.1 媒体管理レコード(年金事務所提出)」によると、CSVファイル1行目は、

【都道府県コード】,【郡市区符号】,【事業所記号】,【媒体通番】,【作成年月日】,【代表届書コード】

で構成されます。この媒体通番を使用します。
つまり、識別情報には

事業所整理番号(【都道府県コード】【郡市区符号】ー【事業所記号】)ー媒体通番

を指定します。


申請書の提出


申請書入力画面で「 ⑨算定基礎届/70歳以上被用者算定基礎届」にCSVファイル内のデータ件数を、またその他の項目も入力します。そして、添付書類としてCSVファイルを添付し、提出します。


またいつか、どこかで。

2021年7月2日金曜日

rowspanに0を指定してはいけない!?

Welcome file

おはようございます。
こんにちは。
こんばんは。
ドラゴンです。

rowspanに"0"が指定されていると、描画が崩れてしまうことがあったので、
各ブラウザでどのように表示されるのか見ていきたいと思います。

★検証ブラウザ★
 ・Internet Explorer
 ・Google Chrome
 ・Microsoft Edge

目次

  1. 概要
  2. 解決策
  3. 最後に

概要

★確認用のソース★

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1">
        <div>
            <table border="1">
                <tr>
                    <td rowspan="0">テスト1</td>
                    <td rowspan="1">テスト2</td>
                </tr>
                <tr>
                    <td rowspan="1">テスト3</td>
                    <td rowspan="1">テスト4</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

rowspanが0でも問題なく表示されるブラウザ⇒Internet Explorer

rowspanが0だと描画が崩れてしまうブラウザ⇒Google Chrome、Microsoft Edge

★Google Chromeでの表示★

★Microsoft Edgeでの表示★

解決策

Visual Studioで開発していると「検証 (XHTML5): この属性に使用できる値に '0' は含まれていません。」と 警告を出してもらえるので気を付けることができます。

しかし、JavaScriptでrowspanを動的に計算しないといけない場合は警告がでないため、気がつきません。

なので、rowspanが1以下になる場合は、必ず1を設定するようにすれば問題ないかと思います。

最後に

Internet Explorerのサポート終了に伴い、Internet Explorerを使っていたシステムが他のブラウザに 移行していくことがこれからどんどん増えていくでしょう。 Internet Explorer以外のブラウザではどのように動作するのかのノウハウを今後貯めていきたいものですね。

それでは、ドラゴンでした~~~。