文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > BOXのデザイン > CSSで原稿用紙

CSSで原稿用紙を作成

CSSで原稿用紙のパターンは「linear-gradient」を縦横に組み合わせて繰り返し機能を利用することで簡単に作成することが出来ます。
当ページでは、現行用紙の色や大きさなどを自由に指定しながら実際のデザインを確認することが出来ます。

生成された「html」「css」などのソースコードは、そのままコピー&ペーストで利用することが出来ます。

いろいろ原稿用紙を試してみよう

原稿用紙の大きさ
サイズ
罫線の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
背景色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box">
</div>
生成したCSS
<style type="text/css">
/* --- 原稿用紙背景のBOX定義 -------------------------------- */
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                         /* 原稿用紙模様のCSS */
  border     : 2px solid #b35900;   /* ←枠線が不要な場合は削除 */
  background-color   : #ffffff;
  background-image   : 
      linear-gradient(to right,
                         #ffffff,
                         #ffffff     10%,
                         #b35900     11%,
                         #b35900     12%,
                         transparent 13%,
                         transparent 87%,
                         #b35900     88%,
                         #b35900     89%,
                         #ffffff     90%,
                         #ffffff),
      linear-gradient(to bottom,
                         transparent,
                         transparent 97%,
                         #b35900     98%,
                         #b35900);
  background-position: right 2px top;
  background-size    : 52px 41px;
}
</style>
広告
広告
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン