TBSホールディングス
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
sample2025
サンプル2025
h2見出しテキスト
横幅フル：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
h3見出しテキスト
横幅フル：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
h4見出しテキスト
横幅フル：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
h5見出しテキスト
横幅フル：テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<h2 class="title">h2見出しテキスト</h2>
<h3 class="title">h3見出しテキスト</h3>
<h4 class="title">h4見出しテキスト</h4>
<h5 class="title">h5見出しテキスト</h5>テーブル
表組み
- dlタイトル
- ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
- dlタイトル
- ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
- dlタイトル
- ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
- dlタイトル
- ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ
<dl class="commonList">
<div>
<dt>dlタイトル</dt>
<dd>ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ</dd>
</div>
<div>
<dt>dlタイトル</dt>
<dd>ddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツddコンテンツ</dd>
</div>
</dl>
通常テーブル
| th | テキスト | テキストテキストテキスト | テキスト |
|---|---|---|---|
| th | テキスト | テキスト | テキスト |
| th | テキスト | テキスト | テキスト |
| th | テキスト | テキスト | テキスト |
| th | テキスト | テキスト | テキスト |
<table class="commonTable">
<tr>
<th>th</th>
<td>テキスト</td>
<td>テキストテキストテキスト</td>
<td>テキスト</td>
</tr>
</table>
commonTableにtableEqualクラスを追加するとセルが均等になります
| th | テキスト | テキストテキストテキスト | テキスト |
|---|---|---|---|
| th | テキスト | テキスト | テキスト |
| th | テキスト | テキスト | テキスト |
| th | テキスト | テキスト | テキスト |
| th | テキスト | テキスト | テキスト |
通常のテーブルはコンテンツ幅に合わせてテーブルの最大幅が可変します。セルもテキスト量に合せて幅が可変します。しかしセルの幅が均等になっていないことに違和感を感じる人も多いです。
あらかじめ均等になるクラスを用意しておくことで焦らず対応ができるという思いで等分用のクラスを用意しています。
このサンプルでは背景が黄色いthはpc時の横幅が150pxになるようにしています。
<table class="commonTable tableEqual">
<tr>
<th>th</th>
<td>テキスト</td>
<td>テキストテキストテキスト</td>
<td>テキスト</td>
</tr>
</table>
スマホでスクロールするテーブル
⇔ 横スクロールで見れます
| 項目 | 項目 | 項目 | 項目 | 項目 | 項目 | 項目 | 項目 |
|---|---|---|---|---|---|---|---|
| テキスト | テキスト | テキスト | テキスト | テキストテキストテキストテキスト | テキスト | テキスト | テキスト |
thにscope=”row”を指定する事でthの見た目が通常時と代わります。
<p class="scrolltext">⇔ 横スクロールで見れます
<div class="scrollTable">
<table class="commonTable">
<tr>
<th>項目</th>
<th>項目</th>
</tr>
<tr>
<th scope="row">テキスト</th>
<td>テキスト</td>
</tr>
</table>
</div>
小画像＋テキスト２カラム
<div class="ImgAndText">
<div class="img"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt="" aria-hidden="true"></div>
<div class="text">
<h3 class="title">TBSホールディングス</h3>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p class="btnWrap"><a href="#" class="btn black btnS" target="_blank">TBSホールディングスのサイト</a></p>
</div>
</div>画像
<div class="listCol2">
<div class="listItem">
<p class="imgWrap"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt=""></p>
</div>
<div class="listItem">
<p class="imgWrap"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt=""></p>
</div>
</div>
<div class="listCol3">
<div class="listItem">
<p class="imgWrap"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt=""></p>
</div>
<div class="listItem">
<p class="imgWrap"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt=""></p>
</div>
<div class="listItem">
<p class="imgWrap"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt=""></p>
</div>
</div>
<div class="listCol4">
<div class="listItem">
<p>テキストテキスト</p>
</div>
<div class="listItem">
<p>テキストテキスト</p>
</div>
<div class="listItem">
<p>テキストテキスト</p>
</div>
<div class="listItem">
<p class="imgWrap"><img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt=""></p>
</div>
</div><div class="imgC">
<img src="https://www.tbsact.co.jp/wp2025/wp-content/themes/tbsact/images/dummy/dummy_square.png" alt="">
</div>ボタン
<p class="btnWrap"><a href="#" class="btn black btnL">ボタン黒→青</a></p>
<p class="btnWrap"><a href="#" class="btn white btnL">ボタン白→黒</a></p>
<p class="btnWrap"><a href="#" class="btn borderBlack btnL">ボタンボーダー→黒</a></p>
<p class="btnWrap"><a href="#" class="btn black btnM">ボタンM</a></p>
<p class="btnWrap"><a href="#" class="btn black btnS">ボタンS</a></p><p class="btnWrap"><a href="#" class="btn black btnL btnC">ボタン真ん中寄せ</a></p>
<p class="btnWrap"><a href="#" class="btn black btnL btnback btnC">戻るボタン</a></p>
<p class="btnWrap"><a href="#" class="btn white btnL btnR">ボタン右寄せ</a></p><p class="btnWrap"><a href="##." class="btn white btnS" target="_blank">別窓</a></p>
<p class="btnWrap"><a href="##." class="btn black btnS" target="_blank">別窓</a></p>
<p class="btnWrap"><a href="##.pdf" class="btn black btnS" target="_blank">PDF</a></p>
<p class="btnWrap"><a href="##.doc" class="btn borderBlack btnS" target="_blank">Word</a></p>
<p class="btnWrap"><a href="##.xlsx" class="btn borderBlack btnS" target="_blank">Excel</a></p><a href="#" class="textLink" target="_blank">テキストリンク</a><a href="#" class="mapLink" target="_blank">アクセスマップ</a>iframe
汎用的なiframe
<div class="iframeWrap">
<iframe width="100%" src="https://www.youtube.com/embed/IqKz0SfHaqI" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""></iframe>
</div>
list
ul
- リストリストリストリストリストリスト
- リストリストリストリストリスト
- リストリストリストリストリストリストリストリストリストリストリスト
- リストリストリストリストリストリストリストリスト
<ul class="commonList">
<li>リストリストリストリストリスト</li>
<li>リストリストリストリストリストリストリストリスト</li>
<li>リストリストリストリストリストリストリストリストリストリストリストリスト</li>
<li>リストリストリストリスト</li>
</ul>
ol
- リストリストリストリストリスト
- リストリストリストリストリスト
- リストリストリストリストリストリストリストリストリストリストリスト
- リストリストリストリストリストリスト
- リストリストリストリストリストリスト
- リストリストリストリストリストリスト
- リストリストリストリストリストリスト
- リストリストリストリストリストリスト
- リストリストリストリストリストリスト
- リストリストリストリストリストリスト
<ol class="commonList">
<li>リストリストリストリストリスト</li>
<li>リストリストリストリストリストリストリストリストリストリストリストリストリスト</li>
<li>リストリストリストリストリストリストリストリストリストリストリスト</li>
<li>リストリストリストリストリストリスト</li>
</ol>
- 下剋上球児
- マイ・セカンド・アオハル
- フェルマーの料理
- ラストマンー全盲の捜査官ー
- 王様に捧ぐ薬指
- ペンディングトレインー８時２３分、明日 君と
- 私がヒモを飼うなんて
- Ｇｅｔ Ｒｅａｄｙ！
- 夕暮れに、手をつなぐ
- １００万回 言えばよかった
- ブラザー・トラップ
- アトムの童
- 君の花になる
- 下剋上球児
- マイ・セカンド・アオハル
- フェルマーの料理
- ラストマンー全盲の捜査官ー
- 王様に捧ぐ薬指
- ペンディングトレインー８時２３分、明日 君と
- 私がヒモを飼うなんて
- Ｇｅｔ Ｒｅａｄｙ！
- 夕暮れに、手をつなぐ
- １００万回 言えばよかった
- ブラザー・トラップ
- アトムの童
- 君の花になる
<ul class="commonListCol2">
<li>下剋上球児</li>
<li>マイ・セカンド・アオハル</li>
<li>フェルマーの料理</li>
<li>ラストマンー全盲の捜査官ー</li>
<li>王様に捧ぐ薬指</li>
</ul>
カラーボックス
タイトル
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="colorBox">
<div class="title">タイトル</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
ボーダーボックス
タイトル
テキストテキストテキストテキスト
<div class="borderBox">
<div class="title">タイトル</div>
<p>テキストテキストテキストテキスト</p>
</div>
受賞歴
- 2024
-
○○○○○Awards 2024 – FILM Challenge [GOLD]
news23○○○○ ○○○○○ ○○○○○○ Awards 2024
番組名など○○○○ ○○○○○ ○○○○○○ Awards 2024
番組名など
- 2023
-
○○○○○Awards 2023 – FILM Challenge [GOLD]
news23○○○○ ○○○○○ ○○○○○○ Awards 2023
番組名など○○○○ ○○○○○ ○○○○○○ Awards 2023
番組名など
<div class="historyTable">
<dl>
<dt>2024</dt>
<dd>
<p class="awardTitle">Awards 2024 - FILM Challenge [GOLD]</p>
<span>news23</span>
<p class="awardTitle">Awards 2024</p>
<span>番組名など</span>
<p class="awardTitle">Awards 2024</p>
<span>番組名など</span>
</dd>
</dl>
<dl>
<dt>2023</dt>
<dd>
<p class="awardTitle">Awards 2023 - FILM Challenge [GOLD]</p>
<span>news23</span>
<p class="awardTitle">Awards 2023</p>
<span>番組名など</span>
<p class="awardTitle">Awards 2023</p>
<span>番組名など</span>
</dd>
</dl>
</div>
理念 パーツ
TBS ACT Purpose&Vision私たちの存在意義と目的
ＴＢＳアクトとは・・・
アートとテクノロジーの力で、
時代を超えて世界の人々に
愛されるコンテンツを創り、
そして届けることで、
心ときめく明日の世界をつくります。
そのために、技術&美術の匠集団が活躍し、
日本を牽引する
クリエイティブ制作会社を目指します。
<div class="philosophyBox">
<div class="philosophyInner">
<h2 class="philosophyTitle"><span class="en"><strong>TBS ACT</strong> Purpose&Vision</span><span class="ja">私たちの存在意義と目的</span></h2>
<h3 class="philosophySubTitle">ＴＢＳアクトとは・・・</h3>
<p class="philosophyText">アートとテクノロジーの力で、<br class="forSP">時代を超えて世界の人々に<br>
愛されるコンテンツを創り、<br class="forSP">そして届けることで、<br>
心ときめく明日の世界をつくります。<br>
<br>
そのために、技術&美術の匠集団が活躍し、<br>
日本を牽引する<br>
クリエイティブ制作会社を目指します。
</p>
</div>
</div>
TBS ACT Purpose&Vision私たちの存在意義と目的
ＴＢＳアクトとは・・・
わたしたちは「チームワーク」を大切にします
わたしたちは
一人ひとりの充実感を尊重し、
その探索をサポートしてゆきます
わたしたちは
一人ひとりの充実感を尊重し、
その探索をサポートしてゆきます
わたしたちは
一人ひとりの充実感を尊重し、
その探索をサポートしてゆきます
<div class="philosophyBox">
<div class="philosophyInner">
<h2 class="philosophyTitle"><span class="en"><strong>TBS ACT</strong> Purpose&Vision</span><span class="ja">私たちの存在意義と目的</span></h2>
<h3 class="philosophySubTitle">ＴＢＳアクトとは・・・</h3>
<p class="title taC">わたしたちは「チームワーク」を大切にします</p>
<div class="listCol3">
<div class="listItem">
<p class="texeWrap">テキストテキスト </p>
</div>
<div class="listItem">
<p class="texeWrap">テキストテキスト </p>
</div>
<div class="listItem">
<p class="texeWrap">テキストテキスト </p>
</div>
</div>
</div>
</div>
文字寄せ
左寄せ（基本的には、何も指定しなければ左寄せになります） taL
右寄せ taR
左寄せ taC
スマホのみ左寄せ taL
スマホのみ右寄せ taR
スマホのみ左寄せ taC
PCのみ左寄せ taL
PCのみ右寄せ taR
PCのみ左寄せ taC
<p class="taL">左寄せ（基本的には、何も指定しなければ左寄せになります） taL</p>
<p class="taR">右寄せ taR</p>
<p class="taC">左寄せ taC</p>
<p class="taL_sp">スマホのみ左寄せ taL</p>
<p class="taR_sp">スマホのみ右寄せ taR</p>
<p class="taC_sp">スマホのみ左寄せ taC</p>
<p class="taL_pc">PCのみ左寄せ taL</p>
<p class="taR_pc">PCのみ右寄せ taR</p>
<p class="taC_pc">PCのみ左寄せ taC</p>文字サイズ
size○○でフォントサイズを変えられます。
size○○_spでスマホのフォントサイズのみ変わります。
size○○_pcでPCのフォントサイズのみ変わります。
size○○の○○には12、13、14、15、16、17、18、19、20、22、24、28が入れられます。
<span class="size12">12</span>、
<span class="size13">13</span>、
<span class="size14">14</span>、
<span class="size15">15</span>、
<span class="size16">16</span>、
<span class="size17">17</span>、
<span class="size18">18</span>、
<span class="size19">19</span>、
<span class="size20">20</span>、
<span class="size22">22</span>、
<span class="size24">24</span>
<span class="size28">28</span>、余白
mT○○でmargin-topを付けることができます。
同様に、mB○○でmargin-bottomを付けることができます。
mT○○_spでスマホのmargin-topのみ変わります。
同様に、mB○○_spでスマホのmargin-bottomを付けることができます。
mT○○_pcでPCのmargin-topのみ変わります。
同様に、mB○○_pcでPCのmargin-bottomを付けることができます。
mT○○、mB○○には以下の値が入れられます。
基本的には余白はCSSで一括調整するので、ここだけ余白を調節したいという時に使っていただけたらと思います。
0
5
10
20
30
40
50
60
70
80
<p class="mT0">mT0</p>
<p class="mT5">mT5</p>
<p class="mT10">mT10</p>
<p class="mT20">mT20</p>
<p class="mT30">mT30</p>
<p class="mT40">mT40</p>
<p class="mT50">mT50</p>
<p class="mT60">mT60</p>
<p class="mT70">mT70</p>
<p class="mT80">mT80</p>