【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

【レスポンシブWebデザインの作り方】使えるHTML&CSS4つの基本技

【レスポンシブWebデザインの作り方】使えるHTML&CSS4つの基本技

レスポンシブな二段メニューの作り方

今回は、HTML&CSSを学び始めたばかりの方でも挑戦できるような基本技を使って、レスポンシブな二段メニューを作ってみます。

<完成イメージ>

完成イメージ

こんな感じのメニューボタンはよく見かけますよね。これをデバイスが変わってもレイアウト崩れを起こさないように作っていきます。

~目次~

  1. listタグでボタンを作る
  2. %で幅(width)を指定する
  3.  floatプロパティで二段レイアウトにする
  4.  高さ(height)を設定する

 

1.listタグでボタンを作る

まず、listタグで項目を作り、わかりやすいように線で囲って、ボタンを作ります。

displayプロパティをblockに指定して、ボタン同士が重ならいようにしておきましょう。
(参考:CSSの display: inline、display: block、display: inline-block をマスターしよう! | たねっぱ!

【コード】
HTML

<!DOCTYPE html>
<html>
<body>

<div>
 <ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">会社概要</a></li>
  <li><a href="#">事業内容</a></li>
  <li><a href="#">会社沿革</a></li>
  <li><a href="#">採用情報</a></li>
  <li><a href="#">アクセス</a></li>
  <li><a href="#">コンタクト</a></li>
  <li><a href="#">個人情報</a></li>
 </ul>
</div>

</body>
</html>

CSS

ul {
  list-style-type: none;
}

a {
  padding: 0.5rem;
  margin: 0;
  border: 1px solid black;
  border-radius: 5px;
  display: block;
}

listで作成したボタン
こんな感じのボタン達が出来上がります。

2. %を使って幅(width)を設定する

次に、ボタンの幅を決定しましょう。

【追加するコード】
CSS

ul {
   width: 25%;
}

ボタンを%で指定

ボタンの幅は、%で指定します。

ここでの%は「親要素のwidthに対しての割合」なので、これを利用してブラウザ幅に応じて幅を変化させることができます。

また、もう一つのポイントは、「並べたいものの幅の合計=親要素の幅」とすることです。

これがイコールになっていないと、意図しない改行などレイアウト崩れを生じます。

※この時widthプロパティを適用するのはa要素ではないのに注意です。
a要素に適用すると、↓の画像のようにa要素のmarginができてしまう等、floatを適用した時にうまくいきません。

a要素にCSSを適用した場合
(参考:CSSでのパーセント指定まとめ | while(isプログラマ)

今回は4つのボタンを二段に4つずつ並べるので、

ul要素の幅(width)を25%に設定して、合計を100%にします。
こうすることでブラウザの幅に従ってボタンの幅が変化してくれます。

3.floatプロパティで二段レイアウトにする

【追加するコード】
CSS

li {
  float:  left;
  overflow: hidden;
}

floatを適用することで、二段ボックスのレイアウトにします。

ブラウザの幅を動かすと、ボタンも動いてくれるはずです。

この時、2で触れた幅の合計が100%になっていれば、2段レイアウトの構成は崩れないはずです。
ただ、もっともブラウザ幅を狭くすると、字数の違いからレイアウト崩れが起こってしまいます。

これを調整します。

floatで二段に

4.高さ(height)を設定する

【追加するコード】
CSS

a {
  height: 4rem;
}

floatでレイアウトを組んだ場合は、自動で高さを揃えることはできません。

今回は高さを、改行が起きないような値に設定してみます。

これなら、ブラウザを狭くしてもレイアウト崩れは起こりません。

height修正後

さらにテキストの位置を調整し、

二段メニューができました。

【コード】
HTML

<!DOCTYPE html>
<html>
<body>

<div>
 <ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">会社概要</a></li>
  <li><a href="#">事業内容</a></li>
  <li><a href="#">会社沿革</a></li>
  <li><a href="#">採用情報</a></li>
  <li><a href="#">アクセス</a></li>
  <li><a href="#">コンタクト</a></li>
  <li><a href="#">個人情報</a></li>
 </ul>
</div>

</body>
</html>

CSS

ul {
  list-style-type: none;
}

li {
  width: 25%;
  float: left;
  overflow: hidden;
}

a {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid black;
  border-radius: 5px;
  display: block;
  text-decoration: none;
  height: 4rem;
  text-align: center;
}

完成図

デモサイトはこちら

デモサイトを開いてブラウザ幅を動かしてみてください。

この後、フォントや色などをはじめ修飾していくと、メニューボタンの完成です。

おわりに

いかがでしたでしょうか。

私自身勉強中の身ですが、有益な情報を発信できるよう努力していきたいと思います。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+