人気記事

  1. JSでiOSにも配慮した背景固定なスクロール対応のモーダルウィンドウ

  2. CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス

  3. CSSで簡単に縁取りされたアウトライン文字を作る

  4. IE8〜11/Edge12〜の各バージョンに対応したCSSハックまとめ

  5. JSでtouchstartとclickイベントを2回発生させないようにしつつ同時に指定する

  6. CSSでスクロールバー非表示とJSでスクロールバーのデザインをカスタマイズする

  7. 22個のサンプルから学ぶCSSのnth-child()を使った番目を指定するテクニック

  8. SVGでtext要素を上下左右中央寄せする

  9. ドラッグ＆ドロップで要素を並び替えることができるSortable.js

  10. .matchMedia()でJSでもメディアクエリを使って条件分岐する

CSSのFlexboxで中央にロゴがあって左右にボタンがあるスマホのヘッダーメニューを作る

今更…かもしれませんが、よく見るスマホのヘッダーメニューをFlexboxで作成してみます。Flexboxを使うと要素を簡単でしかも思い通りに配置できるので便利ですね。いくつか方法があるので紹介します。

space-betwen で均等配置


<header class="header">
  <div class="button">
    <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
  </div>
  <h1 class="logo">LOGO</h1>
  <div class="button">
    <i class="fa fa-fw fa-search" aria-hidden="true"></i>
  </div>
</header>

ボタンのアイコンにはFontAwesomeを使っています。


.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .8em 1.2em;
}
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

space-between でボタンとロゴを均等配置します。また、align-items: center でボタンを上下中央に配置しています。

margin: auto でロゴを中央に


<header class="header">
  <div class="button">
    <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
  </div>
  <h1 class="logo">LOGO</h1>
  <div class="button">
    <i class="fa fa-fw fa-search" aria-hidden="true"></i>
  </div>
</header>


.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding: .8em 1.2em;
}
.logo {
  margin: 0 auto;
}
.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.logo 要素の左右の margin を auto にすることでロゴ部分を中央配置できます。

ボタンは片方のみ配置


<header class="header">
  <div class="button">
    <i class="fa fa-fw fa-bars" aria-hidden="true"></i>
  </div>
  <h1 class="logo">LOGO</h1>
</header>


.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: .8em 1.2rem;
}
.logo {
  margin: 0 auto;
}
.button {
  position: absolute;
  top: 50%;
  left: 1.2rem;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

ボタンを片方のみ配置したいときはFlexboxの均等配置を使うとロゴ部分が中央表示になりません。そこで、ボタンを position: absolute で絶対配置しています。

CSS本執筆しました！！！