質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

Hoverでの背景のカラー設定をしたら全体にひろがってしまいます

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 289

score 8

イメージ説明

添付した画像のようになってしまいます。

コードを上げるので原因と直しか他を教えて頂きたいと存じます。
初心者で初歩的な質問ですみませんが、よろしくお願い致します。

HTMLーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet">
<title>無題ドキュメント</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script>
$(function(){

$("#menubtn").click(function(){
$("#menu").slideToggle();
});

});
</script>
</head>
<body>
<div class="boxA">
<div class="boxA-inner">
<div class="box1">
<div class="site">
<h1><a href="#"><img src="images/logo-large.png" width="250" height="33" alt="timeswitch"></a></h1>
</div>
</div>
<div class="box2">
<button type="button" id="menubtn"> <i class="fa fa-bars"></i><span>MENU</span> </button>
<nav class="menu" id="menu">
<ul>
<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>
</nav>
</div>
</div>
</div>

<div class="box7">
<div class="box7-1">

<article class="kiji">

<h1>データの分析・解析</h1>

<img src="img/header-data.jpg" alt="" class="kijiimg">

<p class="lead">蓄積したデータを活用するためには、いかに分析・解析するかが大切なポイントとなります。TimeSwitchでは標準的な視点からの分析に加えて、活用目的に応じた解析も提供します。</p>

<h2><i class="fa fa-check-square-o"></i>平均値のチェック</h2>

<p>基本的な平均値のチェックです。対象データ群の代表的な値を知ることができます。ただし、平均値だけではデータの偏りなどの問題は見えてきません。</p>

<h2><i class="fa fa-check-square-o"></i>分布のチェック</h2>

<p>統計的手法を用い、蓄積したデータの分布をチェックします。これにより、平均値だけでは見えてこない問題や特徴を導き出します。</p>

<h2><i class="fa fa-check-square-o"></i>相関関係・因果関係の抽出</h2>

<p>複数のデータを組み合わせて分析・解析し、相関関係および因果関係があると考えられるデータを抽出します。</p>

</article>

</div>
<div class="box7-2">

<aside class="sidemenu">
<ul>
<li><a href="#">データの蓄積</a></li>
<li><a href="#">データの分析・解析</a></li>
<li><a href="#">わかりやすく視覚化</a></li>
<li><a href="#">アプリで有効活用</a></li>
<li><a href="#">24時間サポート</a></li>
<li><a href="#">実績紹介</a></li>
</ul>
</aside>

</div>
</div>    

<div class="box5">
<div class="box5-inner">
<div class="copyright">
<p>copyright &copy;TimeSwitch</p>
</div>
</div>
</div>
</body>
</html>

cssーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

@charset "UTF-8";
/* CSS Document */
body {
margin: 0;
}
/*site*/
.site h1 a {
color: #000000;
text-decoration: none;
}
.site h1 {
margin: 0;
font-size: 30px;
}
.site img {
border: none;
}

/*top*/

.catch{ margin:0;
padding:15px;
background-color: rgba(255,255,255,0.7);
font-size:28px;

}

.top {
position:relative;
}

.catch{position:absolute;
bottom:7%;
left:3%;

}

/*gaiyou*/

.gaiyou h1{
margin-top:0;
margin-bottom:0;
padding-top:5px;
padding-bottom:5px;
font-size:20px;
font-weight:nomal;
}

.gaiyou p{margin-top:0;
margin-bottom:0;
padding-top:15px;
padding-bottom:15px;
background-color:#524e34;
font-size:12px;
}

.gaiyou i{font-size:38px;}

.gaiyou a
{display: block;
background-color:#222222;
color:#ffffff;
text-decoration:none;
text-align: center;    
}

.gaiyou a:hover{opcity:0.8;}

.gaiyou i {display:block;
padding-top:40px;
padding-bottom:40px;
}

.gaiyou .fa-bar-chart-o{background-color:#c58839;}

.gaiyou .fa-database{background-color:#bfbd13;}

.gaiyou .fa-envelope{background-color:#859f46;}

.box6{padding-top:20px;}

/*side2*/

.sidemenu ul{
margin:0;
padding:0;
list-style:none;       
}

.sidemenu li a{
display: block;
padding:5px;
color:#000000;
font-size:14px;
text-decoration:none;

}

.sidemenu li a:hover{background-color:#dddddd;}

/*box3*/
.topimg {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
/*nwes*/
.news {
padding: 20px;
border: solid 5px #dddddd;
}
.news ul {
margin: 0;
padding: 0;
list-style: none;
}
.news li a {
display: block;
padding: 10px 15px;
border-bottom: dotted 2px #dddddd;
color: #000000;
font-size: 14px;
text-decoration: none;
}
.news time {
margin-right: 10px;
color: #888888;
font-weight: bold;
}
.news a:hover {
background-color: #eeeeee;
}
.news h1 {
margin-top: 0;
margin-bottom: 5px;
font-size: 18px;
color: none;
}
.news a:after {
content: "";
display: block;
clear: both;
}
.news time {
float: left;
width: 60px;
}
.news .text {
float: left;
width: auto;
width-left: 60px;
}
/*copyright*/
.copyright p {
margin: 0;
color: #666666;
font-size: 14px;
}
/*yohaku*/
.boxA, .box4, .box5 ,.box6,.box7{
padding-right: 15px;
padding-left: 15px;
}

.box6-1,.box6-2,.box6-3{

padding-bottom:10px;}

.boxA {
padding-top: 20px;
padding-bottom: 20px;
}
.boxA {
margin-bottom: 20px;
border-bottom: solid 1px #dddddd;
}
.box4 {
padding-top: 20px;
padding-bottom: 20px;
}
.box5 {
padding-top: 15px;
padding-bottom: 15px;
background-color: #dddddd;
}

.box7{
padding-top:25px;
padding-bottom:25px;
}

/*sns*/
.follow ul {
margin: 0;
padding: 0;
list-style: none;
}
.follow li a {
display: block;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
color: #ffffff;
font-size: 14px;
text-decoration: none;
}
.follow li a:hover {
opacity: 0.8;
}
.follow-tw {
background-color: #63bafb;
}
.follow-fb {
background-color: #5288f7;
}
.follow-gp {
background-color: #f65d4a;
}
.follow i {
margin-right: 10px;
font-size: 24px;
vertical-align: middle;
}

.box4-1{padding-bottom:20px;}

.follow-info{
margin-bottom:0;
margin-bottom:14px;
padding:10px;
background-color:#dddddd;
text-align:center;
font-size:14px;

}

.follow-info {
position: relative;
background: #dddddd;
}
.follow-info:after {
top: 100%;
left: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(221, 221, 221, 0);
border-top-color: #dddddd;
border-width: 15px;
margin-left: -15px;
}

/*contetu*/

.kiji h1{margin-top:0;
font-size:36px;
}

.kiji h2{margin-top:0;
margin-bottom:20px;
}

@media(max-width:359px){
.site img{

width:225px;
height:auto;

}

}

@media (max-width: 599px) {

/* ナビゲーション */
.menu li a    {padding: 10px 7px;
font-size: 11px}

.catch{
padding:5px 10px;
font-size:12px;
}        
}

@media(max-width:768px){

menu{display:none;}    

menubtn {

padding:6px 12px;
border:solid 1px #aaaaaa;
border-radius:5px;
background-color:#ffffff;
position:absolute;
top:20px;
right:15px;
cursor:pointer;

}

menubtn:hover{background-color:#dddddd}

menubtn:focus{outline:none;}

menubtn span    {display: inline-block;

text-indent: -9999px}

menubtn i{

color:#888888;
font-size:18px;
}

.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu li a {
display: block;
padding: 10px 15px;
color: #000000;
font-size: 14px;
text-decoration: none;
}
.menu li a:hover {
background-color: #eeeeee;
}

}

@media(min-width:768px) {

menubtn    {display: none}

/* ナビゲーション */

menu    {display: block !important}

.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu li a {
display: block;
padding: 10px 15px;
color: #000000;
font-size: 14px;
text-decoration: none;
}
.menu li a:hover {
background-color: #eeeeee;
}
.menu ul:after {
content: "";
display: block;
clear: both;
}
.menu li {
float: left;
width: auto;
}

.boxA:after {
content: "";
display: block;
clear: both;
}
.box1 {
float: left;
width: auto;
}
.box2 {
float: right;
width: auto;
}
.box4:after {
content: "";
display: block;
clear: both;
}
.box4-1 {
float: left;
width: 70%;
padding-right: 35px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.box4-2 {
float: left;
width: 30%;
}

.box6:after{content:"";
display:block;
clear:both;

}

.box6-1{float:left;
width:32%;
margin-right:2%;
}

.box6-3{float:left;
width:32%

}

.box6-2{float:left;
width:32%;
margin-right:2%;
}

.box7:after{
content:"";
display:block;
clear:both;

}

.box7-1{
float:right;
width:80%;

}

.box-2{
float:left;
width:20%;
}

}
@media (min-width:1190px) {
.box3, .box4, .boxA-inner, .box5-inner,.box6,.box7 {
width: 1040px;
margin-left: auto;
margin-right: auto;
}
}

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

サイドメニュー要素に適切な幅を設定すればいいでしょう。

.sidemenu {
  width: 150px;
}

サイドメニューとメイン部分の横並びをfloatでしていますがこれは古い手法です。現在ではFlexboxでするのが主流です。こちらのほうがシンプルに実装できますし、レイアウトの自由度も高いです。Flexboxについて学習されることをお勧めしておきます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る