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

CSSで方眼紙パターンを作成

CSSで方眼紙風のパターンは「repeating-linear-gradient」を縦横で組み合わせて利用することで簡単に作成することが出来ます。
当ページでは、方眼紙模様の色や大きさ、間隔などを自由に指定しながら実際のデザインを確認することが出来ます。

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

いろいろドット柄・水玉模様を試してみよう

ドット(水玉)の指定
サイズ
線濃さ
方眼用紙の背景色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
罫線の色
背景色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
使用したhtml
<div class="box">
</div>
生成したCSS
<style type="text/css">
.box {
  margin     : auto;
  max-width  : 500px;
  height     : 200px;
                                            /* ドット(水玉)模様のCSS */
  background-color : #4b8161;
  background-image :
    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 12px,
       rgba(255, 255, 255, 0.20) 13px,  rgba(255, 255, 255, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(255, 255, 255, 0.20) 26px,  rgba(255, 255, 255, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(255, 255, 255, 0.20) 39px,  rgba(255, 255, 255, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(255, 255, 255, 0.20) 52px,  rgba(255, 255, 255, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(255, 255, 255, 0.20) 65px,  rgba(255, 255, 255, 0.20) 65px),
    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 12px,
       rgba(255, 255, 255, 0.20) 13px,  rgba(255, 255, 255, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(255, 255, 255, 0.20) 26px,  rgba(255, 255, 255, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(255, 255, 255, 0.20) 39px,  rgba(255, 255, 255, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(255, 255, 255, 0.20) 52px,  rgba(255, 255, 255, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(255, 255, 255, 0.20) 65px,  rgba(255, 255, 255, 0.20) 65px);
}
</style>
広告
広告
広告

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

広告
ページTOP

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

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