見出し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
- リスト2リスト2リスト2
- リスト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カラムレイアウト


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

<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>

画像の幅は最大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

<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">⟺ スクロールできます</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">⟺ スクロールできます</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選定