日々精進

新しく学んだことを書き留めていきます

無料のonline ocrサービスが便利

時として、画像内の文字を文字起こしすることがあります。 そんな時に便利なのがonlineocr

Free Online OCR - convert scanned PDF and images to Word, JPEG to Word

活字の認識に関して言えば、認識率高いし日本語にも対応してるしかなりいい感じです。 Googleドキュメントも文字認識してくれるらしいけど、こっちもいいよ。

webで上下左右中央寄せ

やり方は以下 * 親要素いっぱいに広がるdivを用意する * そのdivの子要素をflexを使って上下左右中央寄せする * 中央寄せされたdivの中にコンテンツを入れる

以下のサンプルはtd内で上下左右中央寄せする場合。

CSS: centering { position: relative; & > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } }

HTML:

コンテンツ

参考: qiita.com

HTMLのtableの列幅を行毎に変える方法

任意の列幅を設定することはできないけど、以下の手順で出来る。

  • 列を一つ余分に使う(2列必要だったら3列)
  • 1行目は2列目を広めにしたいという場合は2列目のtdにcolspan="2"を設定する
  • 2行目は1列目を広めにしたいという場合は1列目のtdにcolspan="2"を設定する

あまり良い方法ではないが。。なんとかこれで乗り切りました。

参考: oshiete.goo.ne.jp

bootstrapのtableクラスのborder colorを変更する

th, tdのborder-topで定義されているので、これを上書きする。 以下のようなclassを定義してtableタグに付ければ良い。

.my-table td {
  border-top: solid 1px <color> !important;
}

全tableのborder colorを変更するには以下のようにする。

.table > thead > tr > th{
    border:1px solid blue;
}
.table > tbody > tr > td{
    border:1px solid blue;
}

参考:

stackoverflow.com

vue.jsとbootstrapを一緒に使った場合、radio buttonのv-onイベントが効かなくなる

原因はdata-toggle="buttons"属性が付いていること。 この問題は以下のIssueで報告されているが、

github.com

以下のIssueで対応されているので最新版のVue.jsでは直っているかも知れない。

github.com

とりあえず、この問題が発生したらdata-toggle="buttons"属性を削除し、クリックされたときにactiveクラスを付ける処理を 自分で実装すれば直る。