クエリに対する決定的な答えを見つけることができないようです。特に、これはすべて私にとって新しいフィールドであるため、少し難しいと感じていますが、ほとんどそこにいます:)
私は基本的に、メールの上部にあるソーシャル アイコンにパディング スタイルを追加しようとしています。これにより、ブラウザのサイズが変更されたときに (基本的にスマートフォンで見た場合)、各アイコン間に十分なスペースができます。
画面がフルサイズの場合、配置される列が大まかに定義されるため、等間隔になります。チートして 1 つの画像を使用する必要がなく、画面がブレークポイントを過ぎて減少するにつれて間隔が有効になるのは素晴らしいことです。
コードは以下のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- If you delete this tag, the sky will fall on your head -->
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ZURBemails</title>
<link href="stylesheets/email2.css" rel="stylesheet" type="text/css" />
<style>
@charset "UTF-8";
/* CSS Document */
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin:0;
padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
img {
max-width: 100%;
}
.collapse {
margin:0;
padding:0;
}
body {
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn {
text-decoration:none;
color: #FFF;
background-color: #666;
padding:10px 16px;
font-weight:bold;
margin-right:10px;
text-align:center;
cursor:pointer;
display: inline-block;
}
p.callout {
padding:15px;
background-color:#ECF8FF;
margin-bottom: 15px;
}
.callout a {
font-weight:bold;
color: #2BA6CB;
}
p.subtext {
padding:0 15px;
margin-bottom: 15px;
}
.subtext a {
font-weight:bold;
color: #2BA6CB;
}
table.social {
/* padding:15px; */
background-color: #ebebeb;
}
.social .soc-btn {
padding: 3px 7px;
font-size:12px;
margin-bottom:10px;
text-decoration:none;
color: #FFF;font-weight:bold;
display:block;
text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.body-wrap tr .container .content .nav {
text-align: center;
color:#696969;
margin-top:-10px;
margin-bottom:5px;
line-height:1.5;
}
.body-wrap tr .container .content .nav a {
text-decoration:none;
color:#696969;
}
.sidebar .soc-btn {
display:block;
width:100%;
}
p.topNote { border-top: 4px solid #1b3281; margin-top:-2px;}
/* -------------------------------------
HEADER
------------------------------------- */
table.head-wrap { width: 100%;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
font-size:10px;
font-weight: bold;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:bold; font-size: 27px; color:#1b3180;}
h2 { font-weight:bold; font-size: 22px; color:#1b3180;}
h3 { font-weight:900; font-size: 22px; color:#0166b1;}
h4 { font-weight:500; font-size: 20px; color:#0166b1;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul {
margin-bottom: 10px;
font-weight: normal;
font-size:14px;
line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li {
margin-left:5px;
list-style-position: inside;
}
/* -------------------------------------
SIDEBAR
------------------------------------- */
ul.sidebar {
background:#ebebeb;
display:block;
list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a {
text-decoration:none;
color: #666;
padding:10px 16px;
/* font-weight:bold; */
margin-right:10px;
/* text-align:center; */
cursor:pointer;
border-bottom: 1px solid #777777;
border-top: 1px solid #FFFFFF;
display:block;
margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* ---------------------------------------------------
RESPONSIVENESS
Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display:block!important;
max-width:640px!important;
margin:0 auto!important; /* makes it centered */
clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
padding:15px;
max-width:600px;
margin:0 auto;
display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column {
width: 300px;
float:left;
}
.column tr td { padding: 15px; }
.column-wrap {
padding:0!important;
margin:0 auto;
max-width:600px!important;
}
.column table { width:100%;}
.social .column {
width: 280px;
min-width: 279px;
float:left;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
.double .column {
width: 280px;
min-width: 279px;
float:left;
}
.socialicons { padding-left:3px; }
/* -------------------------------------------
PHONE
For clients that support media queries.
Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) {
a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;}
div[class="column"] { width: auto!important; float:none!important;}
table.social div[class="column"] {
width:auto!important;
}
/* flex the hero image */
.container img { width:100% !important; }
}
</style>
</head>
<body bgcolor="#ececec">
<!-- HEADER -->
<table class="head-wrap" bgcolor="#ffffff" width="100%">
<tr>
<td></td>
<td class="header container">
<div class="content">
<table bgcolor="#ffffff">
<tr>
<td height="42" style=" padding-right:10px;">
<img src="http://placehold.it/500x26"></td>
<td rowspan="4" align="right"><img src="http://www.google.co.uk/emails/Template2013/images/atol.jpg"/></td>
</tr>
<tr>
<td style="color: #CCCCCC;"><img src="http://placehold.it/265x20"></td>
</tr>
<tr>
<td style="color: #CCCCCC;"> </td>
</tr>
<tr>
<td style="color: #CCCCCC;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="31%"> </td>
<td width="30%"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="right">
<tr>
<td style="color: #CCCCCC;"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="socialicons">
<tr>
<td width="51%"> </td>
<td width="13%"> </td>
<td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/FB.png" alt="Facebook icon" width="24" height="23" border="0" class="socialicons"/></td>
<td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/twit.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="7%"><img src="http://www.google.co.uk/emails/Template2013/images/youtube.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="8%"><img src="http://www.google.co.uk/emails/Template2013/images/flickr.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
<td width="6%"><img src="http://www.google.co.uk/emails/Template2013/images/gplus.png" border="0" width="24" height="23" alt="Facebook icon" /></td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /HEADER -->
<!-- BODY -->
<table class="body-wrap">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<div class="content">
<table class="nav" width="100%">
<tr>
<td class="container" bgcolor="#FFFFFF">
<a href="http://www.google.co.uk/ski-resorts/austria-ski-holidays/?em=cs080213" target="_blank">Austria</a> |
<a href="http://www.google.co.uk/ski-resorts/france-ski-holidays/?em=cs080213" target="_blank" >France</a> |
<a href="http://www.google.co.uk/ski-resorts/italy-ski-holidays/?em=cs080213" target="_blank" > Italy</a> |
<a href="http://www.google.co.uk/ski-resorts/switzerland-ski-holidays/?em=cs080213" target="_blank" >Switzerland</a> |
<a href="http://www.google.co.uk/ski-resorts/canada-ski-holidays/?em=cs080213" target="_blank" > Canada</a> |
<a href="http://www.google.co.uk/ski-resorts/usa-ski-holidays/?em=cs080213" target="_blank" > USA</a> |
<a href="http://www.google.co.uk/ski-resorts/ski-holidays/?em=cs080213" target="_blank"> All Ski destinations</a></td>
</tr>
</table>
<table>
<tr>
<td>
<!-- A Real Hero (and a real human being) -->
<p><img src="http://www.google.co.uk/emails/Template2013/images/hero_image_template.jpg" />
</p><!-- /hero -->
<p class="topNote"></p>
<!-- Callout Panel -->
<h1>Welcome Mr Smith,</h1>
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.
</p>
<br />
<h3>Subheader 1</h3>
<p class="subtext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<table class="double" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="center" class="column">
<tr>
<td>
<p><img src="http://placehold.it/280x150" /></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column" bgcolor="">
<!--<tr bgcolor="#1b3281">
<td>
<p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
</td>
</tr>-->
<tr>
<td>
<h4>Delta Whistler Village</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
</tr>
</table> <!-- /column 2 -->
</td>
</tr>
</table> <br />
<table class="double" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="center" class="column">
<tr>
<td>
<p><img src="http://placehold.it/280x150" /></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column" bgcolor="">
<!--<tr bgcolor="#1b3281">
<td>
<p style="color:#FFFFFF; font-weight:bold;">Delta Whistler Village, CANADA</p>
</td>
</tr>-->
<tr>
<td>
<h4>Delta Whistler Village</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis autem vel eum iriure dolor in hendrerit in </p></td>
</tr>
</table> <!-- /column 2 -->
</td>
</tr>
</table>
<!-- A Real Hero (and a real human being) -->
<p> </p><!-- /hero -->
<!-- Callout Panel -->
<p class="callout">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt. <a href="#">Do it Now! »</a>
</p><!-- /Callout Panel -->
<h3>Title Ipsum <small>This is a note.</small></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a class="btn">Click Me!</a>
<br/>
<br/>
<!-- social & contact -->
<table class="social" width="100%">
<tr>
<td>
<!--- column 1 -->
<table align="left" class="column">
<tr>
<td>
<h5 class="">Connect with Us:</h5>
<p class=""><a href="#" class="soc-btn fb">Facebook</a> <a href="#" class="soc-btn tw">Twitter</a> <a href="#" class="soc-btn gp">Google+</a></p>
</td>
</tr>
</table><!-- /column 1 -->
<!--- column 2 -->
<table align="left" class="column">
<tr>
<td>
<h5 class="">Contact Info:</h5>
<p>Phone: <strong>408.341.0600</strong><br/>
Email: <strong><a href="emailto:hseldon@trantor.com">hseldon@trantor.com</a></strong></p>
</td>
</tr>
</table><!-- /column 2 -->
<span class="clear"></span>
</td>
</tr>
</table><!-- /social & contact -->
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table><!-- /BODY -->
<!-- FOOTER -->
<table class="footer-wrap">
<tr>
<td></td>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p>
<a href="#">Terms</a> |
<a href="#">Privacy</a> |
<a href="#"><unsubscribe>Unsubscribe</unsubscribe></a>
</p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
<td></td>
</tr>
</table><!-- /FOOTER -->
</body>
</html>
私もさまざまな提案を受け入れます。
ありがとうございました。