HTML - CSS - display レンダリングボックスの指定

1.　概要

2.　box は使わない方がいい

3.　display: flex での中央寄せ

4.　いろいろ試してみる

1.　概要

　「display - CSS: カスケーディングスタイルシート | MDN」を読むと「要素に使用されるレンダリングボックスの種類を指定します。」と書いてあります。
　そもそもレンダリングってなんだ？
　「ウィキペディア - レンダリング (コンピュータ)」によれば「データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。」ってこれまた正に抽象的。
　まぁ、ひとつの塊（かたまり）としておきましょ。
　でまぁ


display: 値;


　と書きます。
　本ページは、下記のサイトを参考にさせていただきました。

「display - CSS: カスケーディングスタイルシート | MDN」
「HTML5 & CSS3 リファレンス - display プロパティ（要素の表示形式）」


　参考サイトによれば


display: none;				/* ボックスを生成しない	*/
display: inline;			/* インライン・ボックスとして表示	*/
display: block;				/* ブロック・ボックスとして表示	*/
display: inline-block;		/* 置換要素と同様に，それ自身は単独のインライン・ボックスとして配置される
							   ブロック・ボックスとして表示	*/
display: list-item;			/* １個以上のブロック・ボックスと マーカー・ボックス として表示	*/
display: run-in;			/* 最終的に表示形式がインライン・レベルかブロック・レベルかに応じて
							   インライン・ボックスかブロック・ボックスのどちらかとして表示	*/
display: compact;			/* 最終的な表示形式に応じて，ブロック・ボックスか マーカー・ボックス のどちらかとして表示	*/
display: table;				/* HTML の <table> 要素と同じように動作します */


　とのことです。
　なんか、他にもいっぱいありますが、「未詳（策定予定）」とかってなっています。
　「Visual Studio Code」で、「.scss」を書いていると他にもいっぱい要素があるんじゃけどね。

　ワタクシ的には、「table」が、結構、使い勝手が良いです。

2.　box は使わない方がいい

　実は、これが書きたかった。

　別章で書いている gulp を使用して .scss を .css へ変換しようとしたら


$ gulp ターゲット
[08:03:13] Using gulpfile /パス/gulpfile.js
[08:03:14] Starting 'ターゲット'...
[08:03:14] Finished 'ターゲット' after 17 ms
[08:03:14] gulp-autoprefixer:
  autoprefixer: /パス/ターゲット.css:210:3: You should write display: flex by final spec instead of display: box


　でなこと言われちゃいまして・・・。


		display: box;


　がいけないらしい。
　これは古い書き方だそうで、同じ効果を得たいなら


		display: flex;


　と書きなさいということだそうです。

3.　display: flex での中央寄せ

　「display: frex;」で文字を中央寄せにしようと「text-align: center;」下記のように記述しても


div.center
{
	all: initial;
	display: flex;
	text-align: center;
	border: double 1px black;
	width: 50%;
	padding: 1em 1em 1em 1em;
	margin-left: auto;
	margin-right: auto;
}


　ご覧のように中央に寄らないわけです（実際の HTML の記述はブラウザのソース表示機能でご確認ください）。

中央に寄せたいんだな

　「display: frex;」で文字を中央寄せにするには「align-items: center;」を使うんですと。
　ちなみに上下中央は「justify-content: center;」。


div.center
{
	all: initial;
	display: flex;
	align-items: center;
	justify-content: center;
	border: double 1px black;
	width: 50%;
	padding: 1em 1em 1em 1em;
	margin-left: auto;
	margin-right: auto;
}

中央に寄っているはず

　ブラウザによってはベンダープレフィックスが必要になりますが・・・。
　Firefox 61.0 であれば上記はくっきり中央寄せで表示されます。

4.　いろいろ試してみる

　わたしは、「<kbd></kbd>」を表示するのに、「WordPress」の「simplicity2」の「.keyboard-key」をパクって使っているのですが、なかなか思うように表示できない・・・。

　基本形は


kbd
{
	background-color: #f9f9f9;
	background-image: -moz-linear-gradient(center top , #eee, #f9f9f9, #eee);
	border: 1px solid #aaa;
	border-radius: 2px;
	box-shadow: 1px 1px 1px #ddd;

	font-family: 'Noto Sans Mono CJK JP', 'Noto Sans JP', 'Noto Sans Japanese', 'ＭＳ ゴシック', sans-serif;
	color: black;

	font-size: 0.7;
	padding-left:  0.2em;
	padding-right: 0.2em;
	padding-top: -1px;
}


　ちゅう書き方をしていて、Enter みたいに表示されます。
　これが、２行表示したり、特に、「<table></table>」内に表示すると思うように表示されない。
　でまぁ、「display」要素をつかってうまいこといかないか、試してみます。

　※１　改行なし
　※２　Ctrl+C の前に <br> を１ついれています。
　※３　Ctrl+C の前に <br> を２ついれています。

　まぁ、これは、「.scss」をコンパイルしていないので、ブラウザによって見え方が異なるかと思います。
　使い物になりそうなのが、「flexbox」なのですが、改行が入ると行間がうまくいかない。

　困ったなぁ。
　いい方法がないかなぁ・・・。