初心者です。
https://pictsquare.net/
こちらのサイトでイベントページを作成中です。
linear-gradient、background-sizeを使ってノート風にしたいのですが、文字と線がずれて表示されます。
ブラウザでHTMLを直接開いたときは問題なく表示されるのですが、このサイトに反映させるとダメでした。
コピペでコードをお借りしているのですが複数試してみてもどれもだめでした。
どうすればずれずに表示できるでしょうか?
(該当サイトはインラインCSSしか使用できません)
該当のソースコード
.note1{ background-color: #ffffff; color: #000000; margin: 1em 0; border: solid 2px #027941; padding: 0.3em 1em 2em 1em; box-shadow:2px 2px 0 rgba(0,0,0,.1); border-radius: 5px; } .sen1{ background-color: #ffffff; background-image: linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #c2dbd1 100%); background-size: 100% 2em; line-height: 2em; padding: 2em 1em 0.2em 1em; }
こちらをインラインCSSに変換して
<div class="note1" style="background-color: #fff;color: #000;margin: 1em 0;border: solid 2px #027941;padding: 0.3em 1em 2em 1em;box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);border-radius: 5px"> <div class="sen1" style="background-color: #fff;background-image: linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #c2dbd1 100%);background-size: 100% 2em;line-height: 2em;padding: 2em 1em 0.2em 1em"> これは例文です<br> これは例文です<br> これは例文です<br> これは例文です<br> これは例文です<br> これは例文です </div>
こちらを使用しています。
試したこと
同じように構築されているもう少し単純な別のコードをお借りしても変わりませんでした。
行間関連をpxで固定すればずれずに表示できたのですが、よくない方法だと思うのでどうにかしてうまく表示させたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。