実現したいこと
中央配置された文字を中央配置を維持したまま、画面の幅が狭くなったときに左で文字を折り返すようにしたいです。
該当箇所のHTMLは
<section id="about2"> <div class="slide-right show"> <p class="text"></section>このパソコンの4つのかなめは以下の4つです。 </p> </div>
この部分の文字を画面サイズが小さくなると、文字が中央に折り返されてしまいます。
下記のうURLを参考にして
中央寄せで文字列を左寄せにする方法
コードを書いたのですが、上手く適応されず、cssのコードのsection pのスタイルが適応されてしまいます。
試したこと
<section id="about2"> <div class="slide-right show"> <p class="text"></section>このパソコンの4つのかなめは以下の4つです。 </p> </div>
に<p class="text">タグで囲み
レスポンシブのcssで
.section.text {
text-align: left;
display: inline-block;
}
を追加で本来のスタイルがsection pのスタイルに変わってしまいます。
cssの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 このパソコンの4つのかなめは以下の4つです。 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
回答1件
あなたの回答
tips
プレビュー