mfc-base.css について

mfc-base.cssでは、デザインコンポーネントを使用する際の基礎となる css を定義しています。mfc-base.cssとmfc-layout.cssを読み込むことでデザインコンポーネントを使用する準備が整います。

フォントサイズ

フォントサイズは「16px」をデフォルトとしています。デフォルトのフォントサイズを変更したい場合は、mfc-base.cssを修正し <html>に対して指定している font-size を変更してください。
<h1>～<h6>の見出し要素には、固有のフォントサイズを指定しています。

スマートフォン上の表示
パソコン上の表示
実際の大きさで確認する

ソースコード
    <section>   
        <h2 class="mfc-heading mfc-heading-001-002-1">Default fontsize</h2> 
        <div class="mfc-paragraph">
            デフォルトのフォントサイズは「16px」を指定。
        </div>
        <div class="mfc-container">
            <h1>h1. heading</h1>
            <h2>h2. heading</h2>
            <h3>h3. heading</h3>
            <h4>h4. heading</h4>
            <h5>h5. heading</h5>
            <h6>h6. heading</h6>
        </div>
    </section>

余白

各デザインコンポーネントには余白が指定されていますが、単一の要素には余白の指定はありません。余白を指定する場合は、余白用のコンポーネント<div class="mfc-container"></div>または<div class="mfc-paragraph"></div>で対象の要素を囲みます。余白用のコンポーネントを使用することで、デザインコンポーネントと整合性の取れた余白が適用されます。

formのデフォルトスタイル

テキストボックスやセレクトボックスにはデフォルトスタイルが指定されます。表示幅はスマートフォンサイトに配置する際のスタンダードである、width:100% を指定しています。

スマートフォン上の表示
パソコン上の表示
実際の大きさで確認する

ソースコード
<form action="./" method="POST">
  <section>
    <dl>
      <div class="fieldgroup">
        <dt>Input </dt>
        <dd><input type="text" name="xxx"></dd>
      </div>
      <div class="fieldgroup">
        <dt>Input (disabled)</dt>
        <dd><input type="text" name="xxx" disabled value="XXXXXXXXXX"></dd>
      </div>
      <div class="fieldgroup">
        <dt>Select</dt>
        <dd><select name="xxx"><option>XXXXX</option></select></dd>
      </div>
      <div class="fieldgroup">
        <dt>Select (disabled)</dt>
        <dd><select name="xxx" disabled><option>XXXXX</option></select></dd>
      </div>
      <div class="fieldgroup">
        <dt>Textarea</dt>
        <dd><textarea name="xxx">XXXXXXXXXXXXXXXXX</textarea></dd>
      </div>
      <div class="fieldgroup">
        <dt>Textarea (disabled)</dt>
        <dd><textarea name="xxx" disabled>XXXXXXXXXXXXXXXXX</textarea></dd>
      </div>
      <div class="fieldgroup">
        <dt>Radio</dt>
        <dd>                            
          <label for="radio1"><input id="radio1" name="AAA" type="radio">radio1</label>
          <label for="radio2"><input id="radio2" name="AAA" type="radio">radio2</label>
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Radio (disabled)</dt>
        <dd>
          <label for="radio3"><input id="radio3" name="AAA" type="radio" disabled>radio1</label>
          <label for="radio4"><input id="radio4" name="AAA" type="radio" disabled>radio2</label>
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Checkbox</dt>
        <dd>
          <label for="checkbox1"><input id="checkbox1" type="checkbox">checkbox</label>
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Checkbox (disabled)</dt>
        <dd>
          <label for="checkbox2"><input id="checkbox2" type="checkbox" disabled>checkbox</label>
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Submit</dt>
        <dd>
          <input type="submit" class="submit" value="submit">
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Submit [disabled)</dt>
        <dd>
          <input type="submit" class="submit" value="submit disabled" disabled>
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Reset button</dt>
        <dd>
          <input type="reset" class="submit" value="reset">
        </dd>
      </div>
      <div class="fieldgroup">
        <dt>Button</dt>
        <dd>
          <button>button</button>
        </dd>
      </div>
    </dl>   
  </section>
</form>

画像の最大幅

スマートフォンサイトでの横スクロールを防ぐため、<img>に max-width: 100% を指定しています。

スマートフォン上の表示
パソコン上の表示
実際の大きさで確認する

ソースコード
<section>
  <div class="mfc-container">
    <img src="https://placehold.jp/100x100.png" />
  </div>

  <div class="mfc-container">
    <img src="https://placehold.jp/200x200.png" />
  </div>

  <div class="mfc-container">
    <img src="https://placehold.jp/500x500.png" />
  </div>
</section>

リストの開始位置

デザインコンポーネントとリストの開始位置を統一しています。

スマートフォン上の表示
パソコン上の表示
実際の大きさで確認する

ソースコード
<section>           
  <h2 class="mfc-heading mfc-heading-001-002-1">Ordered List</h2>   
  <div class="mfc-container">
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
    </ol>
  </div>

  <h2 class="mfc-heading mfc-heading-001-002-1">Unordered List</h2> 
  <div class="mfc-container">
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
      <li>List item 5</li>
    </ul>
  </div>
</section>