Q&A
添付した画像のようになってしまいます。
コードを上げるので原因と直しか他を教えて頂きたいと存じます。
初心者で初歩的な質問ですみませんが、よろしくお願い致します。
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>
</div> <div class="box7-2"><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> <div class="box5"> <div class="box5-inner"> <div class="copyright"> <p>copyright ©TimeSwitch</p> </div> </div> </div> </body> </html><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>
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;
}
}
回答1件
0
ベストアンサー
サイドメニュー要素に適切な幅を設定すればいいでしょう。
css
1.sidemenu { 2 width: 150px; 3}
サイドメニューとメイン部分の横並びをfloatでしていますがこれは古い手法です。現在ではFlexboxでするのが主流です。こちらのほうがシンプルに実装できますし、レイアウトの自由度も高いです。Flexboxについて学習されることをお勧めしておきます。
投稿2020/12/13 18:21
総合スコア33699
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。