Q&A
背景にメモの画像を指定してCSS background-attachment: fixed;
を指定し背景を動かないようにさせ、固定させ、指定した範囲内(ボックス内)にのみ文字を表示させ、その範囲のみテキストをスクロールさせる方法を教えてください
html
1<!DOCTYPE html> 2<head> 3 <meta charset="utf-8"> 4 <title>The FFlikes</title> 5 <meta name="author" content="Sam Norton"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> 7 8 9 <link rel="stylesheet" href="../css/normalize.css" media="all"> 10 <link rel="stylesheet" href="../css/style.css" media="all"> 11 <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic|Raleway:400,200,300,500,700,600,800,900' rel='stylesheet' type='text/css'> 12 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 13 14 <script src="../js/jquery-1.11.1.min.js"></script> 15 <script src="../js/device.min.js"></script> <!--OPTIONAL JQUERY PLUGIN--> 16 <script src="../js/jquery.mb.YTPlayer.js"></script> 17 <script src="../js/custom.js"></script> 18 19 20 <meta name="robots" content="noindex,follow" /> 21</head> 22 23<body> 24 <div class="wrapper"> 25 <section class="about-section"> 26 27 <div class="about-section-container"> 28 <h2 class="about-section-title" style="text-align: left">基本的なルール</h2> 29 <ol type="1" style="text-align: left"> 30 <li>入会後は必ず自己紹介をお願いします。</li> 31 <li>②荒らしや誹謗中傷以外の投稿・コメントであれば自由にお使いください。静止画動画など活発な投稿をお待ちいたしております。 </li> 32 <li>③他の方の投稿やコメントに、「リアクション」もしくはコメントを返し合いましょう。新規入会の方へ対して、できるだけ歓迎のコメントをお願いいたします。 </li> 33 <li>④荒らしや誹謗中傷、嫌がらせの発言が見受けられた場合、注意させていただくことになります。</li> 34 3連続してそのような行為が見受けられた場合退会をお願いすることになります。場合によっては強制退会となりますので、宜しくお願い致します。</li> 35 <li>⑤このグループで交流し「友人」となった人物が、このグループの外で④と同様に悪意ある発言をしている場合はお知らせ頂けると幸いです。</li> 36 他の皆様への注意喚起、及び内容によってはこのグループからの退会のお願いを行います。 <</li> 37 <li> ⑥このグループで知り合い「フレンド申請」を行う場合は必ずメッセージにて友人申請の挨拶をお願いします。</li> 38 メッセージなしでの「フレンド申請」はキッパリと断ることも守ってください。</li> 39 <li>⑦画像、動画、雑談、通話は積極的に行いましょう ⑧問題点やご不明な点がございましたら「管理者もしくはオーナー」までメッセージをお願いいたします。</li> 40 </ol> 41 42 <h2 class="about-background-title"><span>著作権に関して</span></h2> 43 <p> 44 当サービスにおけるすべての著作権は、Discord側に帰属します<br /> 45 なお、その他外部サービスにおいて、いかなる問題が発生した場合でも 46 当サークルは問題の把握ができないため、保護の対象外とさせて頂く場合があります 47 </p> 48 <div id="Space"></div> 49 <p> 50 Copyright © 2016-2017 The Crystal Alliance.cir All Right Received. 51 </p> 52 </div> 53 </section> 54</div> 55 56</body> 57</html>
css
1/* Custom CSS 2================================================== */ 3body{ 4margin: 15% 15%; 5background-image: url("../images/memo.jpg"); 6background-size: 100%; 7background-repeat: no-repeat; 8background-attachment: fixed; 9 10} 11 12#.wrapper{ background-attachment: fixed; } 13 14.title{ 15 line-height:normal; 16 font-family:'Raleway',sans-serif; 17 font-size:50px; 18 color:#fff; 19 padding:0 35px; 20 margin-bottom:22px; 21 background-attachment:scroll; 22 background-repeat:repeat-x; 23 background-position:center center; 24 text-transform:uppercase 25} 26 27 .hr{ 28 border: solid 2px; 29 background-color: #ffffff; 30 } 31 32 ol{ 33 border: solid 2px; 34 line-height:normal; 35 font-family:'Raleway',sans-serif; 36 text-align: left; 37 width:30 %; 38 height: auto; 39 padding: 25px; 40 margin: 0; 41 border-radius: 10px; 42 background-color: rgba(255,255,255,0.5); 43p{ 44 line-height:normal; 45 font-family:'Raleway',sans-serif; 46 text-align: left; 47 width:30 %; 48 height: auto; 49 padding: 25px; 50 margin: 0; 51 border-radius: 10px; 52 background-color: rgba(255,255,255,0.5); 53} 54 55
回答1件
0
about-section か about-section-container に
CSS
1.class-name/* 上記のいずれか */ { 2 overflow:auto; 3}
だけでいけませんか？
あと、#.wrapperじゃなくて.wrapperですね。
追記：高さ指定をお忘れなく。
投稿2017/06/12 08:00
編集2017/06/12 08:12
総合スコア1084
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。