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属性を設定してもらえればよいかと思います。

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

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

 

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

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

 

Typora関連記事

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

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

→第4回 はこちら Typora(Markdownエディタ)の紹介④　～シーケンス図を作成する～

→第5回 はこちら Typora(Markdownエディタ)の紹介⑤　～フロー図を作成する～

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

→第7回 はこちら Typora(Markdownエディタ)の紹介⑥　～クラス図を作成する～

 

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

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

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

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

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

 

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

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

 

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

 

数式の記法(LaTeX)

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

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

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

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

 

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

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

 

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

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

 

数式を書いてみる

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

例えば、「 $0\leqq~p(s)\leqq~1$ 」のような数式は、次のように表記して表現します。

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

 

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

例えば、「 $\sigma＝\sqrt{\frac{\displaystyle\sum_{i=1}^{n}(a_i-\overline{a})^2}{n-1}}$ 」のような数式は、次のように表記して表現します。

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

 

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

 

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

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

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

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

 

まとめ

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

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

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

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

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

 

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

jQueryでスクロールを連動

どうも、もりもりです。

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

目次
■ まずはコンテナを４つに区切る
■ スクロールをコンテナにセット
■ スクロールバーを連動
■ スクロールバーを非表示
■ スクロールを高速化
■ OSによってはサイズ調整が必要
■ 全体ソース
■ さいごに

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

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

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

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では常に表示されます。 スタイルのscrollDataListのmax-widthとmax-heightを微調整してください。 だいたい17pxぐらいかな？

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

全体ソース

全体はこんな感じです。

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

さいごに

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

以上、もりもりでした。