はheaderやfooterを囲む（最大幅指定） ------------------------------------------------------------*/ section{ max-width: 960px; /* 最大幅を指定 */ margin-left : auto; margin-right : auto; padding-left : 10px; padding-right : 10px; } /* 複数のDIVを囲む ------------------------------------------------------------*/ article{ margin-left : auto; margin-right : auto; } .article{ margin-left : auto; margin-right : auto; } /* 中のDIVを横並べにする ------------------------------------------------------------*/ .flex{ display : flex; } /* 半分枠（PC、mobile共通） ------------------------------------------------------------*/ .whalf{ width : 45%; float : left; position : relative ; padding : 2%; margin : 0.5%; } /* 枠★幅を指定（モバイルでは全体幅） ------------------------------------------------------------*/ .w1-2,.w1-3,.w1-4,.w1-5,.w2-3{ width : 100%; } /* 枠★余白を指定 ------------------------------------------------------------*/ .in{ padding : 10px; } /* 枠★囲み罫 ------------------------------------------------------------*/ .wa{ border-width : 1px;border-style : solid;border-color : silver; margin-top : 1%; margin-left : 1%; margin-right : 1%; margin-bottom : 1%; padding-top : 2.5%; padding-left : 2.5%; padding-right : 2.5%; padding-bottom : 2.5%; width : 93%; } /* 枠★囲み罫（角丸） ------------------------------------------------------------*/ .wm{ /*↓角丸 */ -webkit-border-radius: 5px; /* Safari, Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ border-radius: 5px; /* CSS3 */ } /* 枠★囲み罫にシャドウをつける ------------------------------------------------------------*/ .ws{ /*↓影をつける */ -webkit-box-shadow: 2px 2px 3px #CCC; /* Safari, Chrome用 */ -moz-box-shadow: 2px 2px 3px #CCC; /* Firefox用 */ box-shadow: 2px 2px 3px #CCC; /* CSS3 */ } /* ＰＣ用 ------------------------------------------------------------*/ @media all and (min-width: 960px) { /* 囲む ------------------------------------------------------------*/ .wrapper{ display : table; /* ※3段組の作成 */ border-spacing: 0em 0px ; margin : 0px auto; width : 1020px; } /* 複数のDIVを囲む ------------------------------------------------------------*/ article{ width : 100%; display : flex;/* 中のDIVを横並べにするため */ } /* 枠 ------------------------------------------------------------*/ .w1-2{ width : 50%; float : left; position : relative ; } .w1-3{ width : 33.333%; float : left; position : relative ; } .w1-4{ width : 25%; float : left; position : relative ; } .w1-5{ width : 20%; float : left; position : relative ; } .w2-3{ width : 66.666%; float : left; position : relative ; } /* 枠★囲み罫 ------------------------------------------------------------*/ .wa{ border-width : 1px;border-style : solid;border-color : silver; padding-top : 20px; padding-left : 20px; padding-right : 20px; padding-bottom : 20px; margin-top : 5px; margin-left : 5px; margin-right : 5px; margin-bottom : 5px; } /* 枠★余白を指定 ------------------------------------------------------------*/ .in{ padding-top : 20px; padding-left : 20px; padding-right : 20px; padding-bottom : 20px; margin-top : 5px; margin-left : 5px; margin-right : 5px; margin-bottom : 5px; } }