2016/05/25CSS3のlinear-gradient(線形グラデーション)を用いて、画像を使わずボックス要素内に罫線を引きます。twitterfacebookhatebugooglepluspocketline古いタイプのサイトで背景画像を使ったノート風の罫線というのが流行ったのですが、あれをCSSだけで作ります。gradientを使った罫線CSS3の線形グラデーション(gradient)機能を使って、ノートやレポート用紙のような罫線を作ります。デモこれはノート風に罫線を付けたスタイルです。段落と段落の間は1行あける設定にしています。ついでに、一般的な書式にしたがって各段落の1文字目を字下げする設定にもしてみました。/>ちなみに、途中で改行すると次の行は文頭から始まります。DIVの高さは可変なので、テキストが長くなると自然に全体が伸びていきます。引くと短い行の時に罫線が途切れてしまうのですが、これは外側のボックスに罫線を引いて、それに併せてテキストを表示しているので端から端まで罫線が入ります。ように点線を使った装飾は出来ません。id="note"><p>なんちゃらなんちゃら</p><p>ほにゃららほにゃらら</p><p>とってんぱらりのぷぅ</p></div>divの内側に<P>タグで段落を設定して下さい。調整すれば対応可能です。字下げを希望する場合は必ず<P>タグをつけて下さい。罫線を引き、background-sizeで繰り返し処理をしています。適用させた例を載せておきます。ノート風の罫線を付けたスタイルです。基本的な模様はDIVの場合と変わりません。基本属性を受け継ぐために、ちょっと変わった感じになります。テキストエリアなので、ウィンドウのサイズが可変です。中をクリックしてアクティブにするとちょっとびっくりするかも。技術部についておち研技術部ではWeb関連技術やサイト運営に関する情報をお知らせしています。お探しの記事がありましたら下の検索窓からどうぞ。姉妹サイトいろいろやってます。Mizuki花鳥風月をこよなく愛する体育会系エンジニア。めざせフルスタック~(白目)。コメントをキャンセルメールアドレスは開示されません。エラーが出たら違うCaptchaコードもお試し下さい。