nikei BPnet Special nikkeiBPnet

日経BP標準HTMLタグ利用例

標準タグ以外を利用すると、スマホ表示などで乱れる場合があります

上部に表示例、下部にHTMLコードを記載しました

リード文

リードリードリードリードリードリードリードリードリード

HTMLコード
<p class="bplead">リードリードリードリードリードリードリードリードリード</p>

質問文

質問のテキスト質問のテキスト質問のテキスト

HTMLコード
<p class="bpquestion"> 質問のテキスト質問のテキスト質問のテキスト</p>

回答文

回答のテキスト回答のテキスト回答のテキスト

HTMLコード
<p class="bpanswer"> 回答のテキスト回答のテキスト回答のテキスト</p>

中見出し(全角35文字以内)

HTMLコード
<h3>中見出し(全角35文字以内)</h3>

小見出し(全角40文字以内)

HTMLコード
<h4>小見出し(全角40文字以内)</h4>

改ページ

HTMLコード
<!-- PageBreak -->

プロフィール

氏名(しめい)
肩書き
プロフィールのテキストをここに入れる。
HTMLコード
<div class="bpprofile">
<div class="bpprofile_profile">
<span class="bpprofile_name">氏名(しめい)</span><br>
<span class="bpprofile_position">肩書き</span>
</div>
<div class="bpprofile_text">プロフィールのテキストをここに入れる。 </div>
</div>

プロフィール(顔写真付)

氏名(しめい)
肩書き肩書き
肩書き肩書き
氏名(しめい)プロフィールのテキストをここに入れる。 プロフィールのテキストをここに入れる。 プロフィールプロフィールプロフィールプロフィールプロフィール プロフィールプロフィールプロフィールプロフィールプロフィール
HTMLコード
<div class="bpprofile_photo">
<div class="bpprofile_profile">
<span class="bpprofile_name">氏名(しめい)</span><br>
<span class="bpprofile_position">肩書き</span>
</div>
<div class="bpprofile_text">
<img src="顔写真のファイル名" width="顔写真の横幅" height="顔写真の高さ" alt="氏名(しめい)">
プロフィールのテキストをここに入れる。
</div>
</div>

インタビュー用プロフィール

肩書き
氏名(しめい)
プロフィールのテキストをここに入れる。
HTMLコード
<div class="bpinterview">
<div class="bpinterview_profile">
<span class="bpinterview_position">肩書き</span><br>
<span class="bpinterview_name">氏名(しめい)</span>
</div>
<div class="bpinterview_text">プロフィールのテキストをここに入れる。 </div>
</div>

囲み記事1

記事タイトルをここに入れる。
記事本文をここに入れる。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
HTMLコード
<div class="bpbox">
<div class="bpbox_title">記事タイトルをここに入れる。</div>
<div class="bpbox_text">記事本文をここに入れる。
</div>
</div>

囲み記事2

記事タイトルをここに入れる。
記事本文をここに入れる。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
HTMLコード
<div class="bpbox2">
<div class="bpbox_title">記事タイトルをここに入れる。</div>
<div class="bpbox_text">記事本文をここに入れる。
</div>
</div>

囲み記事3

記事タイトルをここに入れる。
記事本文をここに入れる。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
HTMLコード
<div class="bpbox3">
<div class="bpbox_title">記事タイトルをここに入れる。</div>
<div class="bpbox_text">記事本文をここに入れる。
</div>
</div>

囲み記事4

記事タイトルをここに入れる。
記事本文をここに入れる。あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
HTMLコード
<div class="bpbox4">
<div class="bpbox_title">記事タイトルをここに入れる。</div>
<div class="bpbox_text">記事本文をここに入れる。
</div>
</div>

シンプル囲み

記事本文をここに入れる。ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
HTMLコード
<div class="bpframe">
<div class="bpbox_text"> 記事本文をここに入れる。
</div>
</div>

コードリスト(灰色)

function search() {
   // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成
  try {
    xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
  } catch(e) {
    xmlReq = new XMLHttpRequest();
  }
   // サーバーからの応答時の処理を定義(結果をページへ反映)
  xmlReq.onreadystatechange = function() {
    var msg = document.getElementById("result");
    if (xmlReq.readyState == 4) {
if (xmlReq.status == 200) {
HTMLコード
<div class="bpcode">
<pre><code>ここにコードを入れるここにコードを入れる
ここにコードを入れるここにコードを入れるここにコードを入れる
ここにコードを入れるここにコードを入れるここにコードを入れる
ここにコードを入れるここにコードを入れるここにコードを入れる</code></pre>
</div>

コードリスト(緑)

function search() {
   // 非同期通信を行うためのXMLHttpRequestオブジェクトを生成
  try {
    xmlReq = new ActiveXObject("Microsoft.XMLHTTP");
  } catch(e) {
    xmlReq = new XMLHttpRequest();
  }
   // サーバーからの応答時の処理を定義(結果をページへ反映)
  xmlReq.onreadystatechange = function() {
    var msg = document.getElementById("result");
    if (xmlReq.readyState == 4) {
if (xmlReq.status == 200) {
HTMLコード
<div class="bpcode2">
<pre><code>ここにコードを入れるここにコードを入れる
ここにコードを入れるここにコードを入れるここにコードを入れる
ここにコードを入れるここにコードを入れるここにコードを入れる
ここにコードを入れるここにコードを入れるここにコードを入れる</code></pre>
</div>

訂正文

■変更履歴
○○○で×××としていましたが,●●●です。お詫びして訂正します。本文は修正済みです。 [20xx/xx/xx xx:xx]
HTMLコード
<div class="bpteisei_box">
<div class="bpteisei">
<b>■変更履歴</b><br>
○○○で×××としていましたが,●●●です。お詫びして訂正します。本文は修正済みです。 [20xx/xx/xx xx:xx]
</div>
</div>

用語解説

スマートグリッド:
 発電事業者の発電施設から,送電,変電,そして個別の需要家(企業や工場,一般家庭)に至るまで,通信/IT技術を積極的に活用して各種の課題を解決することを目指したコンセプトを指す。
HTMLコード
<div class="bpword">
<b>スマートグリッド:</b><br>
 発電事業者の発電施設から,送電,変電,そして個別の需要家(企業や工場,一般家庭)に至るまで,通信/IT技術を積極的に活用して各種の課題を解決することを目指したコンセプトを指す。
</div>

注釈

*1 注釈のテキスト注釈のテキスト注釈のテキスト
HTMLコード
<div class="bpannotation">*1 注釈のテキスト注釈のテキスト注釈のテキスト</div>

参考文献

■参考文献
ケビン・フライバーグ , ジャッキー・フライバーグ著,小幡照雄訳,『破天荒!サウスウエスト航空―驚愕の経営』,日経BP社,1997年.
HTMLコード
<div class="bpreference">
<b>■参考文献</b><br>
ケビン・フライバーグ , ジャッキー・フライバーグ著,小幡照雄訳,『破天荒!サウスウエスト航空―驚愕の経営』,日経BP社,1997年.
</div>
出展企業情報一覧へ