SAMPLE

サンプル

見出しh1

リード文テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

記事のタイトルでほかの文字と比べて小さくしたいとき

<span class="small">ほかの文字と比べて小さく</span>

見出しh2

本文テキストが入ります。 本文テキストが入ります。

見出しh3

本文テキストが入ります。 本文テキストが入ります。

見出しh4

本文テキストが入ります。 本文テキストが入ります。

<h2 class="title">見出しh2</h2>
<h3 class="title">見出しh3</h3>
<h4 class="title">見出しh4</h4>

リスト

  • リスト1リスト1リスト1
  • リスト2リスト2リスト2
  • リスト3リスト3リスト3
<ul class="commonList">
<li>リスト1リスト1リスト1</li>
<li>リスト2リスト2リスト2</li>
<li>リスト3リスト3リスト3</li>
</ul>

リスト

  1. リスト1リスト1リスト1
  2. リスト2リスト2リスト2
  3. リスト3リスト3リスト3
<ol>
<li>リスト1リスト1リスト1</li>
<li>リスト2リスト2リスト2</li>
<li>リスト3リスト3リスト3</li>
</ol>

ボタン

<div class="btnWrap"><a href="#" class="commonBtn btnS">ボタンS</a></div>
<div class="btnWrap"><a href="#" class="commonBtn btnS dark">ボタン 暗め</a></div>
<div class="btnWrap"><a href="#" class=" commonBtn btnS btn_center">ボタンS 中央寄せ</a></div>
<div class="btnWrap"><a href="#" class="commonBtn btnS btn_right">ボタンS 右寄せ</a></div>
<div class="btnWrap"><a href="#" class="commonBtn btnM btn_center">ボタンM 中央寄せ</a></div>
<div class="btnWrap"><a href="#" class="commonBtn btnL btn_center">ボタンL 中央寄せ</a></div>

アイコン・装飾・文字

別窓アイコン ・・・ class="ico_blank"
別窓アイコン ・・・ class="after_blank"
PDFアイコン ・・・ class="ico_pdf"
PDFアイコン ・・・ class="after_pdf"
丸アイコン ・・・ class="ico_maru"
リンクアイコン ・・・ class="ico_link"
リンクアイコン ・・・ class="after_ico_link"
テキストリンク ・・・ class="textLink"
<a href="" class="ico_blank">別窓アイコン</a>
<a href="" class="after_blank">別窓アイコン</a>
<a href="" class="ico_pdf">PDFアイコン</a>
<a href="" class="after_pdf">PDFアイコン</a>
<a href="" class="ico_maru">丸アイコン</a>
<a href="" class="ico_link">リンクアイコン</a>
<a href="" class="after_ico_link">リンクアイコン</a>
<a href="" class="textLink">テキストリンク</a>

枠ありテキストボックス

見出し

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

見出し

テキストテキスト

<div class="borderBox">
<div class="boxTitle">見出し</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
<ul class="commonList">
<li>テキスト</li>
<li>テキスト</li>
<li><a href="#">テキスト</a></li>
</ul>
</div>
<div class="grayBox">
<div class="boxTitle">見出し</div>
<p>テキストテキスト</p>
<ul class="commonList">
<li>テキスト</li>
<li>テキスト</li>
<li><a href="#">テキスト</a></li>
</ul>
</div>

QA開閉デザイン

テキストはダミーです
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
予熱時間はどの位かかりますか?
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
煙は出ますか?
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

2カラムレイアウト

画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)
画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)
<div class="twoCol">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""><span class="cap">画像のキャプション(不要の場合は&lt;span class="cap">~&lt;/span>を削除してください)</span></div>
<div class="img"><img src="../images2024/second/sample.jpg" alt=""><span class="cap">画像のキャプション(不要の場合は&lt;span class="cap">~&lt;/span>を削除してください)</span></div>
</div>
画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)
<div class="twoCol">
<div class="txt">キストテキストテキストテキストテキスト</div>
<div class="img"><img src="../images2024/second/sample.jpg" alt=""><span class="cap">画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)</span></div>
</div>
画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)
画像の幅は最大50%。テキストの幅は画像のサイズに合わせて伸縮。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
<div class="twoCol">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""><span class="cap">画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)</span></div>
<div class="txt">キストテキストテキストテキストテキスト</div>
</div>

towCol layout sample(これはh3)

.txt内は通常のタグが自由に使えます。(これはp)

  • これはcommonList
  • これはcommonList
画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)
<div class="twoCol">
<div class="txt">
<h3 class="title">towCol layout sample(これはh3)</h3>
<p>.txt内は通常のタグが自由に使えます。(これはp)</p>
<ul class="commonList">
<li>これはcommonList</li>
<li>これはcommonList</li>
</ul>
</div>
<div class="img"><img src="../images2024/second/sample.jpg" alt=""><span
class="cap">画像のキャプション(不要の場合は<span class="cap">~</span>を削除してください)</span>
</div>
</div>

3カラムレイアウト

テキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキスト
<div class="threeCol">
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキスト</div>
</div>
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキスト</div>
</div>
</div>

4カラムレイアウト

テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
<div class="fourCol">
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキスト</div>
</div>
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキスト</div>
</div>
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキスト</div>
</div>
<div class="colBox">
<div class="img"><img src="../images2024/second/sample.jpg" alt=""></div>
<div class="txt">テキストテキストテキスト</div>
</div>
</div>

テーブル

<table class="commonTable">
<tr>
<th>中</th>
<td>中</td>
</tr>
<tr>
<th>中</th>
<td>中</td>
</tr>
</table>
<table class="commonTable">
<tr>
<th>中</th>
<th>中</th>
<th>中</th>
</tr>
<tr>
<td>中</td>
<td>中</td>
<td>中</td>
</tr>
</table>
th subth subth subth
th td td td
<table class="commonTable">
<tr>
<th>th</th>
<th class="sub">subth</th>
<th class="sub">subth</th>
<th class="sub">subth</th>
</tr>
<tr>
<th>th</th>
<td>td</td>
<td>td</td>
<td>td</td>
</tr>
</table>
スクロールできます
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
タイトル テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
<span class="forSP scrolltext">&#10234; スクロールできます</span>
<div class="scrollTable">
<table class="commonTable">
<tr>
<th width="170">タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
<tr>
<th>タイトル</th>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</div>
⟺ スクロールできます
タイトル タイトル タイトル タイトル
テキストテキスト テキストテキスト テキストテキスト テキストテキストテキストテキストテキストテキストテキスト
<span class="forSP scrolltext">&#10234; スクロールできます</span>
<div class="scrollTable">
<table class="commonTable">
<tr>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
<th>タイトル</th>
</tr>
<tr>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキスト</td>
<td>テキストテキストテキストテキストテキストテキストテキスト</td>
</tr>
</table>
</div>

沿革

昭和21年
新潟県三条市由利2124番地において個人創業1946年(昭和21年) 日本国憲法公布。朝日新聞にて「サザエさん」連載開始。
昭和29年6月
佐藤金物株式会社として組織変更 資本金100万円
昭和44年10月
新社屋新築落成、移転1969年(昭和44年) 東名高速道路全通。人類初の月面着陸。
昭和46年6月
佐藤器業株式会社に商号変更
昭和52年12月
本社事務所完成移転1977年(昭和52年) 王選手がホームラン世界記録樹立。平均寿命世界一。
昭和59年8月
本社配送センター新築
昭和62年6月
佐藤貞吉、取締役会長に就任 佐藤明、代表取締役社長に就任1987年(昭和62年) 東北自動車道が全線開通。国鉄民営化、JRグループ発足。
平成2年3月
栄第一配送センター新築
平成2年5月
オークス株式会社に商号変更1990年(平成2年) 紀子さまブーム。「スーパーファミコン」が発売開始。
平成3年8月
栄第二配送センター新築
平成22年6月
佐藤明、取締役会長に就任 佐藤俊之、代表取締役社長に就任2010年(平成22年) 東京スカイツリー建設。地上アナログテレビ放送が終了へ。
平成25年
ゆびさきトングが日経トレンディ2013ご当地ヒット大賞受賞
平成27年
soraieがGOOD DESIGN AWARD受賞
令和2年
TABLETOP SMOKERがGOOD DESIGN AWARD受賞
令和3年
おろしスプーンがJIDAデザインミュージアムセレクションVol.23選定
ONLINE STORE
公式オンラインストア