サンプルページ

キャッチなどが入ります、キャッチなどが入ります。

リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文
リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文

<p class="catch">キャッチなどが入ります、キャッチなどが入ります。</p>
<p class="read">リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文<br>リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文リード文</p>

H1 タイトル

H2 タイトル

H3 タイトル

H4 タイトル

<h1 class="commonH1">H1 タイトル</h1>
<h2 class="commonH2">H2 タイトル</h2>
<h3 class="commonH3">H3 タイトル</h3>
<h4 class="commonH4">H4 タイトル</h4>

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキスト
テキスト
テキスト
テキスト
テキスト

(2018/10/1現在の数字です)

PDFアイコン付きリンク
EXCELアイコン付きリンク
WORDアイコン付きリンク
PPTアイコン付きリンク
外部アイコン付きリンク

<a href="#" class="pdf">PDFアイコン付きリンク</a><br>
<a href="#" class="excel">EXCELアイコン付きリンク</a><br>
<a href="#" class="word">WORDアイコン付きリンク</a><br>
<a href="#" class="ppt">PPTアイコン付きリンク</a><br>
<a href="#" class="blank">外部アイコン付きリンク</a>

ボタン

ボタン

ボタンボタン

<p class="alignC"><a href="#" class="btn">ボタン</a></p>
<p class="ovh"><a href="#" class="btn floatL">ボタン</a><a href="#" class="btn floatR">ボタン</a></p>

リスト

<ul class="basic_list">
<li>サンプル<br>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>

テーブル

←→スクロールできます
th th th
td td td
td td td
td td td
<div class="scrollTable">
<span class="scroll_txt">←→スクロールできます</span>
<table class="commonTable">
<tbody>
<tr>
<th>th</th>
<th>th</th>
<th>th</th>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
<tr>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</tbody>
</table>
</div>

ボックス系

H4 タイトル

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
<div class="common_box">
<div class="img_in_box">
<img src="../images/second/dummy.png" alt="" class="floatL">
<h4 class="commonH4">H4 タイトル</h4>
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
</div>
</div>

アドバイス

技術者と言うと、機材の事など難しい知識が必要だと思われているかもしれませんが、必要な事はコミュニケーション能力だと思っています。 知識を持っていても、ディレクターさんの意図を理解したり要望を聞きだせないと満足して貰えません。 知識は後から身に付いてくるので、やる気とテレビの仕事への興味を、持っていると良いと思います。

<div class="common_box col2_box">
<div class="img"><img src="../images/second/dummy.png" alt=""></div>
<div class="txt">
<h3>アドバイス</h3>
<p>技術者と言うと、機材の事など難しい知識が必要だと思われているかもしれませんが、必要な事はコミュニケーション能力だと思っています。 知識を持っていても、ディレクターさんの意図を理解したり要望を聞きだせないと満足して貰えません。 知識は後から身に付いてくるので、やる気とテレビの仕事への興味を、持っていると良いと思います。 </p>
</div>
</div>

2カラムボックス

2カラム

  • サンプル
  • サンプル

2カラム

  • サンプル
  • サンプル
<div class="col_2_box">
<div class="left_box">
<h3 class="commonH3">2カラム</h3>
<ul class="basic_list">
<li>サンプル</li>
<li>サンプル</li>
</ul>
</div>
<div class="right_box">
<h3 class="commonH3">2カラム</h3>
<ul class="basic_list">
<li>サンプル</li>
<li>サンプル</li>
</ul>
</div>
</div>

画像回り込みとキャプション

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP">
<span class="cap_img imgLeft"><img src="../images/dummy.png" width="350" alt=""><span class="cap">キャプション</span></span>
テキスト</p>

キャプション テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<p class="imgInP">
<span class="cap_img imgRight"><img src="../images/dummy.png" width="350" alt=""><span class="cap">キャプション</span></span>
テキスト</p>

画像横並び

<ul class="img_list">
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
<li><img src="../images/second/dummy.png" alt=""></li>
</ul>
通常の1日
レギュラー番組の本編作業をする一日(週に一回の割合)
6:00起床
6:00起床
6:00起床起床起床起床起床起床起床起床
6:00起床
6:00起床
TBS報道勤・機材室にて機材BS報道局に出勤・機材室材準備TBS報道局に出勤・機材室にて機材準備
6:00起床
6:00起床
6:00起床
6:00半端な時間
class=”noIcon”で真ん中の●が無くなります。
6:00起床
6:00起床
6:00←スケジュールを非表示にする
class=”transparent”で非表示になります。
6:00起床
6:00起床
<div id="scheduleWrap">
<div id="scheduleHead">
<div class="title">通常の1日</div>
<div class="title">レギュラー番組の本編作業をする一日(週に一回の割合)</div>
</div>
<div class="time">
<dl class="left"><dt><span>6:00</span>起床</dt><dd></dd></dl>
<dl class="right"><dt><span>6:00</span>起床</dt><dd></dd></dl>
</div>
<div class="time">
<dl class="left"><dt><span>6:00</span>起床起床起床起床起床起床起床起床</dt><dd></dd></dl>
<dl class="right"><dt><span>6:00</span>起床</dt><dd></dd></dl>
</div>
<div class="time">
<dl class="left"><dt><span>6:00</span>起床</dt><dd>TBS報道勤・機材室にて機材BS報道局に出勤・機材室材準備TBS報道局に出勤・機材室にて機材準備</dd></dl>
<dl class="right"><dt><span>6:00</span>起床</dt><dd></dd></dl>
</div>
<div class="time">
<dl class="left"><dt><span>6:00</span>起床</dt><dd></dd></dl>
<dl class="right"><dt><span>6:00</span>起床</dt><dd></dd></dl>
</div>
<div class="time noIcon">
<dl class="left"><dt><span>6:00</span>半端な時間</dt><dd>class="noIcon"で真ん中の●が無くなります。</dd></dl>
<dl class="right"><dt><span>6:00</span>起床</dt><dd></dd></dl>
</div>
<div class="time">
<dl class="left transparent"><dt><span>6:00</span>起床</dt><dd></dd></dl>
<dl class="right"><dt><span>6:00</span>←スケジュールを非表示にする</dt><dd>class="transparent"で非表示になります。</dd></dl>
</div>
<div class="time">
<dl class="left"><dt><span>6:00</span>起床</dt><dd></dd></dl>
<dl class="right"><dt><span>6:00</span>起床</dt><dd></dd></dl>
</div>
<div id="scheduleBottom"></div>
</div>