0からはじめるelm-ui#3-並べる

今日おぼえること

Element.columnとElement.rowで要素を縦横に並べること

row    : List (Attribute msg) -> List (Element msg) -> Element msg
column : List (Attribute msg) -> List (Element msg) -> Element msg

できるもの

module Main exposing (main)

import Element exposing (..)


main =
    layout [] <|
        column []
            [ column []
                [ text "c"
                , text "o"
                , text "l"
                , text "u"
                , text "m"
                , text "n"
                ]
            , row [] [ text "r", text "o", text "w" ]
            ]

はじめに

#2ではelを使ってスタイリングしてみました

今日は複数の要素を横並びにしたり縦並びにしたりします

columnで縦並びにする

column []
    [ text "c"
    , text "o"
    , text "l"
    , text "u"
    , text "m"
    , text "n"
    ]

これで縦に並びます。そのままですね

rowで横並びにする

row [] [ text "r", text "o", text "w" ]

これで横に並びます。そのままですね

本編は以上です、以下余談

rowとcolumnの方向の覚え方

ひと目でわかる行列（Row ・ Column）の方向の覚え方から引用します

Row・Columnの覚え方: 大文字で書いた際に穴を作るために加える棒の方向が一致する

This 作品 by Λlisue is licensed under a Creative Commons 表示 3.0 非移植 License.

わざわざ覚えなくても間違えたら逆にすればいいだけなので特に問題ないと思います

flexboxって？

素のHTML、CSSだと横に並べるときはまずflexboxってのを覚えてね……って続けようと思ったんですけど「css 横並び」で検索するとinline-blockとかfloatとかが最初にでてきてて古いなって思いました

elm-uiだとものを並べるときは何も考えずにrowかcolumnを使えばいいです（他の選択肢がほぼない）。中身が分からないと困るときもあるかもしれません。実装にはflexboxが使われています

flexboxの詳しい説明はしませんがゲームだけ紹介します
FLEXBOX FROGGY
楽しく学べるよ！

宿題

パッケージドキュメントで複数のElementを受け取ってElementを返す関数に何があるか調べてみよう

ヒント: List (Element msg)でページ内検索すると出てくるよ

終わりに

今日はrowとcolumnで要素を横や縦に並べられるようになりました

次はみんなお待ちかねの上下左右中央揃えをしようと思います