フェードインを適応した中央配置の文字を中央配置のまま折り返すときに左で折り返したい。

実現したいこと
中央配置された文字を中央配置を維持したまま、画面の幅が狭くなったときに左で文字を折り返すようにしたいです。

該当箇所のHTMLは

        このパソコンの４つのかなめは以下の４つです。
    </p>
</div>

</section>

この部分の文字を画面サイズが小さくなると、文字が中央に折り返されてしまいます。

下記のうURLを参考にして
中央寄せで文字列を左寄せにする方法

コードを書いたのですが、上手く適応されず、ｃｓｓのコードのsection pのスタイルが適応されてしまいます。

試したこと

        このパソコンの４つのかなめは以下の４つです。
    </p>
</div>

</section>

に<p class="text">タグで囲み
レスポンシブのｃｓｓで
.section.text {
text-align: left;
display: inline-block;
}

を追加で本来のスタイルがsection pのスタイルに変わってしまいます。

ｃｓｓのsection pは他にたくさん適応しているので、いじりたくないのですが、何かいい方法はないでしょうか？

回答よろしくお願いいたします

付属画像のようにしたいです。

追加
付属画像
提示したコードを何も手を加えていない状態にもどしました。

html
1<!DOCTYPE html> 
2
3<html lang="ja">
4
5<head>
6<meta content="text/html; charset=utf-8"/>
7<meta name="viewport" content="width=device-width, initial-scale=1">
8<link rel="stylesheet" href="reset.css">
9<link rel="stylesheet" href="start2.css">
10<link rel="stylesheet" href="start2responsive.css">
11<script src="jquery-3.6.0.min.js"></script>
12 <title></title> 
13 <style type="text/css">
14   
15</style>
16
17
18</head>
19<body>
20
21 <section id="about">
22     <div class="slide-bottom show">テキスト、テキスト<span></span></div>
23    
24     <p class="slide-bottom show">テキストa、テキストa、テキストaテキストa、テキストa、テキストa、テキストa、テキストaテキストa
25     </p>
26 </section>
27
28
29 <section id="about2">
30     <div class="slide-right show">
31        
32        
33            このパソコンの４つのかなめは以下の４つです。
34      
35    </div>
36 </section>
37
38<script>
39    //フェードイン用のコードです
40    $(function(){
41        $(window).on('load scroll', function() {
42            $(".show").each(function() {
43                var winScroll = $(window).scrollTop();
44                var winHeight = $(window).height();
45                var scrollPos = winScroll + (winHeight * 0.9);
46                if($(this).offset().top < scrollPos) {
47                    $(this).css({opacity: 1, transform: 'translate(0, 0)'});
48                }
49            });
50        });
51    });
52    //フェードイン用のコードはここまでです
53</script>
54
55	
56
57</body></html>
58

css
1section {
2    overflow: hidden;
3    text-align: center;
4    padding: 1px 0;
5    }
6    section div {
7    color:#0212f8;
8    font-size: 39px;
9    font-weight: 600;
10    vertical-align: -40px;
11    display: inline-block;
12    width: 100%;
13    text-align: center;
14    margin-top: 50px;
15    }
16    section p {
17    color:#7c7878;
18    font-size: 27px;
19    font-weight: 400;
20    vertical-align: -20px;
21    
22    width: 80%;
23    margin: 0 auto;/* text-allgin:centerにしない。最後の文字の折り返しが左側に折り返ししてもらうため。 */
24    line-height:50px;/* 文字の行間の調節 */
25    
26    text-align: justify;/* 両端揃え */
27    text-justify: inter-ideograph;/* 両端揃えの種類 *//* 均等振り分け（日本語向き）文字の端を揃える */
28    }
29
30     /* フェードイン用のCSS */
31/* 下からフェードイン */
32.slide-bottom {
33  opacity: 0;
34  transform: translate(0, 20px);
35  transition: all 1s ease-out;
36  }
37  /* 右からフェードイン */
38  .slide-right {
39  opacity: 0;
40  transform: translate(20px, 0);
41  transition: all 1s ease-out;
42  }
43  
44  /* フェードイン用のCSSここまで */
45
46

responsive
1/* 画面幅（300px以上の時までの適応）指定 */
2@media screen and (min-width: 300px){
3
4
5  section {
6    overflow: hidden;
7    text-align: center;
8    padding: 1px 0;
9    }
10    section div {
11    
12    color:#0212f8;
13    font-size: 27px;
14    font-weight: 600;
15    vertical-align: -40px;
16    display: inline-block;
17    width: 90%;
18    text-align: center;/* ブロック要素のみしか本来適応できない */
19    margin-top: 50px;
20    }
21    section p {
22    color:#7c7878;
23    font-size: 23px;
24    font-weight: 400;
25    vertical-align: -20px;
26    
27    width: 80%;/
28    margin: 0 auto;/* text-allgin:centerにしない。最後の文字の折り返しが左側に折り返ししてもらうため。 */
29    line-height:40px;/* 文字の行間の調節 */
30    
31    text-align: justify;/* 両端揃え */
32    text-justify: inter-ideograph;/* 両端揃えの種類 *//* 均等振り分け（日本語向き）文字の端を揃える */
33    }
34    /* フェードイン用のCSS */
35/* 下からフェードイン */
36.slide-bottom {
37  opacity: 0;
38  transform: translate(0, 20px);
39  transition: all 1s ease-out;
40  }
41  /* 右からフェードイン */
42  .slide-right {
43  opacity: 0;
44  transform: translate(20px, 0);
45  transition: all 1s ease-out;
46  }
47  
48  /* フェードイン用のCSSここまで */
49
50

yambejp

2021/09/24 02:53

手書きでいいので図示できませんか？

gujhufiugho

2021/09/24 03:10

回答ありがとうございます。すみませんかなりわかりずらかったと思います。提示したコードを編集して、何も手を加えていない状態にもどしました。あと、該当箇所の画像を追加しました。フォントサイズ、色、フェードインの動きは今のコードのままで大丈夫です。ただ、中央配置した文字（付属画像）の文字がスマホサイズで幅が狭くなったときに、文字の折り返しを左に折り返したいです。付属画像のように中央に折り返されています。これを直したいです。

行動規範の内容に同意します

回答1件

ベストアンサー

セレクタの指定範囲をなるべく狭くして他に影響がないよう工夫する。
例えば、親に id="about2" があるのでそれをセレクタに含めれば適用範囲を限定できます。

ブロックの中央寄せは今なら flex を使うと簡単です。

css
1  #about2 div.slide-right {
2    text-align: left;
3    display: inline-flex;
4    justify-content: center;    
5  }

投稿2021/09/24 04:12

hatena19

総合スコア33790

gujhufiugho

2021/09/24 05:48

回答ありがとうございます。上記の方法で解決できました。感謝です。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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

フェードインを適応した中央配置の文字を中央配置のまま折り返すときに左で折り返したい。

関連した質問