これまで
前回
https://qiita.com/KennyKTA/items/9e240cd90ecb86ea3ee5
前々回
https://qiita.com/KennyKTA/items/c05c5047953777eeb5c4
今回やること
-
React Boot Strap の Getting Start のLayout のセクションを理解する。
(Ref https://react-bootstrap.github.io/layout/grid/) -
React + Boot Strap によるグリッドシステムの実装を行う。（またまた、次回に譲るかもしれない。layout の部分を一通り和訳するだけにしようかと思う。）
今回やらないこと
- React Boot Strap の Getting Start のLayout の完全な翻訳はしない。自分に必要な範囲で訳し、記録する。
- flexbox に関する調査、言及はしない。
開発内容
まずは React Boot Strap のGetting started のGrid のセクションを軽く読んでいく。
全てに関して実施しないが、備忘とMarkdownの練習を目的として上記ページの引用 + 翻訳を行う。区切りはMarkdownの水平線を利用してみる。
Grid system
Bootstrap’s grid system uses containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
Bootstrap のグリッドシステムはレイアウトと整列を行うためにコンテナ、ロウ、カラムを利用します。この技術はflexboxをもとに構築されており、完全レスポンシブです。以下が、グリッドがどのように組み合わされるかの例と詳細です。
（どうやらflexbox と呼ばれる技術の上にグリッドシステムが構築されているらしい。上述の引用からもflexboxにはリンクが張られており、理解した方がよいのだろうが深入りせず飛ばしていく）。
Container
Containers provide a means to center and horizontally pad your site’s contents. Use Container for a responsive pixel width.
コンテナはあなたのサイトコンテンツを中央に配置し水平方向に並べるための手段を提供します。レスポンシブなピクセル幅を実現するためにはコンテナを利用してください。
（日本語だけだと理解ができない。水平方向に並べるとあるので、Containerの中に何か並べるのだろう。サンプルコードではRow が１つ並べられている。つまり１行だ。）
Fluid Container
You can use for width: 100% across all viewport and device sizes.
Container fluid を利用することで全てのviewport とデバイスサイズに対して幅100％ を実現できます。
（訳があっている自信がない、、、viewport ってなんだ？いずれにせよContainer にはfluid というpropが存在するらしい）
You can set breakpoints for the fluid prop. Setting it to a breakpoint (sm, md, lg, xl) will set the Container as fluid until the specified breakpoint.
fluid prop にはブレークポイントを設定することが可能です。ブレークポイント（sm,md,lg,xl）を設定することでContainer は 指定したブレークポイントまで流動的になります。
（訳しても意味がわからない。推測するに、fluid にデバイスサイズ？か何かを渡すとレスポンシブに表示がなされるということなのだろう。指定サイズまではコンテナが伸びるとか、そんなのじゃないかな？後で試してみよう。）
Auto-layout columns
When no column widths are specified the Col component will render equal width columns
列の幅に対して指定がない場合、Col コンポーネントは均等な幅で列を描画します。
（同一行の列に幅指定がなければ、等間隔の列が描画される。直観的でわかりやすい。）
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
flexbox のグリッド列の自動レイアウトは、ある列の幅を指定するとその周辺の兄弟列（カラム）のサイズも自動的に調整します。以下に示す事前定義されたグリッドクラスやグリッドのミックスインやインライン幅を利用できます。中央幅のサイズに関係なく、他の列のサイズが変更されます。
（最後の一文の意味がよくわからないな）
Variable width content
Set the column value (for any breakpoint size) to "auto" to size columns based on the natural width of their content.
列の値をauto に設定するとコンテンツの自然な幅に基づいて、カラムのサイズが設定されます。
Responsive grids
The Col lets you specify column widths across 5 breakpoint sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify the amount of columns to span, or set the prop to
for auto layout widths.
Col コンポーネントには列の幅を5種類のサイズをブレイクポイントによって指定可能です。いずれのブレークポイントにもどれだけ列を広げるかを数値で指定可能で、またpropに
のようにして自動的な幅調整も行えます。You can also mix and match breakpoints to create different grids depending on the screen size.
また、ブレイクポイントを組み合わせて利用することで、画面サイズに応じて異なるグリッドを作ることができます。
The Col breakpoint props also have a more complicated object prop form: {span: number, order: number, offset: number} for specifying offsets and ordering effects.
You can use the order property to control the visual order of your content.
列に指定するbreakpoint props はオフセットと表示順を制御するために{span: number, order: number, offset: number}の形式をとる複雑なオブジェクトも利用できます。order プロパティによってコンテンツの表示順を制御することができます。
The order property also supports first (order: -1) and last (order: $columns+1).
オーダープロパティはfirst とlast もサポートします。（数値的にはそれぞれ-1と列数+1 に相当）
For offsetting grid columns you can set an offset value or for a more general layout, use the margin class utilities.
オフセットを設けた列を作成するにはoffset value を利用するか、より一般的なレイアウトを実現するにはmargin class ユーティリティを利用します。
（このオフセットがかなり大事な気がする。）
#### Setting column widths in Row
The Row lets you specify column widths across 5 breakpoint sizes (xs, sm, md, lg, and xl). For every breakpoint, you can specify the amount of columns that will fit next to each other.
Row コンポーネントは列の幅を５種類のbreakpoint サイズ（xs,sm,md,lg,xl）で指定可能にします。breakpoint ごとに隣り合って並ぶ列の数を指定できます。
（おそらくだが、xs={1}とすると、小さいデバイスで表示する際に１列の表示となる。xs={2}なら2列表示されるのだろう。）
Note that Row column widths will override Col widths set on lower breakpoints when viewed on larger screens. The
size will be overriden by on medium and larger screens.
大きな画面で見る場合、Row コンポーネントで指定した列の幅は Col コンポーネントで設定した下位のブレークポイントを上書きすることに注意してください。中／大サイズのスクリーンでは
のサイズ指定はによって上書きされます。（訳はできていると思うが、あまり挙動が想像できない。ブレークポイントがよくわからない。）
API
省略する。各コンポーネントに指定可能なpropsの説明がしてある。これを読み込んで利用できれば、サイズ調整はマスターしたようなものな気がする。
その他
冒頭で言ったように、実装は次回に譲る。２回も実装を先延ばしにしてしまっている…
あと、上記の役に対してはどこかのタイミングで挙動をそれぞれ確認してみようと思う。
どうやらbreakpoint の指定はデバイスのサイズにかかわるものらしいが、あまりよくわかっていない。
break point ここがに関してはここがわかりやすかった。https://qiita.com/tonkotsuboy_com/items/7c01460b59c3ca5ee047