web-dev-qa-db-ja.com

ノートブックルックのようなテキスト領域のCSSスタイリング

テキスト行のスタイルを設定して、各行に点線の下線（ノートブックやノートブロックなど）を付けることは可能ですか？

行数は、たとえば10に固定する必要があります。

htmlcsstextarea
40
content01

おそらくあなたが探しているものは次のとおりです。

line

<style type="text/css">
textarea {
 background: url(http://i.stack.imgur.com/ynxjD.png) repeat-y;
 width: 600px;
 height: 300px;
 font: normal 14px verdana;
 line-height: 25px;
 padding: 2px 10px;
 border: solid 1px #ddd;
}

</style>
<textarea>
    Textarea with style example
    Line 1
    Line 2
    Line 3
    Line 4
    Line 5
    Line 6
    Line 7
    Line n
</textarea>

または、最初からそれを行う方法を説明するこの記事を読むことができます。

ノートブックの背景の作成

84
Book Of Zeus

純粋なCSS3

<style>
    html{ height: 100%; }
    body
    {
        background-color: #f5f5f5;
    }
    textarea
    {
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Marck Script',cursive;
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 
        background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%);

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }
</style>

このリンクを見ることができる結果： http://jsfiddle.net/Wolfsblvt/qc9rgm7r/

40
Alan Souza

これらのソリューションは、テキストエリアのオーバーフローをサポートしていません。そのため、スクロールはテキストのみをスクロールし、背景はスクロールしません。スクロールをサポートするには、textarea cssに「background-attachment：local;」を追加する必要があります。

2
Morten Riis

それでもこのトピックに興味がある場合は、fiveraのブログで 紙のテキスト領域の例-cssのみで作成 を確認できます。それについてのクールなことは、その場で例を試すことができるということです。

1
George

スクロールはすべてのソリューションを中断します。これに対する完全なソリューションは、テキストで行をスクロールする必要があります。背景画像をテキストエリアに追加するだけでは、これを達成するのは困難です。

0
Pablo Pazos

その他の回答 を取得し、SCSSにアップグレードして構成可能にしました。穴とルールのサイズと色を簡単に変更できるようになり、それに応じてすべてのサイズが変更されます。

また、テキストエリアの代わりに編集可能なdivを使用する別の例を追加しました。

example

jsfiddle

// rule config
$rule-height: 20px; // <-- primary parameter

   $font-size: min(max($rule-height - 9, 8pt), 13pt);
   $rule-mask-height: $rule-height - 1;
   $rule-padding-top: $rule-height + 2;
   $rule-padding-right: $rule-height;
   $rule-padding-left: $rule-height * 2;

// colors
$hole-fill-color: #f5f5f5;
$hole-shadow: #CCCCCC;
$paper-color: #FFFFFF;
$line-color: #E7EFF8;

残念ながら、StackoverflowはSCSSをサポートしていないため、ここに1つの固定構成のスナップショットを含めました。

@import url("https://fonts.googleapis.com/css?family=Reenie+Beanie");

html { height: 100%; }
body { background-color: #f5f5f5; }

.editable {
  color: #000000;
  border: 1px solid #EEEEEE;
  box-shadow: 1px 1px 0 #DDDDDD;
  display: inline-block;
  vertical-align: top;
  /*font-family: 'Marck Script', cursive;*/
  font-family: 'Reenie Beanie', cursive;
  font-size: 24px;
  line-height: 20px;
  margin: 2% auto;
  padding: 22px 20px 3px 40px;
  resize: none;
  min-height: 200px;
  width: 300px;
  background-color: #FFFFFF;
  background-image: -moz-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  background-image: -webkit-linear-gradient(top, transparent, transparent 19px, #E7EFF8 0), -webkit-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -webkit-radial-gradient(3.9% 46%, circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
  -webkit-background-size: 100% 20px;
  background-size: 100% 20px;
}
<textarea class="editable">Textarea: This is the first line.
See, how the text fits here, also if there is a linebreak at the end? It works nicely.

  Great.
</textarea>

<div class="editable" contenteditable>Editable div: This is the first line.<br>
  See, how the text fits here, also if there is a linebreak at the end?<br>
  It works nicely.<br>
  <br>
  Great.
</div>
0
Benny Bottema