インラインとは？　display: inline-grid とは？?

grid layout

段落のインライン

2023年2月20日

─ Guide to page sections ─

1.displayプロパティの使い方
2.display: inline-grid; って何？
3.行の中の一部のグループの装飾と配置を grid でコントロールする
4.インラインの背景色と余白
5.CSSの論理プロパティというパラダイムシフト

display: inline-grid; は未だ試したことがない。インラインとは、段落に挟み込むようなグループである、という認識しかない。この辺りで、インライン関連をしっかりと確認しておこうと思う。

First

displayプロパティの使い方

最初に、CSSのdisplayプロパティの要旨は要素の表示形式を変えるということだ。表示形式は次の三種類である。

ブロックレベル要素
インライン要素
インラインブロック要素

その次の要旨がその子要素のために使用されるレイアウトであり、グリッドレイアウトなどがこれに当たる。

inline-block

表示形式について例えば、インラインブロックは要素を横並びにして、横幅・高さや余白を調整したい場面で使用する。デフォルトの幅は、要素の中身の幅に合わせた大きさになる。インラインレベルなので、要素の前後で改行せずに表示される。

内部の表示はブロックボックスと同じ扱いになるため、指定した横幅で改行する。

block ─ inline

ブロック要素インライン要素

これはブロック要素(<p>)の中にインライン要素(<span> など)が収まる段落である。インライン要素に高さや幅は指定できない。左右の余白は指定できる。

block ─ inline-block

ブロック要素インラインブロック要素

これはブロック要素(<p>)の中にインラインブロック要素が収まる段落である。インラインブロック要素には高さや幅を指定できる。上下左右の余白も指定できる。縦方向の中央配置は height と line-height を同じサイズで指定すると解決する。

block、inline、inline-blockの違い

要素の表示形式

block

inline

inline-block

並び方

縦並び

横並び

幅・高さの指定

可

不可

可

余白の指定

可

左右可

可

配置の指定

不可

親要素に指定

(上の表組は「display: inline-grid;」で作成したものだ)

Second

display: inline-grid; って何？

display: grid

display: inline-grid

要素に対して display: grid を指定すると、グリッドの枠がウィンドウ幅いっぱいに表示されブロック要素の表示をする。

display: inline-grid を指定すると、グリッドの枠をインラインで表示する。図で示すと正に上図のようになる。

インラインとは「ラインの中」、すなわち行の中の一部のグループを指すということである。

実際に html と CSS を組んで検証してみる。以下に通常の段落を <h2> と <p> タグを使って用意した。それを <article> で覆った。

そこで <article> を置いただけのもの、<article> に inline-grid を指定したもの、grid を指定したものを比較した。

(1). <article> を置いただけのケース。

<!-- html -->
<article>
  <h2 style="font-weight: bold;	padding: 16px; margin: 5px; font-size: 16px; background-color: rgba(245, 66, 245,.1);">css grid</h2>
  <p style="padding: 16px; margin: 5px; font-size: 16px; background-color: #f7f7f7;">グリッドコンテナーを作成するには、要素に対して display: grid か display: <span style="font-weight: bold;">inline-grid</span> を指定する。グリッドコンテナを作成すると、直接の子要素がすべてグリッドアイテムへと変わる。</p>
</article>

css grid

<p> タグを使ってここに文字列を入力してみる。CSS で背景色を設定している。

タイトルと文章が縦に並ぶ、良く使い慣れた構文である。

(2). <article> をグリッドコンテナにして display: inline-grid を設定したケース。

css grid

グリッドコンテナに grid-template-columns: 1fr 5fr; を指定している。

<h2> 対 <p> を 1 : 5 に設定、正確に 1 : 5 に分離されている。

(3). <article> をグリッドコンテナにして display: grid を設定したケース。

css grid

inline-grid; の部分を grid に替えて指定している。

grid-template-columns: 1fr 5fr; を設定、正確に 1 : 5 に分離されている。

比較した結果、(2)も(3)も同じ表示だった。

<div> タグで構成されたもの。グリッドコンテナに「display: grid;」または「display: inline-grid;」を設定して試してみる。この場合の結果は同じだった。

item1

item2

item3

item4

<!-- html -->
<div class="container-2">
  <div class="GridItem1">item1</div>
  <div class="GridItem2">item2</div>
  <div class="GridItem3">item3</div>
  <div class="GridItem4">item4</div>
</div>

従来、HTML (Hypertext Markup Language) の要素は「ブロックレベル」要素と「インライン」要素に分類されていた。インライン要素は、コンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有するものだ。

一般に、インライン要素はデータや他のインライン要素のみを含む。ブロック要素をインライン要素の中に置くことはできない。既定では、インライン要素は文書の流れの中で強制的に新しい行から始まることはない。一方、ブロックレベル要素は一般的に改行が行われる (ただし、これは CSS を使って変更することができる)。ブロック要素とインライン要素は HTML5 では定義されなくなり、代わりにコンテンツカテゴリが使用される。

Third

行の中の一部のグループの装飾と配置を grid でコントロールする

<ul class="cercle-back">
  <li data-css="orange">A</li>
  <li data-css="dodgerblue">B</li>
  <li data-css="seagreen">C</li>
  <li data-css="deeppink">D</li>
</ul>

ul.cercle-back {
  display: inline-grid;
  gap: 4px;
}

ul.cercle-back li {
  list-style:none;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  line-height: 32px;
  display: grid;
  place-content: center;
}
ul.cercle-back li[data-css="orange"] {
  background-color: orange;
}

<div class="circle">
  <div data-css="orange">E</div>
  <div data-css="dodgerblue">F</div>
  <div data-css="seagreen">G</div>
  <div data-css="deeppink">H</div>
  <div data-css="orange">I</div>
</div>

.circle {
  display: grid;
  grid-template-columns: 32px 32px 32px 32px 32px;
  grid-auto-rows: auto;
  gap: 4px;
  margin-top: 4px;
  margin-left: 40px;
}

div[data-css="orange"] {
  background-color: orange;
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  line-height: 32px;
  display: inline-grid;
  place-content: center;
}
div.cercle > div {
  list-style:none;
  color: #fff;
}

丸い背景色の中心にテキストを配置する。配置するプロパティが display: grid(または inline-grid ); である。以下が示す通り、段落の中で使っていける便利なものだ。

縦一列に並んだ A ～ D は <ul> <li> で組んだ子要素を display: inline-grid; のグリッドアイテムにした。そして、<li> を「display: grid; place-content: center;」を使って丸い背景の中心に配置した。

横一列に並んだ E ～ I は <div> で組んだ子要素を didplay: grid; を使ってグリッドアイテムにした。そして子要素を「display: inline-grid;」を使って丸い背景を作り色を指定し「place-content: center;」を使ってテキストを中心に配置した。

<p>縦一列に並んだ <span class="cercle-1">A</span> ～ <span class="cercle-2">D</span> は <!-- 略 -->。</p>

.cercle-1 {
  background-color: orange;
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 16px;
  line-height: 32px;
  display: inline-grid;
  place-content: center;
}

Join use for the big sale on Saturday!

<p class="ib">Join use for the big <span class="sale">sale</span> on Saturday!</p>

.ib span {
  display: inline-block;
}
span.sale {
  background: deeppink;
  color: #fff;
  text-transform: uppercase;
  padding: 0.2em 0.8em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  transform: rotate(-8deg);
}

<ul> <li> に display: inline-block; を使った横一列の例。

one
two
three

<ul class="list">
  <li>one
  <li>two
  <li>three
</ul>

ul.list li {
  display: inline-block;
  color: #fff;
  padding: 5px;
  background: #ef5350;
}

Fourth

インラインの背景色と余白

タイトルの背景色と余白をコントロールする

<h2 class="title">
  <span class="text">タイトルの背景色と余白を</span>
  <span class="text">コントロールする</span>
</h2>

.title {
  text-align: center; 
}
.text { 
  display: inline-block; 
  background-color: #ef5350;
  color: #fff;
}

タイトルの背景色と余白を
コントロールする

テキストの周辺に余白を均等に持たせバランスを調整するために、改行と line-height; を加えた。

<h2 class="title text-height">
  <span class="text-4">タイトルの背景色と余白を</span><br>
  <span class="text-5">コントロールする</span>
</h2>

.title {
  text-align: center; 
}
.text-height {
  line-height: 1.1;
}
.text-4 { 
  display: inline-block; 
  background-color: #ef5350;
  color: #fff;
  padding: 8px;
  line-height: 1.1;
}
.text-5 { 
  display: inline-block; 
  background-color: #ef5350;
  color: #fff;
  padding: 0 8px 8px 8px;
  margin-top: 0;
  line-height: 1.1;
}

行の高さと vertical-align: baseline;

#text-range-item p {
  width: 100%;
  font-weight: 100;
  vertical-align: baseline;
  background-color: rgba(255,69,0,.3);
  border: none;
  padding: 0;
  margin: 0;
  font-size: 50px; 
  display: inline-block; 
  line-height: 80px;
  height: 80px;
}

疾風怒濤 s

white-space: nowrap;

どうしても折り返しなしの1行で表示したい。その場合は「white-space: nowrap;」を使用して解決する。特に表の見出しなどがこれに該当するだろう。

inline elements have only their horizontal padding and margin respected.inline elements inline-block elements have their horizontal padding and margin respected. Yet they still behave like inline elements.

inline elements have only their horizontal padding and margin respected.inline-block elements inline-block elements have their horizontal padding and margin respected. Yet they still behave like inline elements.

::first-letter / ::first-line

My heading

Flower Travellin' Band is a Japanese rock band that debuted in 1970.

It was planned to serve as the opening act for the Rolling Stones to come to Japan in January 1973, but the visit to Japan was canceled and a big chance was lost. In February 1973, the album "Make Up" was released.

My heading

Flower Travellin' Band is a Japanese rock band that debuted in 1970.

Fifth

CSSの論理プロパティというこれからのパラダイムシフト

論理的プロパティは方向を定義し、これは対応する物理的なプロパティと相対的に等価になる。論理プロパティと値は、ブロックとインラインという抽象的な用語を使用して、流れに対する方向を記述する。

グリッドレイアウトのデフォルトの動作は startである。コンテナーに align-content を追加し、値を end に設定すると、トラックは、すべてブロック方向の中でグリッドコンテナーが終わるラインに移動する。

物理的な値を論理的、またはフローやその反対に関連したものへの対応付けを定義する。例えば start と end は left と right または top と bottom に対応する。

CSSでマージンを与える際に、従来は margin-left、margin-rightのように物理プロパティを使用してきたが、CSS GridやFlexboxで使われている論理プロパティを今後は使用する機会も増えてくる。

inline は英語などの言語において、水平方向のことだ。startは左から右へのレイアウト（英語など）では左を示し、end は右を示す。

LTRの場合、startは左側にあり、endは右側にある。RTLの場合、その逆になる。論理プロパティを使えば、CSSを最小化することができる。

CSS FlexboxとGridはデフォルトで、どちらも論理的だ

ドキュメントの方向に基づいて自動的に反転する。CSS FlexboxとGridを使用すれば、多言語に対応したグリッドやコンポーネントを構築するために必要な労力は最小限に抑えることができる。

─ Guide to page sections ─

displayプロパティの使い方

inline-block

block ─ inline

block ─ inline-block

block、inline、inline-blockの違い

display: inline-grid; って何？

css grid

css grid

css grid

行の中の一部のグループの装飾と配置を grid でコントロールする

インラインの背景色と余白

タイトルの背景色と余白を コントロールする

タイトルの背景色と余白を コントロールする

行の高さと vertical-align: baseline;

white-space: nowrap;

::first-letter / ::first-line

My heading

My heading

CSSの論理プロパティというこれからのパラダイムシフト

CSS FlexboxとGridはデフォルトで、どちらも論理的だ

タイトルの背景色と余白をコントロールする

タイトルの背景色と余白を
コントロールする