※当サイトにはプロモーションが含まれています。
クライアント 手紙に書かれた文章に見えるようなCSSを作成してくれ。
LP（ランディングページ）やSP（セールスページ）では、お客様の声や制作者からのメッセージを“手紙風”にデザインしたものを目にする機会があります。
にゃテック 下記のようなやつだにゃ。
追伸
猫は言葉を話せません。だからこそ「一口ごとの表情」や「残さず食べてくれる姿」が、私にとって何よりの答えでした。
もし、あなたの大切な家族にも「食べる喜び」をもう一度感じてほしいと願うなら、ぜひ一度「猫満々」を試してみてください。
今回、このような罫線（けいせん）の入った手紙やノート風のCSSを作成してみました。
手紙やノートのように罫線の入ったCSS
罫線入りの手紙風・ノート風デザインを、HTMLとCSSで作成してみました。
HTML
<div class="nya-container">
<div class="nya-letter">
<div class="nya-box__inner">
<p class="nya-p">右上のドッグイヤーで折れた部分は、背景色（#fff）がそのまま見える仕様です。</p>
<p class="nya-p">罫線は repeating-linear-gradient と行間の変数 --nya-pitch を同期させ、768px/400pxで --nya-pitch と --nya-offset を上書きしています。</p>
<p class="nya-p">各ブレークポイントの --nya-offset を ±0.02〜0.10em 程度ずつ動かして、1行目を調整します。</p>
</div>
</div>
</div>
他のCSSとの衝突を避けるために、pタグにもクラスを付与しています。
CSS
.nya-container {
max-width:960px;
margin:48px auto;
padding:16px;
}
/* 手紙ボックス（ここにだけ変数を定義） */
.nya-letter{
/* 色と罫線パラメータ */
--nya-paper:#f0f2f8; /* 紙面 */
--nya-paper-edge:#f0f2f8; /* 紙面の端 */
--nya-rule:rgba(40,50,120,.12); /* 罫線の色 */
/* 罫線（=行間）と太さ、開始オフセット */
--nya-pitch: 2.7em; /* 行間 */
--nya-line-thick: 1px; /* 罫線の太さ */
--nya-offset: 0; /* 罫線の1行目の位置調整 */
position:relative;
padding:56px 30px 30px 32px;
background: linear-gradient(90deg, var(--nya-paper-edge) calc(100% - 24px), transparent calc(100% - 24px));
background-color:var(--nya-paper);
z-index:0;
}
/* 右上の“欠け”（背景#fffを見せる） */
.nya-letter::before{
content:"";
position:absolute;
top:0; right:0;
width:0; height:0;
border-top:24px solid #fff;
border-left:24px solid transparent;
pointer-events:none;
z-index:2;
}
/* 折れた裏面（ドッグイヤー本体） */
.nya-letter::after{
content:"";
position:absolute;
top:0; right:0;
width:0; height:0;
border-right:24px solid transparent;
border-bottom:24px solid var(--nya-paper-edge);
box-shadow:-5px 3px 4px rgba(0,0,0,.10), -3px 5px 5px rgba(0,0,0,.10);
pointer-events:none;
z-index:3;
}
/* 罫線 */
.nya-letter .nya-box__inner{
position:relative;
line-height: var(--nya-pitch);
background-position: 0 var(--nya-offset) !important;
background-image: repeating-linear-gradient(
180deg,
var(--nya-rule) 0 var(--nya-line-thick),
transparent var(--nya-line-thick) var(--nya-pitch)
) !important;
padding-bottom:1px;
}
/* テキスト（pの競合回避） */
.nya-letter .nya-p{ margin:0 0 .1em; padding:0 .15em; line-height:inherit; }
/* ===== 調整用ブレークポイント ===== */
/* 768px 以下（タブレット・小型ノート） */
@media (max-width: 768px){
.nya-letter{
--nya-pitch: 2.6em; /* 行間 */
--nya-offset: 0.10em; /* 1本目の線 */
}
}
/* 400px 以下（小型スマホ） */
@media (max-width: 400px){
.nya-letter{
--nya-pitch: 2.55em; /* 行間 */
--nya-offset: 0.18em; /* 1本目の線 */
}
}罫線と文字は環境によってどうしてもズレが生じやすいため、数値を調整することを前提に作成しています。
基本は以下の箇所で調整します。
/* 色と罫線パラメータ */
--nya-paper:#f0f2f8; /* 紙面 */
--nya-paper-edge:#f0f2f8; /* 紙面の端 */
--nya-rule:rgba(40,50,120,.12); /* 罫線の色 */
/* 罫線（=行間）と太さ、開始オフセット */
--nya-pitch: 2.7em; /* 行間 */
--nya-line-thick: 1px; /* 罫線の太さ */
--nya-offset: 0; /* 罫線の1行目の位置調整 */
また、スマートフォンやタブレットなどのデバイスで表示した際にズレが生じた場合は、次の箇所で調整します。
/* 768px 以下（タブレット・小型ノート） */
@media (max-width: 768px){
.nya-letter{
--nya-pitch: 2.6em; /* 行間 */
--nya-offset: 0.10em; /* 1本目の線 */
}
}
/* 400px 以下（小型スマホ） */
@media (max-width: 400px){
.nya-letter{
--nya-pitch: 2.55em; /* 行間 */
--nya-offset: 0.18em; /* 1本目の線 */
}
}もし、これだけでは調整できない場合は、フォントサイズなども追加してみてください。
