実現したいこと
HTMLの<section id="about3">のテキストという文字の部分(タイトル)とその下の文章に背景色を適応させたいのですが上手くいきません。
試したこと
cssに
.about3にbackground-color 効果なし
確かにcssのスタイルシートのsection {
overflow: hidden;
text-align: center;
padding: 10px 0;/*▽▽ section ボタンと文字の余白を狭くする */
background-color: ;
}
で背景色はつくのですが、会社概要などにもsectionタグを使用しているため、そのところにも適応されてしまいます。
一部のsectionにだけ背景色を適応したいのですが、わからず先に進めずに困っています。
回答よろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 6 <title></title> 7 8 <link rel="stylesheet" href="reset.css"> 9 10 <link rel="stylesheet" href="companyhp3.css"> 11 12 <script src="jquery-3.6.0.min.js"></script> 13 <style type="text/css"> 14 15</style> 16 17 18<script> 19 $(function() { 20 const hum = $('#hamburger, .close') 21 const nav = $('.sp-nav') 22 hum.on('click', function(){ 23 nav.toggleClass('toggle'); 24 }); 25 }); 26 </script> 27</head> 28<body> 29<section id="about"> 30 <div class="slide-bottom show">会社概要<span></span></div> 31 32 </section> 33 34 <section id="about2"> 35 <div class="slide-bottom show">・・・ご挨拶・・・<span></span></div> 36 37 </section> 38 <section id="about3"> 39 <div class="slide-bottom show">テキストテキスト<span></span></div> 40 41 <p class="slide-right show"> 42 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 43 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 44 テキストテキストテキストテキストテキストテキストテキストテキスト<br> 45 46 テキストテキストテキストテキストテキストテキストテキトテキストテキスト<br> 47 48 テキストテキストテキストテキストテキストテ<br> 49 テキストテキストテキストテキストテキストテ<br> 50 </p> 51 52 </section> 53 54 55 <script> 56 //フェードイン用のコードです 57 $(function(){ 58 $(window).on('load scroll', function() { 59 $(".show").each(function() { 60 var winScroll = $(window).scrollTop(); 61 var winHeight = $(window).height(); 62 var scrollPos = winScroll + (winHeight * 0.9); 63 if($(this).offset().top < scrollPos) { 64 $(this).css({opacity: 1, transform: 'translate(0, 0)'}); 65 } 66 }); 67 }); 68 }); 69 //フェードイン用のコードはここまでです 70 </script> 71 72</body> 73</html>
css
1/* section *//* section */ 2section { 3 overflow: hidden; 4 text-align: center; 5 padding: 10px 0; 6} 7section div { 8 color:#6d6d6e; 9 font-size: 39px; 10 font-weight: 600; 11 12 display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/ 13 width: 100%;/* インライン要素にtext-align: center;を適応させるため100%必須 */ 14 text-align: center; 15} 16section p { 17 18 color:#7c7878; 19 font-size: 27px; 20 font-weight: 400; 21 vertical-align: -10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */ 22 display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/ 23 width: 100%;/* インライン要素にtext-align: center;を適応させるため100%必須 */ 24 text-align: center;/* ブロック要素のみしか本来適応できない */ 25 line-height:50px;/* 文字の行間の調節 */ 26 27} 28 /* sectionここまで *//* sectionここまで *//* sectionここまで *//* sectionここまで */ 29 30 31 32 /* フェードイン用のCSS */ 33/* 下からフェードイン */ 34.slide-bottom { 35 opacity: 0; 36 transform: translate(0, 20px); 37 transition: all 1s ease-out; 38 } 39/* 左からフェードイン */ 40.slide-left { 41 opacity: 0; 42 transform: translate(-20px, 0); 43 transition: all 1s ease-out; 44 } 45 46/* 右からフェードイン */ 47.slide-right { 48 opacity: 0; 49 transform: translate(20px, 0); 50 transition: all 1s ease-out; 51 } 52 53/* フェードイン用のCSSここまで */
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/01 07:27