この会話はフィクションです

―textareaの上にルーラーつけて欲しいんすけど。
「ブラウザのフォントによって横幅が違うんで無理っす。」

―うるさいやれ。
「じゃあせめてtextareaはMSゴシック固定にしやがれください。」

―それは却下だ。やれ。
「プロポーショナルとか半角とかでずれるじゃん。」

―そこは目をつぶってやるからありがたくおもえ。あとやれ。
「」

参考サイト様

コード

ruler.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>すべてのExcel方眼紙と戦うものたちへ</title>
<style>
* {
  margin:0;
  padding:0;
  font-family: meiryo, "ＭＳ ゴシック";
  font-size: 30px;
  box-sizing: content-box;
}
.ruler {
  font-size: 0;
  padding: 5px;
  width: 100%;
  white-space : nowrap;
  overflow : hidden;
}
.ruler li {
  display: inline-block;
  font-size: 9px;
  text-align: right;
  border-bottom: 1px solid #000;
}
.ruler li:nth-child(odd) {
  color: #aaa;
  border-bottom: 1px solid #aaa;
}
textarea {
  border:none;
  width:100%;
  padding:5px;
}
</style>
</head>
<body>
<ul class="ruler">
  <li class="ruler-scale">5</li>
  <li class="ruler-scale">10</li>
  <li class="ruler-scale">15</li>
  <li class="ruler-scale">20</li>
  <li class="ruler-scale">25</li>
  <li class="ruler-scale">30</li>
  <li class="ruler-scale">35</li>
  <li class="ruler-scale">40</li>
  <li class="ruler-scale">45</li>
  <li class="ruler-scale">50</li>
</ul>
<textarea>あいうえおかきくけこさしすせそ</textarea>
<span id="sample" style="visibility:hidden;position:absolute;white-space:nowrap;"></span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
  function strWidth(str) {
    var e = $("#sample");
    var width = e.text(str).get(0).offsetWidth;
    e.empty();
    return width;
  }
  $(".ruler-scale").each(function(){
    $(this).css({
      "width": strWidth("あ") * 5 + "px"
    });
  });
})
</script>
</body>
</html>

<textarea>にルーラーをつけたい

この会話はフィクションです

参考サイト様

コード