パターンA: 大見出し（prt_hdg1・サブタイトル付き）
プレビュー
サブタイトル（カテゴリ名など）大見出し（H1）
コードブロック
<h1 class="prt_hdg1"><span class="sub_title">サブタイトル（カテゴリ名など）</span>大見出し（H1）</h1>パターンB: 中見出し（prt_hdg2）
プレビュー
中見出し（H2）
コードブロック
<h2 class="prt_hdg2">中見出し（H2）</h2>パターンC: 小見出し（prt_hdg3）
プレビュー
小見出し（H3）
コードブロック
<h3 class="prt_hdg3">小見出し（H3）</h3>パターンD: ボックス内見出し（prt_hdg_box1・H4相当）
プレビュー
ボックス内見出し（H4相当）
コードブロック
<h4 class="prt_hdg_box1">ボックス内見出し（H4相当）</h4>パターンE: 小見出し・ライン付き（prt_hdg5）
プレビュー
小見出しデザイン（ライン付き）
コードブロック
<h3 class="prt_hdg5">小見出しデザイン（ライン付き）</h3>パターンA: ポイント（prt_box_point）
プレビュー
コードブロック
<div class="prt_box_point"><i></i><div class="wrap">ここにポイントとなる解説テキストを入れます。</div></div>パターンB: 注記（prt_box_note）
プレビュー
ここに注記テキストを入れます。
コードブロック
<div class="prt_box_note"><i></i><div class="wrap"><p>ここに注記テキストを入れます。</p></div></div>パターンC: 警告・注意（prt_box_caution）
プレビュー
コードブロック
<div class="prt_box_caution prt_bold"><i></i><div class="wrap">ここに特に注意すべき警告テキストを入れます。</div></div>パターンA: 2カラム均等（prt_2cols）
プレビュー
コードブロック
<div class="prt_2cols"><div class="item">左カラム（均等）</div><div class="item">右カラム（均等）</div></div>パターンB: 2カラム・左狭右広（prt_2cols narrow_left）
プレビュー
広いカラム
コードブロック
<div class="prt_2cols narrow_left"><div class="prt_figure item narrow">狭いカラム（画像など）</div><p class="item wide">広いカラム（説明テキストなど）</p></div>パターンA: ディスクリスト（prt_list_disc）
プレビュー
- 標準のディスクリスト項目1
- 標準のディスクリスト項目2
コードブロック
<ul class="prt_list_disc"><li>標準のディスクリスト項目1</li><li>標準のディスクリスト項目2</li></ul>パターンB: 注記リスト（prt_list_notes）
プレビュー
- 注記リスト項目（※が付きます）
コードブロック
<ul class="prt_list_notes"><li>注記リスト項目（※が付きます）</li></ul>パターンC: 定義リスト・青太字（prt_define_02）
プレビュー
- 定義タイトル（青・太字）
- 定義に対する説明テキストが入ります。
コードブロック
<dl class="prt_define_02"><dt>定義タイトル（青・太字）</dt><dd>定義に対する説明テキストが入ります。</dd></dl>パターンA: カタログDLボタン（c-button c-button--conversion）
プレビュー
コードブロック
<a href="#" class="c-button c-button--conversion c-button--icon-catalog">カタログダウンロード</a>パターンB: シリーズ詳細ボタン（prt_series_btn）
プレビュー
コードブロック
<a href="#" class="prt_series_btn"><span class="label">シリーズ詳細はこちら</span></a>JSP includeで読み込む場合（XMLで使用）
コードブロック（カタログDL・ページにより download_btn_001〜010 等）
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_008.jsp" />シリーズ詳細ボタンを include で読み込む場合
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/series_btn_001.jsp" />XML/CSSから抽出したテーブルパターン一覧。基本は prt_tbl（固定）／prt_rsp_tbl（レスポンシブ）。spmode_txt（行単位でラベル表示）／spmode_cell（セル単位）、type_01／type_02 でSP表示を切り替え。用途別の tbl_* クラスを組み合わせて使用します。
テーブルパターン一覧
プレビュー
| クラス | 用途・備考 |
|---|---|
prt_rsp_tbl spmode_txt type_02 tbl_basic2d_01 | 2次元コード等・基本2列レスポンシブ（行タイトル＋データ） |
prt_rsp_tbl spmode_cell type_01 tbl_basic_01 | 用語＋説明の2列（th+td 繰り返し） |
prt_tbl tbl_basic_02 | コード種別の定義（読み方・シンボル・文字の種類・特徴等） |
prt_tbl tbl_basic_03 | 多列テーブル・先頭列がth |
prt_tbl tbl_basic_04 scroll_body | 横スクロール可能な多列表 |
prt_tbl tbl_jan_country scroll_body | 国コード表（thead＋tbody、th+td行） |
tbl_principles_merit | 比較表・メリットデメリット（1列目空、行見出し＋リスト） |
tbl_principles2d_04 tbl_attach_notes | キャプション＋複数列（dpi表など） |
tbl_box_basic2d_03 + prt_tbl sp_scroll_body | ボックス＋SP縦スクロール（バージョン表） |
tbl_code128_ai | 4列レスポンシブ・AI表（分類／AI／データ項目／内容） |
tbl_box_basic2d_01 + prt_tbl_label | 2次元コード仕様ボックス（ラベル＋prt_tbl tbl_basic2d_01） |
tbl_correction_level + prt_rsp_tbl spmode_cell type_01 | 誤り訂正レベル等・1行目th＋複数列td |
prt_tbl_frame | 枠で囲んだテーブル |
tbl_principles2d_01（+ caption） | キャプション付き・シンボル比較（樹脂／金属等） |
コードブロック
<table class="prt_rsp_tbl spmode_txt type_02 tbl_basic2d_01"><thead class="pc_view"><tr><th>クラス</th><th>用途・備考</th></tr></thead><tbody><tr><th><div class="prt_cell_wrap">prt_rsp_tbl</div></th><td><div class="prt_cell_wrap" data-label="用途">説明</div></td></tr></tbody></table>パターンA: レスポンシブ2列（行タイトル＋データ）
プレビュー
| 項目名A | 項目名B |
|---|---|
行タイトル | データの内容 |
コードブロック
<table class="prt_rsp_tbl spmode_txt type_02 tbl_basic2d_01"><thead class="pc_view"><tr><th>項目名A</th><th>項目名B</th></tr></thead><tbody><tr><th><div class="prt_cell_wrap">行タイトル</div></th><td><div class="prt_cell_wrap" data-label="項目名B">データの内容</div></td></tr></tbody></table>パターンB: セル型レスポンシブ（用語＋説明・th+td）
プレビュー
| NB：ナローバー | 細バー |
|---|---|
| WB：ワイドバー | 太バー |
コードブロック
<table class="prt_rsp_tbl spmode_cell type_01 tbl_basic_01"><tr><th>NB：ナローバー</th><td><div class="prt_cell_wrap">細バー</div></td></tr><tr><th>WB：ワイドバー</th><td><div class="prt_cell_wrap">太バー</div></td></tr></table>パターンC: 1次元コード定義（tbl_basic_02）
プレビュー
| 読み方 | ジャン/イアン |
|---|---|
| 文字の種類 | 数字（0～9）のみ |
コードブロック
<table class="prt_tbl tbl_basic_02"><tr><th>読み方</th><td>ジャン/イアン</td></tr><tr><th>文字の種類</th><td>数字（0～9）のみ</td></tr></table>パターンD: ボックス＋ラベル＋2次元コード仕様（tbl_box_basic2d_01）
プレビュー
仕様
横方向 | 最小1～最大30 |
縦方向 | 最小3行～最大90行 |
コードブロック
<div class="tbl_box_basic2d_01"><p class="prt_tbl_label">仕様</p><table class="prt_tbl tbl_basic2d_01 item_basic2d_type01"><caption>シンボルサイズ</caption><tbody><tr><td><div class="prt_cell_wrap">横方向</div></td><td><div class="prt_cell_wrap">最小1～最大30</div></td></tr><tr><td><div class="prt_cell_wrap">縦方向</div></td><td><div class="prt_cell_wrap">最小3行～最大90行</div></td></tr></tbody></table></div>パターンE: 誤り訂正レベル表（tbl_correction_level）
プレビュー
| 誤り訂正レベル | 0 | 1 | 2 |
|---|---|---|---|
| コード語数 | 2 | 4 | 8 |
コードブロック
<div class="tbl_correction_level"><table class="prt_rsp_tbl spmode_cell type_01"><tbody><tr><th>誤り訂正レベル</th><td><div class="prt_cell_wrap">0</div></td><td><div class="prt_cell_wrap">1</div></td></tr><tr><th>コード語数</th><td><div class="prt_cell_wrap">2</div></td><td><div class="prt_cell_wrap">4</div></td></tr></tbody></table></div>パターンF: 国コード表（thead＋tbody・scroll_body）
プレビュー
| 国コード | 国名 |
|---|---|
| 000～019 | アメリカ合衆国 |
| 200～299 | 小売業インストアコード用 |
コードブロック
<table class="prt_tbl tbl_jan_country scroll_body"><thead><tr><th>国コード</th><th>国名</th></tr></thead><tbody><tr><th>000～019</th><td>アメリカ合衆国</td></tr><tr><th>200～299</th><td>小売業インストアコード用</td></tr></tbody></table>パターンG: 横スクロール多列表（tbl_basic_04 scroll_body）
プレビュー
| 数値 | CODE A | CODE B | CODE C | パターン |
|---|---|---|---|---|
| 0 | SP | SP | 0 | — |
| 1 | ! | ! | 1 | — |
コードブロック
<table class="prt_tbl tbl_basic_04 scroll_body"><thead><tr><th>数値</th><th>CODE A</th><th>CODE B</th><th>CODE C</th><th>パターン</th></tr></thead><tbody><tr><th>0</th><td>SP</td><td>SP</td><td>0</td><td>—</td></tr></tbody></table>パターンH: 多列 thead＋tbody（tbl_basic_03）
プレビュー
| キャラクタ | バーのパターン |
|---|---|
| START | （画像など） |
| 2 | — |
コードブロック
<table class="prt_tbl tbl_basic_03"><thead><tr><th>キャラクタ</th><th>バーのパターン</th></tr></thead><tbody><tr><th>START</th><td>—</td></tr></tbody></table>パターンI: 比較表・メリットデメリット（tbl_principles_merit）
プレビュー
| 方式A | 方式B | |
|---|---|---|
メリット |
|
|
デメリット |
変色しやすい |
コストが高い |
コードブロック
<table class="prt_rsp_tbl spmode_txt type_02 tbl_principles_merit"><thead class="pc_view"><tr><th></th><th>方式A</th><th>方式B</th></tr></thead><tbody><tr><th><div class="prt_cell_wrap">メリット</div></th><td><div class="prt_cell_wrap" data-label="方式A"><ul class="prt_list_disc"><li>コストが安い</li></ul></div></td><td><div class="prt_cell_wrap" data-label="方式B"><ul class="prt_list_disc"><li>耐久性が高い</li></ul></div></td></tr><tr><th><div class="prt_cell_wrap">デメリット</div></th><td><div class="prt_cell_wrap" data-label="方式A">変色しやすい</div></td><td><div class="prt_cell_wrap" data-label="方式B">コストが高い</div></td></tr></tbody></table>パターンJ: キャプション＋複数列（tbl_principles2d_04 tbl_attach_notes）
プレビュー
| 200dpi | 300dpi | 400dpi | |
|---|---|---|---|
1ドット | 0.125mm | 0.083mm | 0.0625mm |
2ドット | 0.25mm | 0.167mm | 0.125mm |
コードブロック
<table class="prt_rsp_tbl spmode_txt type_02 tbl_principles2d_04 tbl_attach_notes"><thead class="pc_view"><tr><th></th><th>200dpi</th><th>300dpi</th><th>400dpi</th></tr></thead><tbody><tr><th><div class="prt_cell_wrap">1ドット</div></th><td><div class="prt_cell_wrap" data-label="200dpi">0.125mm</div></td><td><div class="prt_cell_wrap" data-label="300dpi">0.083mm</div></td><td><div class="prt_cell_wrap" data-label="400dpi">0.0625mm</div></td></tr><tr><th><div class="prt_cell_wrap">2ドット</div></th><td><div class="prt_cell_wrap" data-label="200dpi">0.25mm</div></td><td><div class="prt_cell_wrap" data-label="300dpi">0.167mm</div></td><td><div class="prt_cell_wrap" data-label="400dpi">0.125mm</div></td></tr></tbody></table>パターンK: ボックス＋SP縦スクロール（tbl_box_basic2d_03 + sp_scroll_body）
プレビュー
| バージョン | データ容量 | 備考 |
|---|---|---|
| M1(11) | — | — |
| M2(13) | — | — |
コードブロック
<div class="tbl_box_basic2d_03"><table class="prt_tbl sp_scroll_body"><caption>数字</caption><thead><tr><th>バージョン</th><th>データ容量</th><th>備考</th></tr></thead><tbody><tr><th>M1(11)</th><td>—</td><td>—</td></tr><tr><th>M2(13)</th><td>—</td><td>—</td></tr></tbody></table></div>パターンL: 4列レスポンシブ・AI表（tbl_code128_ai）
プレビュー
| 分類 | AI | データ項目 | 内容 |
|---|---|---|---|
梱包識別 | 00 | SSCC | 物流単位の個別識別 |
商品管理 | 01、02 | GTIN | 商品識別コード |
コードブロック
<table class="prt_rsp_tbl spmode_txt type_02 tbl_code128_ai"><thead class="pc_view"><tr><th>分類</th><th>AI</th><th>データ項目</th><th>内容</th></tr></thead><tbody><tr><th><div class="prt_cell_wrap">梱包識別</div></th><td data-label="AI"><div class="prt_cell_wrap">00</div></td><td data-label="データ項目"><div class="prt_cell_wrap">SSCC</div></td><td data-label="内容"><div class="prt_cell_wrap">物流単位の個別識別</div></td></tr><tr><th><div class="prt_cell_wrap">商品管理</div></th><td data-label="AI"><div class="prt_cell_wrap">01、02</div></td><td data-label="データ項目"><div class="prt_cell_wrap">GTIN</div></td><td data-label="内容"><div class="prt_cell_wrap">商品識別コード</div></td></tr></tbody></table>パターンM: 枠付きテーブル（prt_tbl_frame）
プレビュー
| 項目 | 枠で囲んだテーブル表示 |
|---|
コードブロック
<div class="prt_tbl_frame"><table class="prt_tbl tbl_basic_02"><tr><th>項目</th><td>枠で囲んだテーブル表示</td></tr></table></div>パターンN: キャプション付き・シンボル比較（tbl_principles2d_01）
プレビュー
| 項目A | 項目B | |
|---|---|---|
行1 | — | — |
コードブロック
<table class="prt_rsp_tbl spmode_txt type_02 tbl_principles2d_01"><caption>樹脂</caption><thead class="pc_view"><tr><th></th><th>項目A</th><th>項目B</th></tr></thead><tbody><tr><th><div class="prt_cell_wrap">行1</div></th><td><div class="prt_cell_wrap" data-label="項目A">—</div></td><td><div class="prt_cell_wrap" data-label="項目B">—</div></td></tr></tbody></table>プレビュー
コードブロック
<div class="prt_acc_menu"><!-- idとforを紐付けてください --><input type="checkbox" id="acc_sample_01"><dl><dt><label for="acc_sample_01"><span>クリックして開閉するタイトル</span></label></dt><dd class="acc_content"><div class="inner"><p>展開されるコンテンツ内容</p></div></dd></dl></div>パターンA: 太字リード文
プレビュー
太字リード文（prt_lead）
コードブロック
<p><span class="prt_lead">太字リード文（prt_lead）</span></p>パターンB: ブロック強調（青背景）
プレビュー
ブロック強調（青背景・prt_lead_02）
コードブロック
<p><span class="prt_lead_02">ブロック強調（青背景・prt_lead_02）</span></p>パターンC: 文中のインライン強調
プレビュー
文中のインラインブロックや太字、青・太字
コードブロック
<p>文中の<span class="prt_inblock">インラインブロック</span>や<span class="prt_bold">太字（prt_bold）</span>、<span class="prt_strong">青・太字（prt_strong）</span></p>パターンD: 注記
プレビュー
注記（※が付く prt_notes）
コードブロック
<p class="prt_notes">注記（※が付く prt_notes）</p>プレビュー
コードブロック
<figure class="prt_figure"><img src="image.jpg" alt="説明" /><figcaption class="caption">キャプション文言</figcaption></figure>XMLで画像参照（Tridion tcm:）
コードブロック（画像は Tridion コンポーネントIDで参照）
<figure class="prt_figure"><img src="tcm:106-1697294" alt="説明文" /><figcaption class="caption">キャプション</figcaption></figure>パターンA: 枠線付き汎用ボックス
プレビュー
コードブロック
<div class="prt_box">枠線付き汎用ボックス（prt_box）。解説文やリストを囲みます。</div>パターンB: 画像ボックス
プレビュー
コードブロック
<div class="prt_box_img"><img src="image.jpg" alt="" /></div>プレビュー
コードブロック
<div class="prt_inbox">中央寄せ・最大幅400pxの補足用ボックス。※などの注釈に。</div>パターンA: 上付き注釈用リスト
プレビュー
- 上付き注釈用リスト（prt_list_sup01）
コードブロック
<ul class="prt_list_sup01"><li>上付き注釈用リスト（prt_list_sup01）</li></ul>パターンB: 番号付き注釈文
プレビュー
- ※1 注釈文（prt_order_notes）
コードブロック
<ol class="prt_order_notes"><li>※1 注釈文（prt_order_notes）</li></ol>パターンC: 3カラムリスト
プレビュー
- 項目1
- 項目2
- 項目3
コードブロック
<ul class="prt_list_3cols"><li class="item">項目1</li><li class="item">項目2</li><li class="item">項目3</li></ul>パターンD: インデント番号リスト
プレビュー
- ① インデント番号リスト1
- ② インデント番号リスト2
コードブロック
<ol class="prt_list_indent"><li>① インデント番号リスト1</li><li>② インデント番号リスト2</li></ol>プレビュー
- 用語A
- 説明A
- 用語B
- 説明B
コードブロック
<dl class="prt_define_01"><dt>用語A</dt><dd>説明A</dd><dt>用語B</dt><dd>説明B</dd></dl>プレビュー
コードブロック
<ul class="prt_anchor"><li><a href="#sect_01">セクション1へ</a></li><li><a href="#sect_02">セクション2へ</a></li></ul>XMLでリンク（）
コードブロック（他ページへのリンクは Tridion 変数を使用）
<ul class="prt_anchor"><li><a href="/ss/products/autoid/codereader/xxx.jsp#sect_01">セクション1へ</a></li></ul>プレビュー
コードブロック
<div class="prt_3cols"><div class="item">カラム1</div><div class="item">カラム2</div><div class="item">カラム3</div></div>プレビュー
コードブロック
<div class="prt_flex"><div>左</div><div>右（space-between）</div></div>パターンA: シリーズ詳細リンク（prt_sect_cv 内・prt_series_btn）
プレビュー
コードブロック
<ul class="prt_sect_cv"><li class="button series q_contact"><a class="prt_series_btn type01" href="#"><span class="label">シリーズ詳細はこちら</span></a></li></ul>パターンB: PDFダウンロードボタン（prt_sect_cv 内・ss_download_btn）
プレビュー
コードブロック
<ul class="prt_sect_cv"><li class="button download"><a class="ss_download_btn type01 icon01" href="#"><span class="txt01">PDFでまとめてチェック</span><span class="img01">📄</span></a></li></ul>パターンA: 通常
プレビュー
- 用語
- 説明（：で区切って表示）
コードブロック
<dl class="prt_colon_def"><div><dt>用語</dt><dd>説明（：で区切って表示）</dd></div></dl>パターンB: インライン
プレビュー
- A
- 項目A
- B
- 項目B
コードブロック
<dl class="prt_colon_def inline"><div><dt>A</dt><dd>項目A</dd></div><div><dt>B</dt><dd>項目B</dd></div></dl>ページの末尾などで使用される標準的なQ&Aの構造です。sectionタグをネストさせて意味付けを行っています。
プレビュー
このページのまとめQ&A
Q. ここに質問が入りますか？
A. はい、ここに回答テキストが入ります。
Q. 複数のQ&Aがある場合は？
A. sectionタグを繰り返して配置します。
コードブロック
<section><h2 id="section_qa" class="prt_hdg2"><span>このページのまとめQ&A</span></h2><section><h3 class="prt_hdg3">Q. ここに質問が入りますか？</h3><p>A. はい、ここに回答テキストが入ります。</p></section><section><h3 class="prt_hdg3">Q. 複数のQ&Aがある場合は？</h3><p>A. sectionタグを繰り返して配置します。</p></section></section>枠線で囲まれたボックスの中に、見出しと定義リスト、画像を組み合わせた解説用のモジュールです。
プレビュー
注意が必要なバーコードラベル
- 金属面や銀色の下地
- 画像
- 反射を起こして読み取りにくくなります。
コードブロック
<div class="prt_box"><h4 class="prt_hdg_box1">注意が必要なバーコードラベルと周囲の環境</h4><dl class="prt_define_02"><dt>金属面や銀色の下地に印字されたバーコード</dt><dd class="prt_figure"><img src="image.jpg" alt="画像の説明" /></dd><dd>金属面や銀色の下地に印字されたバーコード、または、ラミネート加工されたバーコードなどは、表面に光沢があるため、レーザ光が鏡面反射を起こしてしまい、読み取りにくくなります。</dd></dl></div>プレビュー
以下の原理でバーコードの読み取りを行います。
- ①レーザ光を左右にスキャンを行ないます。
- ②その乱反射光を受光素子で受光します。
コードブロック
<p>以下の原理でバーコードの読み取りを行います。</p><div class="prt_box_img"><img src="flow-image.jpg" alt="手順の図解" /></div><ol class="prt_list_indent"><li>①レーザ光を左右にスキャンを行ないます。</li><li>②その乱反射光を受光素子で受光します。</li></ol>プレビュー
- どの工程でどんな使われ方をしているの？
- 業界別 活用事例はこちら
コードブロック
<dl class="prt_link_def"><dt>どの工程でどんな使われ方をしているの？</dt><dd><a href="#">業界別 活用事例はこちら</a></dd></dl>プレビュー
コードブロック
<ul class="pager"><li class="prev"><a class="js_match_height_pager" href="#"><span>バーコードの基本</span><strong>前のページタイトル</strong></a></li><li class="next"><a class="js_match_height_pager" href="#"><span>バーコードの読み取り</span><strong>次のページタイトル</strong></a></li></ul><p class="back_index"><a href="#">バーコード講座 トップへ戻る</a></p>XMLで使用するリンク記述（）
コードブロック
<ul class="pager"><li class="prev"><a class="js_match_height_pager" href="/ss/products/autoid/codereader/prev.jsp"><span>カテゴリ名</span><strong>前のページタイトル</strong></a></li><li class="next"><a class="js_match_height_pager" href="/ss/products/autoid/codereader/next.jsp"><span>カテゴリ名</span><strong>次のページタイトル</strong></a></li></ul><p class="back_index"><a href="/ss/products/autoid/codereader/">バーコード講座 トップへ戻る</a></p>プレビュー
コードブロック
<nav class="index_nav"><div class="nav_menu"><ul><li class="nav_item"><p class="ac_btn"><span class="label">カテゴリA</span></p><div class="nav_list"><ul><li><a href="#">ページ1</a></li></ul></div></li></ul></div></nav>プレビュー
コードブロック
<div id="header"><div class="inner"><div class="head_box"><p class="site_title"><a href="...">サイト名</a></p><p class="logo"><a href="...">KEYENCE</a></p></div><ul><li class="btn_download"><a href="...">資料ダウンロード</a></li><li class="btn_contact"><a href="..."><span>Webでの</span>ご相談</a></li><li class="btn_tel"><a href="tel:..."><span>お電話での</span>ご相談</a></li></ul></div></div>JSP includeで読み込む場合
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/header.jsp" />プレビュー
セクション1
本文…
コードブロック
<ul class="prt_anchor"><li><a href="#sect_01">セクション1</a></li></ul><section id="sect_01"><h2 class="prt_hdg2">見出し</h2><p>本文</p></section>プレビュー
コードブロック
<div id="cv_contact"><div class="fixed_wrapper"><div id="pagetop"><a href="#"></a></div><div class="inner"><ul><li class="catalog"><a href="...">資料ダウンロード</a></li><li class="contact"><a href="...">ご相談・お問い合わせ</a></li></ul></div></div></div>JSP includeで読み込む場合
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_bottom.jsp" />プレビュー
関連商品
- （商品カード）
コードブロック
<section class="prt_main_section"><h2 class="prt_hdg2"><span>関連商品</span></h2><ul class="c-product-list">…</ul></section>JSP includeで読み込む場合（XMLで使用）
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_001.jsp" />プレビュー
コードブロック
<div class="cv_area_wrap"><div class="flex_box"><div class="item asset_banner">…</div><div class="item asset_banner">…</div></div></div>XMLの記事ページで使用する body 内レイアウト。header・breadcrumb・container（main＋side）・cv_area・cv_right・cv_bottom・footer を include とタグリブで記述。
プレビュー
構成: header →
→ #container（main + #side）→ cv_area → cv_right → cv_bottom → footerコードブロック
<div class="wrapper"><jsp:include page="/ss/products/autoid/codereader/include/header.jsp" />
<div id="container"><div class="contents_wrap"><main id="main" class="main_contents"><h1 class="prt_hdg1">ページ見出し</h1><!-- ページ固有コンテンツ --><jsp:include page="/ss/products/autoid/codereader/include/related_products_001.jsp" /><ul class="pager"><li class="prev"></li><li class="next"><a class="js_match_height_pager" href="/ss/products/autoid/codereader/xxx.jsp"><span>カテゴリ名</span><strong>次のページタイトル</strong></a></li></ul><p class="back_index"><a href="/ss/products/autoid/codereader/">バーコード講座 トップへ戻る</a></p></main><div id="side" class="js_accnav"><jsp:include page="/ss/products/autoid/codereader/include/nav_menu.jsp" /><jsp:include page="/ss/products/autoid/codereader/include/left_bnr.jsp" /></div></div><div class="contents_wrap"><jsp:include page="/ss/products/autoid/codereader/include/cv_area_002.jsp" /></div></div><jsp:include page="/ss/products/autoid/codereader/include/cv_right_002.jsp" /><jsp:include page="/ss/products/autoid/codereader/include/cv_bottom.jsp" /><jsp:include page="/ss/products/autoid/codereader/include/footer.jsp" /></div>codereader で使用する JSP include を一覧化。コピーして XML/JSP に貼り付けて利用できます。パスは /ss/products/autoid/codereader/include/*.jsp です。
header.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/header.jsp" />footer.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/footer.jsp" />cv_bottom.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_bottom.jsp" />nav_menu.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/nav_menu.jsp" />left_bnr.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/left_bnr.jsp" />cv_area_001.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_area_001.jsp" />cv_area_002.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_area_002.jsp" />cv_area_003.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_area_003.jsp" />cv_area_bnr.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_area_bnr.jsp" />cv_right_001.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_right_001.jsp" />cv_right_002.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_right_002.jsp" />cv_right_003.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_right_003.jsp" />cv_right_004.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/cv_right_004.jsp" />download_btn_001.jsp ～ 013.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_001.jsp" />download_btn_002.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_002.jsp" />download_btn_003.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_003.jsp" />download_btn_004.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_004.jsp" />download_btn_005.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_005.jsp" />download_btn_006.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_006.jsp" />download_btn_007.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_007.jsp" />download_btn_008.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_008.jsp" />download_btn_009.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_009.jsp" />download_btn_010.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_010.jsp" />download_btn_011.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_011.jsp" />download_btn_012.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_012.jsp" />download_btn_013.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/download_btn_013.jsp" />series_btn_001.jsp
プレビュー
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/series_btn_001.jsp" />related_products_001.jsp
プレビュー
キーエンスのバーコードリーダ
-
SR-X シリーズ
AI搭載コードリーダ
AI搭載コードリーダ SR-Xシリーズは、従来体積比-72％の小型設計で、あらゆるコードを確実に読み取る高い読み取り性能を実現します。AIと最新デコーダにより、工程を経るごとに起こるコードの状態変化に追従し、前工程から後工程まで安定した読み取りが可能です。さらに、前後工程のコードリーダを繋げることで読み取り能力がUP、同一ネットワーク内のコードリーダの稼働状況・設定情報を一覧で見える化。万が一の読み取りエラーの際にも、最短で原因解析・対策が可能になります。オートフォーカス・フルオートチューニングを踏襲し、従来と同様、ボタン一つで簡単設定を実現します。IP67準拠の高い堅牢性と、世界各国の通信規格/安全規格に対応した汎用性を備えています。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_001.jsp" />related_products_002.jsp
プレビュー
キーエンスのバーコードリーダ
-
BL-1300 シリーズ
超小型デジタルバーコードリーダ
超小型デジタルコードリーダ BL-1300シリーズは、小さなボディにクラス初のデジタル処理エンジンを搭載。高速性・高分解能・高性能を実現したレーザ式のバーコードリーダです。クラス最速、毎秒1300スキャン/デコードを実現する高速なモータと処理エンジンにより、タクトが速いラインでも高速読み取りを実現します。また、最小0.08mmまでのナローバー幅に対応。汚れや印字乱れで発生するノイズを処理して極細コードも読み取ります。さらに新しいデコードプロセスを採用することで、難読コードもバーとスペースをエッジ検出で確実に抽出。デジタル補正でさまざまな状態のバーコードの高速かつ確実な読み取りを実現します。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_002.jsp" />related_products_003.jsp
プレビュー
キーエンスのバーコードリーダ
-
BL-700 シリーズ
長距離レーザ式バーコードリーダ
超ロングレンジ読み取りを実現した長距離レーザ式バーコードリーダ BL-700シリーズは、業界最高の角度特性を併せ持ちます。キーエンスのレーザーテクノロジーが実現したクラス最大1.2ｍのロングレンジを省スペースなボディで実現。深い読み取り深度で異なるワークサイズへの対応力も抜群です。また、独自のAGC（オートゲインコントロール）機能が、業界最高の角度特性を実現。搬送中ワークの角度がバラついていても±55°まで読み取り可能です。さらに、CPUにはクラス最速の700スキャン/デコード（秒）を実現する32bitRISCチップを採用。高速搬送されているワークのバーコードを超高速レスポンスで読み取ります。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_003.jsp" />related_products_004.jsp
プレビュー
キーエンスのハンディスキャナ
-
HR-X シリーズ
堅牢ハンディコードリーダ
堅牢ハンディコードリーダ HR-Xシリーズは、過酷な現場にも対応できる堅牢性（IP65/67G）と作業効率に直結する読み取り性能を追求した堅牢ハンディスキャナです。頑丈な本体は、過酷な製造現場から日々の蓄積ダメージが多い物流現場まで、あらゆる使用環境を考慮し、水滴、油の付着、落下、蓄積ダメージ、端子摩耗などの故障要因を徹底的に排除しました。また、マルチコア、AI搭載デコーダにより、難しいDPMコードの読み取り性能と距離や角度に対する柔軟性が格段に向上。どんなコードも瞬時に読み取り、“読めない”ストレスから解放されます。長時間の読み取り作業をより早く、本体寿命はより長く、現場の効率改善とコストダウンを実現します。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_004.jsp" />related_products_005.jsp
プレビュー
キーエンスのハンディスキャナ
-
HR-30 シリーズ
CCD式ハンディバーコードスキャナ
読み取りのレスポンスを向上したCCD式ハンディバーコードスキャナ HR-30シリーズは、ナローバー幅0.127ｍｍの細かいバーコードもかざすだけで簡単に読み取ることができます。高性能なCCDと赤色LEDを用いた1秒あたり200回の高速スキャンにより、抜群のレスポンスを実現。従来は読み取りが難しかった細かいバーコードもスムーズかつスピーディに読み取れるため、作業効率が大幅に向上します。USBタイプもラインナップし、パソコンに直接接続するだけで、バスパワーでの電源供給と読み取りデータの取り込みが可能。別途専用の電源を用意する必要がないため、簡単に導入や運用を開始することができます。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_005.jsp" />related_products_006.jsp
プレビュー
キーエンスのバーコードリーダ
-
SR-X シリーズ
AI搭載コードリーダ
AI搭載コードリーダ SR-Xシリーズは、従来体積比-72％の小型設計で、あらゆるコードを確実に読み取る高い読み取り性能を実現します。AIと最新デコーダにより、工程を経るごとに起こるコードの状態変化に追従し、前工程から後工程まで安定した読み取りが可能です。さらに、前後工程のコードリーダを繋げることで読み取り能力がUP、同一ネットワーク内のコードリーダの稼働状況・設定情報を一覧で見える化。万が一の読み取りエラーの際にも、最短で原因解析・対策が可能になります。オートフォーカス・フルオートチューニングを踏襲し、従来と同様、ボタン一つで簡単設定を実現します。IP67準拠の高い堅牢性と、世界各国の通信規格/安全規格に対応した汎用性を備えています。
-
BL-1300 シリーズ
超小型デジタルバーコードリーダ
超小型デジタルコードリーダ BL-1300シリーズは、小さなボディにクラス初のデジタル処理エンジンを搭載。高速性・高分解能・高性能を実現したレーザ式のバーコードリーダです。クラス最速、毎秒1300スキャン/デコードを実現する高速なモータと処理エンジンにより、タクトが速いラインでも高速読み取りを実現します。また、最小0.08mmまでのナローバー幅に対応。汚れや印字乱れで発生するノイズを処理して極細コードも読み取ります。さらに新しいデコードプロセスを採用することで、難読コードもバーとスペースをエッジ検出で確実に抽出。デジタル補正でさまざまな状態のバーコードの高速かつ確実な読み取りを実現します。
-
BL-700 シリーズ
長距離レーザ式バーコードリーダ
超ロングレンジ読み取りを実現した長距離レーザ式バーコードリーダ BL-700シリーズは、業界最高の角度特性を併せ持ちます。キーエンスのレーザーテクノロジーが実現したクラス最大1.2ｍのロングレンジを省スペースなボディで実現。深い読み取り深度で異なるワークサイズへの対応力も抜群です。また、独自のAGC（オートゲインコントロール）機能が、業界最高の角度特性を実現。搬送中ワークの角度がバラついていても±55°まで読み取り可能です。さらに、CPUにはクラス最速の700スキャン/デコード（秒）を実現する32bitRISCチップを採用。高速搬送されているワークのバーコードを超高速レスポンスで読み取ります。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_006.jsp" />related_products_007.jsp
プレビュー
キーエンスのハンディスキャナ
-
HR-X シリーズ
堅牢ハンディコードリーダ
堅牢ハンディコードリーダ HR-Xシリーズは、過酷な現場にも対応できる堅牢性（IP65/67G）と作業効率に直結する読み取り性能を追求した堅牢ハンディスキャナです。頑丈な本体は、過酷な製造現場から日々の蓄積ダメージが多い物流現場まで、あらゆる使用環境を考慮し、水滴、油の付着、落下、蓄積ダメージ、端子摩耗などの故障要因を徹底的に排除しました。また、マルチコア、AI搭載デコーダにより、難しいDPMコードの読み取り性能と距離や角度に対する柔軟性が格段に向上。どんなコードも瞬時に読み取り、“読めない”ストレスから解放されます。長時間の読み取り作業をより早く、本体寿命はより長く、現場の効率改善とコストダウンを実現します。
-
HR-30 シリーズ
CCD式ハンディバーコードスキャナ
読み取りのレスポンスを向上したCCD式ハンディバーコードスキャナ HR-30シリーズは、ナローバー幅0.127ｍｍの細かいバーコードもかざすだけで簡単に読み取ることができます。高性能なCCDと赤色LEDを用いた1秒あたり200回の高速スキャンにより、抜群のレスポンスを実現。従来は読み取りが難しかった細かいバーコードもスムーズかつスピーディに読み取れるため、作業効率が大幅に向上します。USBタイプもラインナップし、パソコンに直接接続するだけで、バスパワーでの電源供給と読み取りデータの取り込みが可能。別途専用の電源を用意する必要がないため、簡単に導入や運用を開始することができます。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_007.jsp" />related_products_008.jsp
プレビュー
キーエンスのバーコードリーダ
-
BL-180 シリーズ
超小型CCD式バーコードリーダ
超小型CCD式バーコードリーダ BL-180シリーズは、名刺半分のサイズでさまざまな装置への組み込みを実現します。超小型ながら、キーエンス独自の光学技術で80mmまでの読み取り幅に対応すると同時に、0.125mmナローバーも安定して読み取り可能です。また、読み取り深度は±10mm。振動やワークのバラつきに強く、安定した読み取りを実現します。さらに、世界ではじめて安定表示機能を搭載しました。本体の3色LEDが点灯することでステイタスを可視化し、取り付け調整時の位置決めを簡単・スピーディに。運用中も読み取り率やデコード回数を出力できるため、読み取りエラーを未然に防止することができます。
コードブロック
<jsp:include page="/ss/products/autoid/codereader/include/related_products_008.jsp" />