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

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

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

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

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

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

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

A 回答 (2件)

ソース拝見しました。



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

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

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

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

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

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

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

お礼日時:2017/05/21 03:37

こんばんは。



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&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

QCSSを使って文章の行間を調節したいです。

あいうえお
かきくけこ
さしすせそ
たちつてと

の文章に、

HTMLに直接スタイルを記述するやり方(インラインっていうのでしょうか??)
で、行間を開けたいため、line-height属性を使い次のように記述したのですが・・

<p>あいうえお</p>
<p style="line-height:5;">
かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>


これをブラウザで見ますと・・


あいうえお

かきくけこ

さしすせそ
たちつてと

と表示されました。




これを

あいうえお

かきくけこ
さしすせそ
たちつてと

と、なるように
(かきくけこ。さしすせそ。の間は開けないで・・)
表示させるには
どのようにCSSを記述すればよろしいでしょうか?

CSSを外部ファイル内や、<head>タグ内に記述するやり方ではなく、
直接HTMLタグにスタイルを記述するやり方を教えてください。

どなたかわかる方・・・・助けてください。。

私、初心者です。
わかりやすくお願いします。m(__)m

あいうえお
かきくけこ
さしすせそ
たちつてと

の文章に、

HTMLに直接スタイルを記述するやり方(インラインっていうのでしょうか??)
で、行間を開けたいため、line-height属性を使い次のように記述したのですが・・

<p>あいうえお</p>
<p style="line-height:5;">
かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>


これをブラウザで見ますと・・


あいうえお

かきくけこ

さしすせそ
たちつてと

と表示されました。




これを

あいうえお

かきくけこ
さ...続きを読む

Aベストアンサー

今line-height:5となっているところを、
margin-top:〇〇px
としてみてください。

ただCSSを別ファイルに分けないで記述するのはどうかと思いますが。

Qレスポンシブ時の画像切り替え

レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
backgroundで隠している状態なので、%が合わなく画像が見えてしまった状態です。PCのデザインではうまくいくのですが幅を%にすると重ならないです。
SP時のナビデザインはこのようなものを目指しております。
宜しくお願い致します><

<div class="nav_bar">
<nav>
<ul class="nav_bar_in">
<li class="nav_01"><a href="#theme"><img class="pc" src="./img/nav_01_off.png" alt="" width="262"><img class="sp" src="./img/nav_01_sp_off.png" alt="スマートフォン用の画像" width="100%"></a></li>
<li class="nav_02"><a href="#plan"><img class="pc" src="./img/nav_02_off.png" alt="" width="262"><img class="sp" src="./img/nav_02_sp_off.png" alt="スマートフォン用の画像" width="100%"></a></li>




pc { display: none !important; }
.sp { display: block !important; }

.nav_bar li {
width: 50%;
float: left;
}
.nav_01{
background: url(../img/nav_01_sp_on.png) no-repeat;
}

レスポンシブ時にグローバルナビの各コンテンツ画像をマウスオーバーしたときに切り替えたいのですがうまくいきません。
backgroundで隠している状態なので、%が合わなく画像が見えてしまった状態です。PCのデザインではうまくいくのですが幅を%にすると重ならないです。
SP時のナビデザインはこのようなものを目指しております。
宜しくお願い致します><

<div class="nav_bar">
<nav>
<ul class="nav_bar_in">
<l...続きを読む

Aベストアンサー

僕の読解力が足らず、状況を良く呑み込めませんが、気付いたのは、
imgタグのwidth属性に"100%"の指定は効かないと思います。

HTML5でしたら、width属性、height属性は廃止されているので、
レスポンシブに用いるのでしたら、

img {
display: block;
max-width: 100%;
height: auto;
}

としておけば良いです。

あと、スマートフォン、タブレットでマウスオーバーは無意味だと思います。
タッチ操作なので。

Qul,table要素をランダムに並び替える方法を教えてください

下記サイトを参考にさせていただき、div要素のランダムな並び替えはできました。
http://www.finefinefine.jp/jquery/kiji2068/
しかし、ul要素のliやtable要素のtdの並び替えをしようとしたところ、
並び替えはできるのですが、CSSファイルの設定が無視されてしまいます。
liやtdの並び替えの方法を教えてください。
よろしくお願い致します。

Aベストアンサー

どのようなcss設定なのでしょうか??
並べ替える要素ごとに設定されているということですか?
参照URLのソースを見てみたところ、

(1) <li>や<td>に設定されているクラス
(2) first-child等の疑似クラス

上記2点は、反映されません。
(2)の場合は当然無理ですが、(1)の場合だったら、以下のスクリプトに書き変えてください。
ID、クラスごと入れ替えるように工夫してみました。

$(function () {
 var arr = [];
 $("#sample li").each(function () {
 arr.push($(this).detach());
 });
 arr.sort(function () {
  return Math.random() - Math.random();
 });
 $("#sample").empty();
 for (i = 0; i < arr.length; i++) {
  $("#sample").append(arr[i]);
 }
});

Q画像と同じCSSデザインにしたいのですが、やり方が分かりません。

現在趣味でサイト制作をしている、プログラミング初心者です。
下記の参考画像のようなCSSデザインにしたいのですが、やり方が分からないため質問致しました。

参考画像のように、スマホで閲覧した際に「画像の上に文字列を配置し、文字列を半透明の枠で囲んでる」デザインにしたいのですが、どうしたら良いか分かりません。

ご教授お願い致します!

※レスポンシブのやり方は把握しております。

Aベストアンサー

これは思った以上に難しいかも知れません。
ブラウザによって見え方も違ってくるかも。
一番確実で安全な方法は、半透明グレー枠+テキストを画像に合成してしまうことです。
アルファチャンネルとレイヤー対応画像編集ソフトでできます。

作例はGIMP

Qサイトに表示しているテキスト(タグ?)について

今日は、サイトのある部分についての事について質問させてください。

右メニューなどに「タグ」「関連トピック」などの定義で
テキストをいくつか並べているサイトを最近よく見かけます。

例)まとめnaver
 https://matome.naver.jp/

これをすることによって、何が変わってくるのでしょうか?
また、これは手動で作っていくのか、自動で何かが表示されるように
しているのか……
など、上記テクニックの検索キーワードが思いつかず、
ご相談させていただきました。

Aベストアンサー

お探しのキーワードは、「タグクラウド」ではありませんか??

タグクラウドを設置する表の目的は、ユーザー(サイトの閲覧者)にとって便利であろう、という計らいです。
その単語をクリックすると、その単語に関連する記事だけを抽出して見られるのはご存知ですよね。
「カテゴリー」と異なるのは、一つの記事に対して複数設定できる、という点でしょうか。

でも確かに使う人少ないですよね?
もう一つ、いわば裏の目的として、SEO(検索エンジン最適化)のための対策と考えられます。

タグクラウドは、プログラムによって自動生成するものです。
主にPHPなどのプログラミング言語と、データベースという道具を使います。(ちなみに僕も作ったことあります。)
ブログの記事ページや、ショッピングサイトの商品ページのようなものは、
日付、記事タイトル、記事内容、画像、カテゴリー・・・というように、決めた形式でデータを管理しています。
この中に「タグ」というデータを設け、全データからその数や最大値をプログラムで割り出して、表示させます。

Webサイトは、内包するページ数が多いほど、検索上位に挙がってきやすいと考えられていたため、一時流行った名残ではないでしょうか。
しかしながら、今どきのSEOでは、似たようなページが多いことは、むしろペナルティと考えられる場合もあります。
この辺りはSEOの専門家の中でも、意見が分かれるところでしょう。
検索上位を表示するプログラムの仕様は明らかにされていないため、決定的な答えは出ません。

ツィッターやインスタグラム等のSNSでも「ハッシュタグ」と呼ばれるものがあり、SNSのハッシュタグで何かを検索する方は、非常に多いですよね。
一方で、Webサイトのタグクラウドを使いこなしているユーザーは少ないと思われます。
デザインによっては、何かかっこよく見えたりもして、Web系のエンジニアの読本にも、タグクラウドっぽいテキストが付いてたりします。
結局のところ、Webサイトにタグクラウドを設けるか設けないかは、好みの問題かと思います。
設置したから使う人もいれば、使わない人もいるでしょう。

技術に関するご質問でしたら、質問を変えるか、
「タグクラウド」、「作り方」で検索されてください。

少しは役に立つ説明になったでしょうか?

お探しのキーワードは、「タグクラウド」ではありませんか??

タグクラウドを設置する表の目的は、ユーザー(サイトの閲覧者)にとって便利であろう、という計らいです。
その単語をクリックすると、その単語に関連する記事だけを抽出して見られるのはご存知ですよね。
「カテゴリー」と異なるのは、一つの記事に対して複数設定できる、という点でしょうか。

でも確かに使う人少ないですよね?
もう一つ、いわば裏の目的として、SEO(検索エンジン最適化)のための対策と考えられます。

タグクラウドは、プロ...続きを読む

Qブログで動画の広告を中央に配置するにはどうしたらいいでしょうか?

ブログに動画の広告を貼り付けたいのですが、HTMLに広告のURLを貼り付けたところ、右側に少しずれてしまいます。下記のHTMLとCSSの構成を見ていただくとわかると思うのですが、テンプレートにインフォメーションという箇所があり、ブログでお知らせなどを記載できる場所があるのですが、そのインフォメーションの場所に動画の広告を貼り付けようとしたところ、右側にずれて貼り付けられてしまいます。paddingやmarginなどの値もいじってみたのですが、ずれ幅が少し変わるくらいで、やはり右側にずれたままで、インフォメーション枠の中央におさめることができません。
HTMLもCSSも勉強し始めたばかりで、わからないことだらけだったので、他でもいろいろ調べました。いろいろやり方はあるようですが、どれも自分の例に当てはめられず解決できませんでした。
少しわかったことは、iframeというのが、ブロックレベル要素ではないからmarginで中央寄せが出来ないということだけでした。
動画の広告を中央に寄せるために、どこにどういった記述をしたらよいのか教えていただけないでしょうか。分かりづらくてすみませんがよろしくお願いします。
下記にCSSが①と②でわかれているのは、両方にインフォメーションの記述があるからで、どちらが必要かわからなかったため、両方載せてます。


<!--▼トップインフォメーション・開始▼--> [HTML]
<!--index_area-->
<div class="topinfo">
<iframe src="http://****/dynamic/30609/01/" marginwidth="0" marginheight="0" width="600" height="200" border="0" frameborder="0" style="border:none;" scrolling="no"><a href="http://****/30609-01" target="_blank">*****</a></iframe>
</div>
<!--/index_area-->
<!--▲トップインフォメーション・終了▼-->



/*トップインフォメーション*/  [CSS①]
.topinfo{
padding: 4em 1em 1em 1em;
background:#ffffff url(http://****/h/o/p/*****/3red-topinformation.gif) top left no-repeat;
border: solid 1px #b0b0b0;
margin-top: 5px;
}


/*--------------------------------------------------------
●トップインフォメーション              [CSS②]
--------------------------------------------------------*/
.topinfo{
font-size: 0.875em;
text-align: left;
margin-bottom: 2em;
}

ブログに動画の広告を貼り付けたいのですが、HTMLに広告のURLを貼り付けたところ、右側に少しずれてしまいます。下記のHTMLとCSSの構成を見ていただくとわかると思うのですが、テンプレートにインフォメーションという箇所があり、ブログでお知らせなどを記載できる場所があるのですが、そのインフォメーションの場所に動画の広告を貼り付けようとしたところ、右側にずれて貼り付けられてしまいます。paddingやmarginなどの値もいじってみたのですが、ずれ幅が少し変わるくらいで、やはり右側にずれたままで、イン...続きを読む

Aベストアンサー

動画のサイズwidth="600" height="200"が大きすぎてブログの記事幅を超えるから中央寄せが出来ずにいます。

iframe内の「width="600" height="200"」をもっと小さくしてしまえば<center>
<iframe・・・・・・・ </iframe>
</center>

で寄る筈です。width="300" くらいから調整して見て下さい。

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。

Qulタグやliタグの中でbrタグは使えない?

完成したサイトなのですが…。
Dreamweaverにて開いて一応チェックすると、
「タグbrはur内では使用できません」との表示がでて驚いています。

<li>~</li>だけで自動的になされる改行だと、詰まって見えるのです。
だから、

<ul style="padding-left: 00px;">
<li>~</li></br>
<li>~</li></br>
</ul>

のようにして処理しております。ただ、これってSEO的にマズい、ということなのでしょうか?
どうか、ご存知の方いましたら教えてください。

Aベストアンサー

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.1 )を参照すること

したがって
<ul>
 <li>・・・<br>
 <li>・・・<br>
</ul>
とは書けます。(HTMLの場合)
その場合、ブラウザは
<ul>
 <li>・・・<br></li>
 <li>・・・<br></li>
</ul>
と解釈します。(XHTMLはこう書かないとならない)

★もっと、はるかに大事なこと
「<li>~</li>だけで自動的になされる改行だと、詰まって見えるので」<br>を入れるは、HTML的には最大の間違いです。こちらのほうがはるかに重要!!
 構造とプレゼンテーションは区別すること。デザインのためにHTMLを書いてはなりません。
 2.3.2 アクセス性 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.2 )

スタイルシートで、
ul li{margin-bottom:1em;}
だけでよい。

SEO(検索エンジン最適化)には無関係ですが、文法的には誤りです。
→10.2 順不同リスト (UL)、序列リスト (OL)、及びリスト項目(LI)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/lists.html#edef-UL )

<!ELEMENT UL - - (LI)+ -- unordered list -->
ulには、「li要素のみを一個以上もつ。」と書かれています。


<!ELEMENT LI - O (%flow;)* -- list item -->
li要素には、%flowをゼロ個以上もつ、終了タグは省略できる。

読み方は、3.3.3 要素宣言 ( http://www.asahi-net.or.jp...続きを読む

QTableが指定した通りのサイズにならない。

どなたかご教授下さい。
下記のHTMLコードを記述しています。楽天GOLDのサイトを制作しています。

WrapperからTABLEだけ出てるので、DREAMWEAVERのインスペクト機能を利用して実際に適用されているサイズを見たのですが、指定したサイズになっていないようです。

200で指定したwidthが215px 500pxで指定したwidthが527pxになっています。
ピッタリ700pxにしたいのですが、どのようにしたらよろしでしょうか?

<table width="750" border="1" class="payment_info_table">
<thead>
<tr>
<td width="200" class="payment_info_td1">カード会社</td>
<td width="500" class="payment_info_td2">支払方法</td>
</tr>
</thead>
<tbody>
<tr>
<td width="200" class="payment_info_td1">VISA</td>
<td width="500" class="payment_info_td2">リボ,分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">MASTER</td>
<td width="500" class="payment_info_td2">リボ,分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">JCB</td>
<td width="500" class="payment_info_td2">リボ,分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">AMEX</td>
<td width="500" class="payment_info_td2">分割(3,5,6,10,12,15,18,20,24 回が可能です)</td>
</tr>
<tr>
<td width="200" class="payment_info_td1">Diners</td>
<td width="500" class="payment_info_td2">リボ</td>
</tr>
</tbody>
</table>

どなたかご教授下さい。
下記のHTMLコードを記述しています。楽天GOLDのサイトを制作しています。

WrapperからTABLEだけ出てるので、DREAMWEAVERのインスペクト機能を利用して実際に適用されているサイズを見たのですが、指定したサイズになっていないようです。

200で指定したwidthが215px 500pxで指定したwidthが527pxになっています。
ピッタリ700pxにしたいのですが、どのようにしたらよろしでしょうか?

<table width="750" border="1" class="payment_info_table">
<thead>
...続きを読む

Aベストアンサー

こんにちは

ご提示のHTMLでは2列の表で
TABLE width:750px
1列目 width:200px
2列目 width:500px
が指定されています。

構文的におかしかったり、矛盾した指定がある場合でも、ブラウザは極力表示しようとしますが、その際にどう解釈(修正)されるかはブラウザ依存だと思います。
まずは、親要素を700pxにしてみてはいかがですか?


なお、一般的に要素の幅(width)は、margin、padding、border-widthなどと関連して決められています。
https://developer.mozilla.org/ja/docs/Web/CSS/Box_model

また、その計算にどのような方法を用いるかを指定することも可能です。
https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

tableの場合には、上記の他にも、cellspacing (border-spacing)等も関係していますので、無駄に悩まないためにも、このあたりを整理して覚えておくとよろしいのではないでしょうか。

こんにちは

ご提示のHTMLでは2列の表で
TABLE width:750px
1列目 width:200px
2列目 width:500px
が指定されています。

構文的におかしかったり、矛盾した指定がある場合でも、ブラウザは極力表示しようとしますが、その際にどう解釈(修正)されるかはブラウザ依存だと思います。
まずは、親要素を700pxにしてみてはいかがですか?


なお、一般的に要素の幅(width)は、margin、padding、border-widthなどと関連して決められています。
https://developer.mozilla.org/ja/docs/Web/CSS/Box_model

また、そ...続きを読む

Qgoogleマップのストリートビュー表示における拡大縮小について

ストリートビュー表示の際に、右画面下部の+-のボタン、またはマウスのスクロールボタンで拡大縮小ができるわけですが、細かい縮尺で微調整できればと考えているのですが、その方法がわかりません。
おわかりの方、ご教授お願い致します。

Aベストアンサー

#1です。

>写真部分が反映されないようです。

・タブブラウザの場合、タブ毎に拡大・縮小が必要です。

 同一Tab内の場合は、拡大・縮小率は維持されます。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報