BinaryDevelop
  1. ホーム
  2. html

[解決済み] Gmailやoutlookでサポートされているdisplay: gridに代わるものはありますか？

2022-02-11 19:01:29

質問内容

しかし、メールでも使えるようにする必要があると言われました。Webでdisplay: gridに代わるものを探してみたのですが、見つかりませんでした。

そのような代替案は存在するのでしょうか？ また、存在しない場合の提案もお願いします。

参考までに、私が作ったグリッドはこちらです。 

<!DOCTYPE html>
<html>
<head>
<style>

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(30px, auto);
  
  
}
.one {
  grid-column: 1 / 16;
  grid-row: 1 / 9;
  background-color: black;
}
.two {
  grid-column: 16 / 21;
  grid-row: 1 / 9;
  background-color: red;
}
.three {
  grid-column: 1/7;
  grid-row: 9 / 12;
  background-color: green;
}
.four {
  grid-column: 15/21;
  grid-row: 9/12;
  background-color: blue;
}
.five {
  grid-column: 1/11;
  grid-row: 12/17;
  background-color: yellow;
}
.six {
  grid-column: 11/21;
  grid-row: 12/17;
  background-color: purple;
}
.seven {
  grid-column: 7/15;
  grid-row: 9/12;
  background-color: gray;
}


</style>
</head>
<body>

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
  <div class="seven">text</div>
</div>


</body>
</html>

解決方法は？

をサポートしています。 CSS または Head-Style は、Eメールでは45%程度とかなり低い。
を引用しています。CSS対応

そのため、全体としては inline-style を作成することができます。

どちらも CSS-Grid (~59% サポート) と Flexbox (~59% supported) は、メールクライアントから相応の支持を得ています。
を引用しています。CSS-Gridのサポート
を引用しています。フレックスボックスのサポート

を使用することです。 <table> これは、HTMLソリューションであるため、100％確実にサポートされています。表形式データではありませんが、メールテンプレートとしては唯一完全にサポートされている方法なので許容範囲内です
引用：テーブルサポート

メールテンプレートです。

上述したように、テーブルを使用する必要があります。に相当するのは grid-gap の組み合わせになります。 border-collapse: seperate; + border-spacing: value; テーブル自体に直接使用されます。 <table style="border-collapse: seperate; border-spacing: 10px;">

をエミュレートするために grid-template-columns: repeat(20, 1fr); まず、空の <tr> を20倍したものです。 <td width="5%">

を使用することができるようになりました。 colspan -属性のように複数の列をまたぐことができます。 grid-column: spanX

を適用することで、min-heightをエミュレートすることができます。 height -属性と同じです。 min-height テーブルセルは、コンテンツが大きくなるとサイズが変更されるため、テーブルの場合は 30pxに行数をかけただけです。

テキストをテーブルセルの中央ではなく、左上から開始させるためには、適用する必要があります。 text-align:left; vertical-align:top; をひとつひとつ <td> . 

<table width="100%;" style="border-collapse: seperate; border-spacing: 10px;">
  <tr>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
    <td width="5%;"></td>
  </tr>
  <tr height="240px">
    <td colspan="15" style="background-color:black; color:white; text-align:left; vertical-align:top;">one</td>
    <td colspan="5" style="background-color:red; text-align:left; vertical-align:top;">two</td>
  </tr>
  <tr height="90px">
    <td colspan="6" style="background-color:green; text-align:left; vertical-align:top;">three</td>
    <td colspan="8" style="background-color:gray; text-align:left; vertical-align:top;">text</td>
    <td colspan="6" style="background-color:blue; text-align:left; vertical-align:top;">four</td>
  </tr>
  <tr height="150px">
    <td colspan="10" style="background-color:yellow; text-align:left; vertical-align:top;">five</td>
    <td colspan="10" style="background-color:purple; text-align:left; vertical-align:top;">six</td>
  </tr>
</table>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します