メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

コード(Code)

Bootstrapでのインラインコードおよびマルチラインブロックを表示するための解説と例。

コード表示(Inline code)

埋め込みのコードスニペットを <code> で囲む。HTMLタグの< >はエスケープすること。

見本

プログラムコードを埋め込むには <code> を使います。

コードにリンクをつけると <code> のようになります。

設定例
<p>プログラムコードを埋め込むには <code>&lt;code&gt;</code> を使います。</p>
<p>コードにリンクをつけると <a href="#"><code>&lt;code&gt;</code></a> のようになります。</p>

【設定】

  • プログラムコードを埋め込むためには、<code> タグを使用
  • <code> タグ内で <, >, & を使うときは、それぞれ &lt;, &gt;, &amp; にエスケープ処理をする

【注意】

  • <a>(リンク)内にあるときには、スタイルはフォントの大きさと字体以外はリセットされる。

【Bootstrap3.xとの変更箇所】

  • 文字色(#bd4147$pink)、文字サイズ(90%87.5%)の変更と背景の設定がなくなった(v4.0.0-beta.3)

 

コードブロック(Code blocks)

※コードブロックでないベースの整形済みテキストのスタイルはRebootに掲載。

複数行のコードには <pre> を使用。再度、正しくレンダリングするために、コード内の< >をエスケープすること。

見本
<p>ここにサンプルテキスト...</p>
<p>ここにサンプルテキストの別の行...</p>
設定例
<pre><code>&lt;p&gt;ここにサンプルテキスト...&lt;/p&gt;
&lt;p&gt;ここにサンプルテキストの別の行...&lt;/p&gt;</code></pre>

必要に応じて .pre-scrollable クラスを追加すれば、最大の高さが340pxに設定され、y軸スクロールバーが提供される。

見本
テキストが長くなる場合は、スクロールできるようにしています。
これだと表示がダラダラ長くなることもありません。

【IT用語辞典バイナリより引用】

インターネットとは、TCP/IPを通信プロトコルとして世界中のコンピュータあるいはコンピュータネットワークを相互に接続している通信網のことである。

インターネットでは、各コンピュータに割り当てられたIPアドレスと呼ばれる識別番号を元に、ネットワークに接続されたコンピュータを一意に識別し、アクセスすることを可能としている。ただし、IPアドレスは単なる数字の羅列であって人間が識別することは容易でないため、IPアドレスをドメイン名へと変換して英数字などの文字情報で可能にするドメインネームシステム(DNS)が併用されている。

インターネットそのものについて特定の統括者や運営母体はないが、IPアドレスやドメイン名などの管理はICANNなどの管理団体が、技術や仕様の標準化はIETFが指揮をとっている。

インターネットには自由に参加できるが、利用するためにはインターネットの通信網に接続する必要がある。データセンターやインターネットサービスプロバイダ(ISP)各社は、主にインターネットエクスチェンジ(IX)経由で相互接続している。一般ユーザーはISPと契約して、電話回線やADSL回線などを用いた通信をインターネットに接続させることにより、各家庭からのインターネット接続を実現している。

インターネットは通信プロトコルにTCP/IPを用いているが、ネットワーク構造のより上位に他の通信プロトコルを組み合わせることで、電子メールやファイル転送などのような、さまざまな通信サービスが提供されている。例えばWWWには主にHTTPが用いられており、電子メールにはSMTPやPOP、IMAPなどが、ネットニュースにはNNTP、インスタントメッセージングにはXMPPなどのプロトコルが用いられている。

ちなみに、WWWとインターネットの違いを挙げるとすれば、以下のように言うことができる。すなわち、WWWは、HTMLなどの文書フォーマットを用いてWebページの表現やWebページ同士のハイパーリンクを実現するシステムであり、電子メールと同様、インターネット上で実現されている仕組みの一種である。これに対して、インターネットは、WWWのシステムの土台となっているネットワークそのもののことである。

インターネットは誰に対しても開かれたネットワークである。インターネットの技術を応用して、LANなどの閉じたネットワーク環境として構築されたネットワークは、イントラネットと呼ばれる。インターネットとイントラネットの接続点には、外部からの悪意あるアクセスを防止する目的で、ファイヤーウォールなどが設置されることが多い。

インターネットの技術の発端は、1960年代終わりに米国国防総省によって構築されたコンピュータネットワークである「ARPAnet」が原型とされている。その後、学術研究を目的とするコンピュータネットワーク「NSFNet」が登場し、学術機関を中心としてネットワークが広がっていった。当初は電子メールや電子掲示板(BBS)が行われていたが、1991年にCERNからWWWの仕組みが発表され、90年代を通じて爆発的に普及していった。

日本では、1984年に村井純を中心とした学術機関のネットワーク「JUNET」が構築され、1988年にはWIDEプロジェクトが発足、1990年代中盤に至ると商用のISPも多数登場して一般家庭への普及が急速に進んだ。

今日、インターネットはPCだけでなくモバイルや生活家電、家庭用ゲーム機などからも接続可能となっており、日常生活への浸透がますます進んでいる。
設定例
<pre class="pre-scrollable"><code>
テキストが長くなる場合は、スクロールできるようにしています。
これだと表示がダラダラ長くなることもありません。

...
</code></pre>

【設定】

  • 複数行のコードを表示するためには、<pre><code> タグを使用
  • <pre><code> 内で <, >, & を使うときは、それぞれ &lt;, &gt;, &amp; と記述してエスケープ処理をする
  • pre.pre-scrollable にすると、表示の高さが最大340pxになり、縦方向のスクロールバーが表示される

 

変数(Variables)

変数を示すには、<var> タグを使用。

見本
y = mx + b
設定例
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

【設定】

  • <var> タグを使用(基本的に斜体で表示)

【注意】

  • ブラウザによっては123やabcなど英数字のみ適用

 

ユーザー入力(User input)

<kbd> を使用して、通常キーボードから入力されるインプットを示す。

見本

ユーザーが入力した内容を表示するにはユーザー入力のようにします。
タグを入れ子にするとユーザー入力のようになります。

設定例
ユーザーが入力した内容を表示するには<kbd>ユーザー入力</kbd>のようにします。
タグを入れ子にすると<kbd><kbd>ユーザー入力</kbd></kbd>のようになります。

【設定】

  • キーボードから入力された入力を示すためには、<kbd> タグを使用
  • <kbd> タグを入れ子にすると太字で表記

 

サンプル出力(Sample output)

プログラムからのサンプル出力を表示するには、<samp> タグを使用。

見本
This text is meant to be treated as sample output from a computer program.

※標準の段落文(参考)

This text is meant to be treated as sample output from a computer program.

設定例
<samp>This text is meant to be treated as sample output from a computer program.</samp>

【設定】

  • <samp> タグを使用(基本的に等幅フォントで表示)

【注意】

  • ブラウザによっては123やabcなど英数字のみ適用