ALICE+サポート タグ・デザイン掲示板 TOPページ タグ・デザイン掲示板 テンプレートが崩れてしまいます。 タグ・デザイン掲示板 『テンプレートが崩れてしまいます。』へのコメント投稿 記事 10 へのレス:>>9 <style type="text/css"> @charset "UTF-8"; @import url('https://fonts.googleapis.com/css?family=Quicksand'); @media screen and (min-width: 801px) { .wrp { max-width: 1000px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content:space-around; } .title{ position: -webkit-sticky; position: sticky; top: 50px; width: 20%; height: 60%; } .main { right: 0; width: 70%; height:auto; } .text,.long { display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content:space-around; } .text > .box,.text > .box2 { width: 40%; margin: 30px 0 20px; } .str { width: 45%; } .fm { width: 50%; } h2 { padding: 0 10px 10px; margin: 0 0 30px; } } @media screen and (max-width: 800px) { .wrp { max-width: 500px; } .title { max-width: 250px; margin: 0 auto; } .main { margin: 50px 25px 30px; } h2 { padding: 10px; margin: 30px 0; } } body { background: #fff; color: #555; font-size: 12px; font-family: 'Quicksand', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; line-height: 180%; letter-spacing: 2px; margin: 0; } a { color: #999; text-decoration: none; padding: 0 3px; } a:hover, active { position: relative; top: 0; color: #555; background: #ffb874; } h1 { margin: 20px auto 0; font-size: 14px; z-index: 10; font-weight:200; text-transform: uppercase; line-height: 100%; } h2 { text-transform: uppercase; position: relative; } h2::before,h2::after { position: absolute; bottom: -4px; left: 0; content: ''; height: 4px; } h2::before { z-index: 2; width: 20%; background-color: #ce9454; } h2::after { width: 100%; background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #eee 2px, #eee 4px); background: repeating-linear-gradient(45deg, #fff, #fff 2px, #eee 2px, #eee 4px); } h3,h4 { margin: 0 auto 20px; padding: 5px 15px; font-size: 14px; text-transform: uppercase; display: inline-block; } .box h3 { background: #ffb874; } .box2 h3 { background: #fff; } h4 { border-bottom: solid 2px #ccc; } b { background: #eee; padding:0 3px; font-weight:200; } strong { background: #ce9454; color:#fff; padding: 0 5px; border-radius: 3px; margin-left: 5px; font-weight: 200; } footer { border-top: double 3px #eee; margin: 30px 0 0; padding-top: 15px; text-align: center; } .wrp { margin: 50px auto 20px; } .menu { text-align: center; line-height: 100%; } .menu a,.menu span{ color: #555; font-size: 13px; width:60px; text-align:center; display: inline-block; margin: 4px 2px; padding: 24px 0; text-transform: uppercase; } .menu a { background: #ffb874; } .menu span,.menu a:hover { background-image: linear-gradient( -45deg, #fff 25%, #ffb874 25%, #ffb874 50%, #fff 50%, #fff 75%, #ffb874 75%, #ffb874 ); background-size: 10px 10px; } .top { text-align:center; } .top p{ color:#eee; position:relative; bottom: 24px; z-index: -1; letter-spacing: 3px; margin-bottom: -15px; } .box,.box2,.note { margin: 30px 20px 20px; padding: 15px; } .box,.note:nth-child(2n) { border: solid 1px #999; background: #fff; } .box2,.note { border: solid 1px #eee; background: #eee; } .box span,.box2 span { background: #999; color:#fff; padding: 0 5px; margin-right: 10px; text-transform: uppercase; } .cen { text-align: center; } .note { position: relative; } .note p { margin:-15px 0 20px 20px; padding: 5px 10px 0; color: #999; border-left: double 3px #ccc; } .note:before { border-top: 20px solid #ffb874; border-right: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #ffb874; top: 0; left:0; position:absolute; content:""; } .ri { text-align: right; } .ri a { background: #555; color: #fff; padding: 3px; width: 100px; display: inline-block; text-align: center; border-radius:3px; } .ri a:hover { position: relatve; top:1px; } .ttl { display: inline-block; padding: 2px 10px; margin-top: 10px; color: #555; font-weight:700; border-left: solid 10px #ce9454; } .sec { font-size:10px; color:#999; margin: 5px 0 0 15px; padding:0 10px 3px; line-height: 25px; background-image: linear-gradient(#eee 1px, transparent 1px); background-size: 25px 25px; } .ft { border-top: double 3px #eee; margin: 30px 0 0; padding-top: 15px; text-align:center; } .ft a,.ft span { margin: 10px; padding: 3px 15px; text-transform: uppercase; } .ft span { text-decoration: line-through; } input[type],textarea{ -webkit-appearance: none; font-size: 12px; font-family: 'Quicksand', 'STHeitiSC-Light', 'Microsoft YaHei', gulim, メイリオ, sans-serif; line-height: 180%; letter-spacing: 2px; } textarea,input[type=text] { color: #555; background: #eee; border: solid 2px #eee; border-radius: 3px; margin: 10px 0 20px; padding: 3px; box-shadow: none; } textarea { width: 90%; height: 100px; } input[type=text] { width: 80%; height: auto; } input[type=submit]{ height: 30px; width: 50%; color: #fff; border-radius: 3px; cursor: pointer; text-shadow: none; background: #555; font-weight: 200; margin: 0; border: none; text-transform: uppercase; } #pagetop { position: fixed; bottom: 20px; right: 20px; background: #ffb874; width:40px; text-align: center; text-transform: uppercase; font-size: 10px; z-index: 1; } #pagetop a{ color: #555; display: block; padding:10px 0; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){ $('#pagetop').hide(); $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('#pagetop').fadeIn(); } else { $('#pagetop').fadeOut(); } }); $('#pagetop').click(function(){ $('html,body').animate({ scrollTop: 0 }, 600); return false; }); }); </script> ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>10 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート