First

<p>タグから始める

どこまでアレンジできるか

<p> は HTML のブロック要素で、テキストの段落を表す。普段当たり前に使用しているタグである。<p> はブロック要素であり、並び方は縦に並ぶ。ここでは、文字の塊りに対して style や CSS を施してサイズなどをどこまでコントロールできるかを手始めに弄ってみよう。

Starting

通常の CSS はこの例のように <p> と <p> の間に余白を施す。

/* CSS */
p.standard {
  margin: 10px 0;
  padding: 5px;
}

段落要素だけを使うとこうなる

①. <p> を使って普通に文字列を入れてみる。この要素はブロック要素であり、段落ごとに改行されるので、文字に背景を指定すると一行で表示される。

Starting

<p style="background-color: green; color: #fff; padding: 0 8px;">Starting</p>

display: inline-block でサイズ変更

②.「display: inline-block」を使ってサイズを変更して短く表示したい。「display: inline-block」は「didplay: block」と同じように、高さと幅、上下左右の余白である margin と padding が自由に設定できる。要素の並び方は前後に改行が入らないので横に並び inline と同じようになる。また、inline-blockでは「text-align」や「vertical-align」の指定をすることもできる。

Horizontal

width: fit-content で縦に並べる

③.style に「width: fit-content」を追加して縦に並べる。width: fit-content と改行の関係は、要素の幅をコンテンツの自然な幅に合わせ、改行に柔軟に対応できる、というものだ。要素の幅を内容に合わせて自動的に調整したい場合に「width: fit-content」が便利だ。

Vertical

<p style="width: fit-content; background-color: green; color: #fff; writing-mode: horizontal-tb; padding: 0 8px; border-radius: 12px">Vertical</p>
<p style="width: fit-content; background-color: green; color: #fff; writing-mode: horizontal-tb; padding: 0 8px; margin-top: -0.8rem;  padding: 0 8px; border-radius: 12px">Vertical</p>

writing-mode を使う

writing-mode は CSS のプロパティで、テキストの行のレイアウトを横書きにするか縦書きにするか、ブロックのフロー方向を左向きにするか右向きにするかを設定する。

writing-mode: horizontal-tb;
ltr( Left-To-Right の略で、テキストが左から右に書かれる言語を指す) の言語では、内容物は左から右へ水平に流れる。
writing-mode: vertical-rl;
ltr の言語では、内容物は上から下へ垂直に流れ、次の垂直の行は、前の行の左に配置される。
writing-mode: vertical-lr;
ltr の言語では、内容物は上から下へ垂直に流れ、次の垂直の行は、前の行の右に配置される。
writing-mode: sideways-rl;
ltr の言語では、内容物は下から上へ垂直に流れる。
writing-mode: sideways-lr;
ltr の言語では、内容物は上から下へ垂直に流れる。

writing-mode: vertical-rl で縦書きへ

③.ここでは上のリストの中から、style に「writing-mode: vertical-rl」を追加してみる。vertical-rl;の「vertical」は縦書き、

縦書き

「rl」は右から左（Right to Left）を意味しており、右から左へ日本語の自然な縦書きの流れの指定ができる。

縦書きで
表示してみる

縦書きを横に並べたい

④. ③を二つ並べる。

縦書き

display: inline-block

⑤. ④に「display: inline-block;」を加えて横にくっ付くように並べる。

縦書き

角度を与える

⑥.⑤に「transform:rotate(45deg);」を加えて角度を与える。

縦書き

<p style="display: inline-block; background-color: green; color: #fff; writing-mode: vertical-rl; padding: 8px 0; border-radius: 12px; transform:rotate(45deg);">縦書き</p>

Second

align-self

align-self を使用すると、全体のflexアイテムの配置をしながら特定のflexアイテムの配置のみを変更できる

align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定する。フレックスボックスでは交差軸方向のアイテムの配置を制御する。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御する。

<!-- HTML -->
<div class="flex-box-ex" style="align-items: flex-start;">
 <div class="flex-item-ex">A</div>
 <div class="flex-item-ex">B</div>
 <div class="flex-item-ex">C</div>
</div>
<div class="flex-box-ex" style="align-items: center;">
 <div class="flex-item-ex">D</div>
 <div class="flex-item-ex">E</div>
 <div class="flex-item-ex">F</div>
</div>

<div class="flex-box-ex" style="align-items: flex-end;">
 <div class="flex-item-ex">G</div>
 <div class="flex-item-ex">H</div>
 <div class="flex-item-ex">I</div>
</div>
<div class="flex-box-ex" style="align-items: baseline;">
 <div class="flex-item-ex">J</div>
 <div class="flex-item-ex">K</div>
 <div class="flex-item-ex">L</div>
</div>
<div class="flex-box-ex" style="align-items: stretch;">
 <div class="flex-item-ex">M</div>
 <div class="flex-item-ex">N</div>
 <div class="flex-item-ex">O</div>
</div>

/* CSS */
.flex-box-ex {
  background-color: #f7f7f7;
  display: flex;
  height: 8rem;
  float: left;
  padding: 0 0.2rem;
  font-size: 1rem;
}
.flex-item-ex {
  background-color: green;
  font-family: sans-serif;
  color: white;
  padding: 0.3rem;
  margin: 0.1rem;
  border-radius: 12px;
}

Third

実践編縦書きサブタイトルを使う

右寄せ

まずはじめに、右寄せを実行してみる。ここでは右寄せにした要素の左側に要素を配置することができることを前提にしよう。左側へ文字を回り込ませるためだ。

float: right を使って実行する

右

「float: right」を使うと、こういう挙動をする。「::first-letter」の右配置版とでも言おうか、右側の要素に添って余白を埋めてくれる「float: right」は大変重宝するものであり unique（唯一無二）である。

<div style="width: 100%; height: 150px; border: 1px dashed #333; margin-bottom: 1rem;" >
  <div style="height: 50px; width: 50px; float: right; background: #F0F8FF; border: 1px solid #B0E0E6; display: flex; align-items: center; justify-content: center;"><span style="font-weight: 900; font-size: 1.4rem;">右</div>
  <p style="padding: 1rem;">「float: right」を使うと、(以下省略)</p>
</div>

縦書きをレイアウトに組み込む

日本語ウェブの
デザインの進化

CSS3・DESIGN

<div> を「float: right」を使って右寄せする。<div> の領域の border に outset、 border-radius を指定して枠線に丸みを与え、領域全体が突起して見えるような線を加える。

<div> の中に文字列を挿入してデザイン(text-shadow や color)を加える。

そしてテキストを流し込んで右の要素に添って回り込ませるレイアウトとデザインを完成させた。

次のものは、4年前に作成したが、それを微調整して掲載した。レビューで再編することはとても大切だ。

疾風怒濤

いつの時代も、変わらないものは、青春だけ。いつも愚かで、一途であればいいという。馬鹿で、純粋でいいんだよ。どれだけ一途で、愚かで、危うい期間を過ごしてきたかで、そいつの人生が決まっていくんじゃないか。

北方謙三

関連ページ：グリッドレイアウトを極める１０

Fourth

text-box-trim プロパティと text-box-edge プロパティ

これまでテキストの余白の処理にとても苦労していたが、CSS の新プロパティが登場した。text-box プロパティを使うとテキストの余白を自在にコントロールすることができる。

ショートカット text-box: trim-both cap alphabetic;

text-box-trim

テキスト要素の上下のスペースを調整するのが text-box-trim だ。text-boxプロパティでは余分なハーフ・レディングを除去しつつ、行の間隔はline-heightで指定した通り保つことが可能である。

trim-start：上部の余白をトリミング
trim-end：下部の余白をトリミング
trim-both：上下両方の余白をトリミング

text-box-edge

text-box-edge プロパティは、フォントの上下の隙間(レディング)を除去(トリミング)する際に、どの位置でトリミングするかを指定する。

テキストの上下余白をトリミング

（未設定の場合）

テキストの上下余白をトリミング A

（text-box-trim: trim-both; text-box-edge: text; の場合）

テキストの上下余白をトリミング B

（text-box-trim: trim-both; text-box-edge: cap alphabetic; の場合）

Fifth

グリッドレイアウト

縦と横を混在させるレイアウトを執る最も簡単な方法はグリッドレイアウトを使うことである。

このセクションでは駐車場の配置図なるものを作成した。アイテムの縦や横のサイズを決定する処理に困惑するかもしれない。次のセクションでも触れているがグリッドで使う単位について一考が必要だ。適切な単位を用いるととても処理が捗ることになる。そして、ページのレイアウトのコマ割りとして差し込むことが簡単に可能になる。

ここではレスポンシブ対応を考えて、グリッドコンテナにパーセントを使ったサイズ指定をしている。

 #grid-container-parking {
    display: grid;
    grid-template-rows: 10% 10% 10% 20% 10% 10% 10%;
    grid-template-columns: repeat(10, 5%);
    grip-auto-rows: 10%;
    height: 205px;
    width:100%
    margin: 16px 0;
    padding: 0;
    gap: 1px 1px;
    text-align: center;
    place-content: center;
}

F-2

L-2

Sixth

extra

グリッドプロパティで使用できる単位

殆どの単位がサイズで使用できる、主に以下のものがある。

px:ピクセル単位。画面の物理的なピクセルサイズ
em:親要素のフォントサイズを基準にした相対的な単位
rem:ルート要素のフォントサイズを基準にした相対的な単位
%:親要素の幅に対する割合を表す単位
vh:画面の高さの1/100を基準にした相対的な単位
vw:画面の幅の1/100を基準にした相対的な単位
auto:グリッドトラックのサイズを自動的に決定
min-content:グリッドアイテムの最小コンテンツサイズに基づいてトラックサイズを決定
max-content:グリッドアイテムの最大コンテンツサイズに基づいてトラックサイズを決定
repeat(auto-fit, size):可変数のトラックを定義
repeat(count, size):指定したサイズを繰り返して列を定義
vw:画面の幅の1/100を基準にした相対的な単位

grid-template-columns でこれらの単位を組み合わせて、柔軟でレスポンシブなレイアウトを作成できる。例えば、以下のように

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /*  要素が200px以上になることを保証しつつ、入るだけ横に並べる */
}

エバンゲリオン風・使徒、襲来

フォントが「マティスEB」ではないのが残念であるが、文字配置はほぼこうである。グリッドで文字を配置し、サイズの単位には「1rem=16px」を使った。「rem」を px 換算して、全体サイズのあたりを取り決めた。

<html> (ルート) 要素に font-size が指定されていない場合、ブラウザはデフォルトのフォントサイズ（一般的に16px）を適用する。

第壱話

使徒

、来襲

display	block	inline	inline-block
初期値	p、div、ul、h1～h6	a、span、img
改行・並び	改行	横に並ぶ	横に並ぶ
幅・高さ	指定可	指定不可	指定可
余白	上下左右の padding margin	左右の padding margin	上下左右の padding margin
text-align	指定不可	指定可	指定可
vertical-align	指定不可	指定可	指定可