文字の両端揃え[text-align: justify]が効かない

Question

iSaraの模写をしているが、下記のようになってしまい、文字の両端揃えができない。
解決策またはヒントをご教授願います。

 <div class="part8">
        <div class="p8container">
          <p class="texte">他のプログラミングスクールとここが違う！</p>
          <h2>iSara[イサラ]の3つのメリット</h2>
        </div>
        <div class="merit">
          <div class="merit1">
            <p class="yellowtext"><b>現役フリーランスから学べる</b></p>
            <p class="m1text">他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます</p>
          </div>
          <div class="merit2">
            <p class="yellowtext"><b>実践を通じて学べる</b></p>
            <p class="m2text">フリーランスにとって最短夫学習方法は「実践」。iSaraでは実案件を通して学びます。現役フリーランサーの案件サポートに加え、クラウドソーシングを活用。
            初心者の自分じゃ無理と思うかもですが、現役フリーランスがサポートしますので大丈夫。</p>
          </div>
          <div class="merit3">
            <p class="yellowtext"><b>授業料が実質0円</b></p>
            <p class="m3text">講座費用258,000円以上の金額が稼げるまで「永久サポート延長」があります。</p>
          </div>
        </div>
      </div>

.part8 {
  background-color: #fff8cf;
  height: 500px;
}
.texte {
  color: #000000;
  padding-top: 60px;
  text-align: center;
}

.p8container {
  position: relative;
  text-align: center;
}

.p8container::before {
  content: "";
  position: absolute;
  left: 350px;
  width: 50px;
  height: 50px;
  border-top: 4px solid #EBB94D;
  border-left: 4px solid #EBB94D;
  margin-top: 30px;
}

.p8container::after {
  content: "";
  position: absolute;
  top: 70px;
  right: 300px;
  width: 50px;
  height: 50px;
  border-bottom: 4px solid #EBB94D;
  border-right: 4px solid #EBB94D;
  margin-top: 40px;
}

.merit {
  padding: 10px;
  display: flex ;
}

.merit1 {
  background-image: url(../images/learnfromfreelancer.jpg);
  width: auto;
  height: 180px;
  background-position: center;
  max-width: 100%;
  max-height: 100%;
  margin-top: 20px;
}
.merit2 {
  background-image: url(../images/learnfromprojects.jpg);
  width: auto;
  height: 180px;
  background-position: center;
  max-width: 100%;
  max-height: 100%;
  margin-top: 20px;
}
.merit3 {
  background-image: url(../images/actuallyfree.jpg);
  width: auto;
  height: 180px;
  background-position: center;
  max-width: 100%;
  max-height: 100%;
  margin-top: 20px;
}

.yellowtext {
  color: #ebb94d;
  transform: translateY(500%);
}
b, strong {
  font-weight: 700;
}

.m1text {
  color: black;
  display: block;
  box-sizing: border-box;
  transform: translateY(270%);
}
.m1text p {
  text-align: justify;
  color: black;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 300;
  margin: 8px 0;
  transform: translateY(350%);
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.m2text {
  color: black;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 300;
  margin: 8px 0;
  transform: translateY(350%);
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.m3text {
  color: black;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 300;
  margin: 8px 0;
  transform: translateY(350%);
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

Comments

[kuma_kuma_]

まず元となるページのURL追記をお願いします。
何回か質問されているけど模写って勉強でしょ？
プログラミングは「自分で調べて解決」する力を付けないと続けられないよ？
(特に仕事にするなら)

[yanmar]

元URLページになります。https://isara.life/

考え方の相違かと思いますが、もちろん事前に調べていろいろ試してはいます。
その上でわからないので、こちらを利用させて頂いている状況です。

「わからないことは自分で調べる→それでもわからなければ有識者に質問する」
私はこう考えております。

[kuma_kuma_]

> 「わからないことは自分で調べる→それでもわからなければ有識者に質問する」
私もこれは正しいと思います。

ただ今回のような基礎の部分は対処する方法が数種類あります。
ここで回答をもらうと残りの対処方法に関しては質問者様が知らない事となります。
そうなることが質問者様にとって不利益になるのでは？と心配している次第です。

単なる模写であれば方式が違えど再現できれば良いので「原本」の方式にとらわれず答えるべきでしょうし、完全模写なら「原本ではこの部分にこうやって指定している」という事を調べる方法を提示するべきでしょう。
その為回答内容をどうしようかと悩んでいる次第です。

[yanmar]

色々と親身にお考えいただきありがとうございます。
私の場合ですが、今回の模写は私の知識のみ(もちろん参考書や当サイトを利用もしますが)で再現できるかを試しております。
そのため、完全模写を想定したコードではなく、数ある対処法の一つをお教えいただければと存じます。
コードのわからない初心者故にイラッとすることもあるかと存じますが、その点はご容赦ください。

[dit.]

teratailには質問や回答を見やすくするための仕組みがあります。
https://teratail.com/help/question-tips#questionTips3-5-1 (teratailヘルプ内「質問するときのヒント」)
https://teratail.com/questions/238564 (ソースコードの書き方についての質問)

質問を編集し、以下のような形にしてください。
```html
ここにHTMLのコード
```
(1行以上開ける)
```css
ここにCSSのコード
```

Answer 1

原型をできるだけ残しつつ調整を行っています。
(HTMLの変更はしていません。)
画像は特別な場合以外できるだけ<img>タグを使われたほうが良いかと思います。

文字上下位置は今回margin-topを使用していますが、これは最善の方法ではありません。
あくまで例としてお考えください。
質問の[text-align: justify]も効いていますが
この場合だと判りずらいかもしれません。

修正内容はコメントで残してあります。

.part8 {
	background-color: #fff8cf;
	height: 500px;
}
.texte {
	color: #000000;
	padding-top: 60px;
	text-align: center;
}

.p8container {
	position: relative;
	text-align: center;
}

.p8container::before {
	content: "";
	position: absolute;
	left: 350px;
	width: 50px;
	height: 50px;
	border-top: 4px solid #EBB94D;
	border-left: 4px solid #EBB94D;
	margin-top: 30px;
}

.p8container::after {
	content: "";
	position: absolute;
	top: 70px;
	right: 300px;
	width: 50px;
	height: 50px;
	border-bottom: 4px solid #EBB94D;
	border-right: 4px solid #EBB94D;
	margin-top: 40px;
}

.merit {
	padding: 10px;
	display: flex ;
	position: relative; /* 追加 */
}

.merit1 {
	background-image: url(../images/learnfromfreelancer.jpg);
	background-repeat:no-repeat; /* 追加 */
	background-position: top; /* 変更 background-position: center; */
	width: 33.333%; /* 変更 width: auto; */
	height: 300px; /* 変更 height: 180px;*/
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* margin-top: 20px; */
}
.merit2 {
	background-image: url(../images/learnfromprojects.jpg);
	background-repeat:no-repeat; /* 追加 */
	background-position: top; /* 変更 background-position: center; */
	width: 33.333%; /* 変更　width: auto; */
	height: 300px; /* 変更 height: 180px;*/
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* margin-top: 20px; */
}
.merit3 {
	background-image: url(../images/actuallyfree.jpg);
	background-repeat:no-repeat; /* 追加 */
	background-position: top; /* 変更 background-position: center; */
	width: 33.333%; /* 変更　width: auto; */
	height: 300px; /* 変更 height: 180px;*/
	/* max-width: 100%; */
	/* max-height: 100%; */
	/* margin-top: 20px; */
}

.yellowtext {
	color: #ebb94d;
	transform: translateY(500%);
	text-align: center;	 /* 追加 */
	margin-top: 66px;	 /* 追加 */
}
b, strong {
	font-weight: 700;
}

.m1text {
	color: black;
	/* 削除 display: block; */
	/* 削除 box-sizing: border-box; */
	/* 削除 transform: translateY(270%); */
	margin-top: 118px;		/* 追加 */
	padding: 0 50px;		/* 追加 */
	text-align: justify;	/* 追加 */

}
/* 書き方を共通化したので削除
.m1text p {
	text-align: justify;
	color: black;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 300;
	margin: 8px 0;
	transform: translateY(350%);
	margin-block-start: 1em;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
}
*/
.m2text {
	color: black;
	/* 削除 box-sizing: border-box; */
	font-size: 12px;
	font-weight: 300;
	/* 削除 margin: 8px 0; */
	/* 削除 transform: translateY(350%); */
	/* 削除 margin-block-start: 1em; */
	/* 削除 margin-block-end: 1em; */
	/* 削除 margin-inline-start: 0px; */
	/* 削除 margin-inline-end: 0px; */
	margin-top: 118px;		/* 追加 */
	padding: 0 50px;		/* 追加 */
	text-align: justify;	/* 追加 */

}
.m3text {
	color: black;
	/* box-sizing: border-box; */
	font-size: 12px;
	font-weight: 300;
	/* 削除 margin: 8px 0; */
	/* 削除 transform: translateY(350%); */
	/* 削除 margin-block-start: 1em; */
	/* 削除 margin-block-end: 1em; */
	/* 削除 margin-inline-start: 0px; */
	/* 削除 margin-inline-end: 0px; */
	margin-top: 118px;		/* 追加 */
	padding: 0 50px;		/* 追加 */
	text-align: justify;	/* 追加 */
}

Comments

[yanmar]

返信遅くなり申し訳ございません。

回答頂きありがとうございました。