BOOTSTRAPのコード(jumbotron,container)
【今日調べたこと】 ２０２０年７月14日
Crayon Syntax Highlighter というプラグインを入れて、ソースコードを表記させようと思ったが、プラグインが正常に動作しなかった。
Enlighter – Customizable Syntax Highlighter というプラグインを入れてみた。
saruwaka さんサイトでは、pre タグを利用して、そのままhtml や、cssのコードを書いている。
[box class=”glay_box” title=”preタグ”]<pre>～</pre>で囲まれた範囲のソースは 半角スペース・改行などがそのまま表示される。<pre>タグは、HTMLソースやプログラムのソースコードをそのまま表示したり、 アスキーアートを表示する場合などに使用される。[/box]
BOOTSTRAPのコード：ジャンボトロン、コンテナー
参考にしたサイト
https://www.hts-web.biz/bootstrap-jumbotron/
ジャンボトロン（jumbotron）は、画面全幅の書式。
コンテナー（container）は、中央寄せにする書式。
div要素class「jumbotron」を外側、div要素class「container」を内側にすると、画面全幅の背景の中に、コンテナー部分が中央寄せで表示される。
<div class="jumbotron"> <div class="container"> <h1>ジャンボトロンの画面全幅の書式</h1> 「ジャンボトロン」とは、元はソニーが開発・製作していた大型映像表示装置の名称。 転じて英語圏では、大型表示ディスプレイを指す一般名詞としても使われている。 </div> </div>
背景に画像を表示させることもできる。
https://tonari-it.com/bootstrap-container/
を、次に勉強する。
containerには左右に余白が15px設定されている。
これはブラウザの横幅サイズが何であろうと変わらない。