0からはじめるelm-ui#5-聖杯レイアウト

今日覚えること

• width <| px 100で固定幅にすること
• width fillで残りの領域いっぱいに伸ばすこと
• explain Debug.todoでワイヤーフレームが書きやすい

成果物

import Element exposing (..)


main =
    layout [] <|
        column [ width fill, height fill, explain Debug.todo ]
            [ row [ width fill, height <| px 100 ] [ text "header" ]
            , row [ width fill, height fill, explain Debug.todo ]
                [ column [ width <| px 100, height fill ] [ text "nav" ]
                , column [ width fill, height fill ] [ text "main" ]
                , column [ width <| px 100, height fill ] [ text "ad" ]
                ]
            , row [ width fill, height <| px 100 ] [ text "footer" ]
            ]

はじめに

#0から#4でelm-uiの基本的な関数を学べたと思います
ということで今回は実践編として聖杯レイアウトを組んでみようと思います

詳しくはこの記事を参考にしました

• 伸縮する中央のコンテナと、固定幅のサイドバーを持つこと。
• 中央のカラム（メインコンテンツ）はHTMLソースの最初に登場すること。
• すべてのカラムは、どのカラムが一番高いかに関係なく、同じ高さであること。
• 最小限のマークアップしか必要にならないこと。
• コンテンツの量が少なかったとしても、フッターはページの下部に"固定"されること。

これらの条件を満たしていこうと思います。が、２つ目の条件はelm-ui的にできないのでちょっと諦めます。HTMLの意味論とかあまり知ったことじゃないです

では聖杯レイアウトを組んでいきます。5ステップです

1. 大まかに縦横に分割する

まず聖杯レイアウトはこんな感じです。rowとcolumnを使って組んでいくので縦横を見定めます

青 緑 オレンジで縦に積まれてます。ここはcolumnにしましょう

緑の部分はさらにピンク 黄色 紫で横に並んでいます。ここはrowですね

ここまでで一旦組んでみましょう

デモ

main =
    layout [] <|
        column []
            [ text "header"
            , row []
                [ text "nav"
                , text "main"
                , text "ad"
                ]
            , text "footer"
            ]

各コンテンツにはとりあえずテキストを入れてみました
最低限レイアウトは組めてますね。上にヘッダーがあって下にフッター、真ん中左はナビゲーションの右広告、中央にメインコンテンツです

2. 仮組を分かりやすくする

ここから調整していくんですが、先にどういうレイアウトになってるかわかりやすいようにしましょう

explain Debug.todoをつかいます

main =
    layout [] <|
-        column []
+        column [ explain Debug.todo ]
            [ text "header"
            , row []
                [ text "nav"
                , text "main"
                , text "ad"
                ]
            , text "footer"
            ]

explainをつけた要素には茶色の枠線、その子要素には青緑？の破線を付けます
こうすると要素が三つ縦に並んでることが分かりますね

真ん中の段にもexplainを付けましょう

```diff:elm
main =
    layout [] <|
        column [ explain Debug.todo ]
            [ text "header"
-            , row []
+            , row [ explain Debug.todo ]
                [ text "nav"
                , text "main"
                , text "ad"
                ]
            , text "footer"
            ]

茶色の線は被って消えてるみたいですが、これで各要素がどうなってるか見えるようになりました

3. 固定幅の部分を指定する

上記の条件によるとサイドバーは固定幅らしいです。フッターヘッダーはコンテンツの中身によって高さは変わるものだと思いますが、今回は中身までは作らないのでとりあえず固定幅にしておきましょう

main =
    layout [] <|
        column [ explain Debug.todo ]
            [ row [ height <| px 100 ] [ text "header" ]
            , row [ explain Debug.todo ]
                [ column [ width <| px 100 ] [ text "nav" ]
                , column [] [ text "main" ]
                , column [ width <| px 100 ] [ text "ad" ]
                ]
            , row [ height <| px 100 ] [ text "footer" ]
            ]

各テキストをrowやcolumnで囲ってサイズを指定してみました

固定幅は指定しましたが、そのほかの要素は画面端までめいっぱい伸びて欲しいですね

4. 幅をのばす

幅を伸ばすのは簡単です。width fillで埋めればいいです

main =
    layout [] <|
        column [ explain Debug.todo ]
-            [ row [ height <| px 100 ] [ text "header" ]
+            [ row [ width fill, height <| px 100 ] [ text "header" ]
            , row [ explain Debug.todo ]
                [ column [ width <| px 100 ] [ text "nav" ]
                , column [] [ text "main" ]
                , column [ width <| px 100 ] [ text "ad" ]
                ]
-            , row [ height <| px 100 ] [ text "footer" ]
+            , row [ width fill, height <| px 100 ] [ text "footer" ]
            ]

はい伸びました。fillは親要素の幅いっぱいに伸ばしてくれます
まだ一番上のcolumnを伸ばしてないので画面端までいきませんでした
伸ばしましょう

main =
    layout [] <|
-        column [ explain Debug.todo ]
+        column [ width fill, explain Debug.todo ]
            [ row [ width fill, height <| px 100 ] [ text "header" ]
            , row [ explain Debug.todo ]
                [ column [ width <| px 100 ] [ text "nav" ]
                , column [] [ text "main" ]
                , column [ width <| px 100 ] [ text "ad" ]
                ]
            , row [ width fill, height <| px 100 ] [ text "footer" ]
            ]

伸びました
あとは真ん中の段とmainカラムを伸ばしましょう

main =
    layout [] <|
        column [ width fill, explain Debug.todo ]
            [ row [ width fill, height <| px 100 ] [ text "header" ]
-            , row [ explain Debug.todo ]
+            , row [ width fill, explain Debug.todo ]
                [ column [ width <| px 100 ] [ text "nav" ]
-                , column [] [ text "main" ]
+                , column [ width fill ] [ text "main" ]
                , column [ width <| px 100 ] [ text "ad" ]
                ]
            , row [ width fill, height <| px 100 ] [ text "footer" ]
            ]

これで大体できました
あとはフッターが一番下に固定されればいいんではないかと思います

5. フッターを下に固定する

要するに真ん中の段を伸ばしてフッターを下にやればいいです
width fillをつけまくったのと同様にheight fillをつけまくればいいです

main =
    layout [] <|
-        column [ width fill, explain Debug.todo ]
+        column [ width fill, height fill, explain Debug.todo ]
            [ row [ width fill, height <| px 100 ] [ text "header" ]
-            , row [ width fill, explain Debug.todo ]
+            , row [ width fill, height fill, explain Debug.todo ]
-                [ column [ width <| px 100 ] [ text "nav" ]
-                , column [ width fill ] [ text "main" ]
-                , column [ width <| px 100 ] [ text "ad" ]
+                [ column [ width <| px 100, height fill ] [ text "nav" ]
+                , column [ width fill, height fill ] [ text "main" ]
+                , column [ width <| px 100, height fill ] [ text "ad" ]
                ]
            , row [ width fill, height <| px 100 ] [ text "footer" ]
            ]

完成です！

今日覚えたこと

• width <| px 100で固定幅にすること
• width fillで残りの領域いっぱいに伸ばすこと
• explain Debug.todoでワイヤーフレームが書きやすい

おわりに

実践編ということで聖杯レイアウトを組んでみました
rowとcolumnで組んでいくやり方をわかってもらえたかなーと思ってます

elm-ui使ってみましょう！