0
私はHTML Emailテンプレートデザインでaccordionを使用できるかどうかを知る必要がありました。 私は、HTML Emailテンプレートには多くの制限があることを知っています。私たちが望む場合でも、すべてのCSSトリックを使用することはできません。 電子メールテンプレートに簡単なアコーディオンを追加しようとしましたが、電子メールでテストしたときには機能しません。 このコードは私が 'code pen'で見つけて、acidアカウントで電子メールでテストしようとしましたが、うまくいきません。電子メールテンプレートデザインでAccordionをHTMLとCSSのみで使用することはできます
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: "Open Sans", Arial;
background: #CCC;
}
main {
background: #EEE;
width: 600px;
margin: 20px auto;
padding: 10px 0;
box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
text-align: center;
}
p {
font-size: 13px;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
border-bottom: 1px solid #CCC;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 15px;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: url(http://placekitten.com/g/600/300);
color: #FFF;
}
section {
padding: 0 20px;
}
#toggle:checked ~ #expand {
height: 250px;
}
#toggle:checked ~ label::before {
content: "-";
}
</style>
</head>
<body>
<main>
<h2>CSS Expand/Collapse Section</h2>
<input id="toggle" type="checkbox" checked>
<label for="toggle">Hidden Kitten</label>
<div id="expand">
<section>
<p>mew</p>
</section>
</div>
<section>
<h3>Other content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porta non turpis faucibus lobortis. Curabitur non eros rutrum, gravida felis non, luctus velit. Ut commodo congue velit feugiat lobortis. Etiam nec dolor quis nulla bibendum blandit vitae nec enim. Maecenas id dignissim erat. Aenean ac mi nec ante venenatis interdum quis vel lacus.
</p>
<p>Aliquam ligula est, aliquet et semper vitae, elementum eget dolor. In ut dui id leo tristique iaculis eget a dui. Vestibulum cursus, dolor sit amet lacinia feugiat, turpis odio auctor nisi, quis pretium dui elit at est. Pellentesque lacus risus, vulputate sed gravida eleifend, accumsan ac ante. Donec accumsan, augue eu congue condimentum, erat magna luctus diam, adipiscing bibendum sem sem non elit.</p>
</section>
</main>
</body>
</html>
そこに誰もが自分の電子メールテンプレートでアコーディオンを使用し、それがうまく行われている場合は私を助けてください。ありがとう！
です。電子メールテンプレートでは、擬似クラスは機能しません。残りのコードは電子メールテンプレートで使用すると問題ありません。 –
OSの電子メールアプリでHTMLコンテンツをチェックしましたか？一般的に、アコーディオンはGmailでは動作しません。 –
@SatheeshKumar gmailはメディアクエリをサポートするようになりました。アコーディオンは機能するはずです。実際にGmailをターゲットにする方法があります。ほとんどのデバイスを対象にする方法はありますが、それは単なるテストの問題です。 – Syfer