質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

991閲覧

タイトルとその下の文章に背景色を適応させたいのですが上手くいきません。

ghtew2

総合スコア245

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/07/31 10:04

実現したいこと
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ここまで */

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

idのついた要素に対してスタイルを当てるときは.ではなく#を使います。なので、次のような表記を試してみてはどうでしょうか?

css

1section#about3 { 2 overflow: hidden; 3 text-align: center; 4 padding: 10px 0; 5} 6section#about3 div { 7 color:#6d6d6e; 8 font-size: 39px; 9 font-weight: 600; 10 11 display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/ 12 width: 100%;/* インライン要素にtext-align: center;を適応させるため100%必須 */ 13 text-align: center; 14} 15section#about3 p { 16 color:#7c7878; 17 font-size: 27px; 18 font-weight: 400; 19 vertical-align: -10px;/* 文字を垂直に下げる設定インライン要素のみ使用可能マイナスで下に移動 */ 20 display: inline-block;/* インライン要素にtext-align: center;を適応させるため 必須*/ 21 width: 100%;/* インライン要素にtext-align: center;を適応させるため100%必須 */ 22 text-align: center;/* ブロック要素のみしか本来適応できない */ 23 line-height:50px;/* 文字の行間の調節 */ 24}

投稿2021/07/31 11:51

mottox2

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ghtew2

2021/08/01 07:27

ありがとうございます。解決できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問