【Material Design Lite】テキストフィールドを横に並べて表示

CSSフレームワークのMaterial Design Lite(mdl)を使用して電話番号を表示するときに使用できる方法を紹介します。

準備

  • mdl のサイトの「GETTING STARTED」からjsとcssのリンクをコピーし自分のhtmlに記載します。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

並べて表示する

  • flexboxを使用してtextfieldを並べて表示します。

html

<div class="mdl-containerflex">
  <div class="mdl-containerflex__item">
    <div class="mdl-textfield__title">フィールド1</div>
    <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="sample1">
        <label class="mdl-textfield__label" for="sample1">abc</label>
    </div>
  </div>
  <div class="mdl-containerflex__item">
    <div class="mdl-textfield__title">フィールド1</div>
    <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input" type="text" id="sample2">
        <label class="mdl-textfield__label" for="sample2">abc</label>
    </div>
  </div>
</div>

css

.mdl-containerflex{
  display: flex;
  flex-direction: row;
}
.mdl-containerflex__item + .mdl-containerflex__item,
    margin-left: 10px;
}

簡単に実装が可能です。
mdlは、小さなコンポーネントで提供されているのでほかのフレームワークと併用して使う場面も増えそうです。