dポイントプレゼントキャンペーン実施中！

【CSS】【HTML】横並びメニューについて ホームページに上画像のような４つボタンのある横並びメニ

解決済

【CSS】【HTML】横並びメニューについて
ホームページに上画像のような４つボタンのある横並びメニューを作りました。
ぼかしている部分と赤と黄色の棒を背景とし、その上にボタン部分となる各４つの画像を重ねています。

しかし４つの画像をピクセルで位置のの指定をしているため、ページ全体をセンタリングすると、各ボタン画像が背景について行かず下の画像のようになります。

ページ全体をセンタリングした場合も上画像のようにするためにはどうしたら良いのでしょうか？

ページは1000px程度で考えています。
さらにこのページを1920pxまで横に伸ばした場合に余白部分に赤と黄色の棒部分を表示させる方法があれば教えていただきたいです。（メニューから端まで同じデザインが続く感じ）
イメージはhttp://www.kumamoto-med.jrc.or.jpのホームページのような感じです。

ちなみにボタンはa:hoverで切り替えています。

「【CSS】【HTML】横並びメニューにつ」の質問画像

質問者からの補足コメント

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

自信あり

No.2ベストアンサー

  • 回答者： taigoito
  • 回答日時：

ソース拝見しました。



画像を横並びにする方法は色々ありますが、position: absolute;を使うケースはほとんどありません。
position: absoluteを使うにしても、position:relativeで、起点となる親要素を指定するのが重要です。
今回、画像がずれるという現象も、それに起因しています。

(1) floatとclearfixを用いる方法（floatとその解除）
(2) インライン要素に変えて並べる方法（ブロック要素とインライン要素）

既に古いですが、古いと言っても、この2つがレイアウトの基本です。
これができなければCSSを自身で記述してWebサイトを作るのは無理です。

ただ、今どきは、CSSフレームワークといって、CSSを自身で記述できなくとも、
特定のルールに沿ってクラス名を付与していけば、簡単にレイアウトが組める方法がありますので、
そちらのやり方をオススメします。

"Bootstrap 使い方"で検索してみてください。

こちらをぜひ使いこなして、カッコいいサイトを作ってみてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます
やってみます！

通報する
お礼日時：2017/05/21 03:37

参考程度に

No.1

  • 回答者： taigoito
  • 回答日時：

こんばんは。



HTML/CSSの書き方は、10人いれば10通りあります。
画像を使うといっても、<img>なのか、background: url(...) としているのかで、全然記述が変わってきますので、
質問者さまの質問の意図に沿ったソースは書けません。
こういう質問はご自身のソースを添付しておくと、回答が付きやすいですよ（HTML/CSSとも）。

現象としては、position: absoluteを使っているのかな？？（推測です）
だったら親要素である<li>に、position:relativeを指定していますか？？
あるいは、top, leftなどの指定をしないままだと、予期せぬ表示になります。
（当たり前だ！ということならすみません）

レスポンシブじゃないなら、やはり画像はbackgroud: url(...)で読み込んで、
repeat-xを付けてやるか、
あらかじめ画像のサイズを合わせておくかするのが、
昔ながらのやり方ではないですか？？

もしかして、hoverしたときに、元の赤帯を上下にはみ出して画像を表示させるとしたら、
top: -〇〇pxとか、margin-top: -〇〇pxとかしてはどうでしょうか。
その辺も果たして、box-sizing: border-box;などリセットしているか否かで、回答が変わってきます。

赤帯を画面両端まで伸ばすのは、<ul>をラップする要素の幅と、その全ての親要素にwidth:100%を指定してください。
そしてbackgroudプロパティで背景画像をrepeat-xをつけて読み込みます。

ここまで、回答になった部分はありましたでしょうか？？

質問者さんの求めるデザインは、画像を使われなくても、CSSだけでも結構できます。
参考までに、僕が似せて作ったデザインのソースを記述しておきます。
コピペしてブラウザで見ていただけたら幸いです。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
.container {
width: 100%;
margin: 120px auto;
}
.nav-wrap {
width: 100%;
background: linear-gradient(#e77, #c33);
}
.nav {
width: 960px;
margin: 0 auto;
}
.nav-item {
position: relative;
float: left;
width: 192px; /*960 / 5*/
height: 60px;
line-height: 60px;
font-size: 1.5em;
text-align: center;
}
.nav-item a {
color: #fff;
text-shadow: 1px 1px 3px #333;
text-decoration: none;
}
.nav-item:hover {
background: linear-gradient(#f88, #d44);
}
.nav-item:hover::before {
content: "";
position: absolute;
top: -6px; /*border分*/
left: 0;
width: 180px; /*親width - border分*/
height: 100%;
border: 6px solid #dd4;
border-radius: 4px;
}
.nav-item:hover a {
color: #ffe;
}
.clearfix {
zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="nav-wrap">
<ul class="nav clearfix">
<li class="nav-item"><a href="#">Menu1</a></li>
<li class="nav-item"><a href="#">Menu2</a></li>
<li class="nav-item"><a href="#">Menu3</a></li>
<li class="nav-item"><a href="#">Menu4</a></li>
<li class="nav-item"><a href="#">Menu5</a></li>
</ul>
</div>
</div>
</body>
</html>
「【CSS】【HTML】横並びメニューにつ」の回答画像1
この回答への補足あり
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報