コース: CSS 基本講座
今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。
フレックスボックスの軸と方向
このレッスンでは フレックスボックスの基本概念のうち、 フレックスボックスの軸と 方向の2つについてご説明をします。 今開いてるのはMDNの 「フレックスボックスの基本概念」という ページなんですが、 ここは検索の時、 「mdn」の 「フレックスボックス」ということで 検索をすると、 上の方に表示されると思います。 これですね。 「フレックスボックスの基本概念」と いうことで、 これらの項目を説明しているんですが、 そのうちこの最初の2つです。 まず最初フレックスボックスには 軸が2つあります、ということです。 軸のうちまず「主軸」ですね。 主軸というのは主になる軸、 文字どおりです。 というのはこのフレックスボックスでは 軸の方向というのが2つ選べます。 通常は水平方向に ボックスは並べます。 この場合、水平方向というのは、 row というふうに呼ばれるんですけれども 左から右に並ぶと。 これでレイアウトすればいいんですが、 選択ができます。 もうひとつの軸、垂直軸ですね。 これを column と呼ぶんですけれども column を主軸に選択すると 上から下に縦並びにすることができます。 どちらを主軸にするかということが 選択できるんですね。 そうするともうひとつの軸というのは 選ばれなかった方の軸と いうことになります。 それが「交差軸」と呼ばれます。 主軸を row にした場合には 交差軸は column の方向ですね。 垂直方向になります。 反対に主軸を 縦、column にした場合には 水平方向が row が これが交差軸ということになります。 フレックスボックスでは この主軸がどちらになってるかということを 最初に確認する必要があります。 デフォルトは row、 水平方向ということです。 もうひとつご説明するのは 方向ということなんですが、 始点と終点です。 ここでは水平方向 row の図だけが 出てますけれども column についても 同じように考えることができるんですが、 どちらがスタートかということですね。 デフォルトでは左が Start、 右が End ということで 左から右に並べられます。 けれどもこれも切り替えができまして、 そうすると右が Start、 左が End ということで、 アラビア語なんかの場合ですね。…
エクササイズファイルを使って実践してみましょう。
インストラクターがコースで使用しているファイルはダウンロードできます。見て、聞いて、練習することで、理解度を深めることができます。
コースをダウンロードして学習しましょう。
ラーニングコースをダウンロードしてオフラインで視聴しましょう。ダウンロードしたコースはLinkedInラーニングのモバイルアプリ (iOSまたはAndroid) で視聴できます。