左のボックスの文字を上下左右中央に寄せたい/右のボックスをノーマルにしたい

Question

<style>
.flex{
  padding: 2.5% 0;
  display: flex;
  flex-direction: row;
  position: relative;
}
.flex > div{
  width: 50%;
  font-size: 20px;
  margin: 0;
  text-align: center;
  padding: 10px;
  border: 1px solid #0454a4;
}
.left-box {
  color: #ffffff;
  background-color: #0454a4;
  line-height: 2
  font-weight:  bold;
  Font-family:”sans-serif”
}
.left-box::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 25%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #0454a4;
}
p {
font-weight: bold !important
}
</style>

<div class="flex">
  <div class="left-box">
<p style="font-size: 15px">あいうえおあいうえお</p>
<p style="font-size: 20px">あいうえおあいうえお</p>
<p style="font-size: 25px">あいうえおあいうえお</p>
  </div>
  <div c1ass="right-box">
  <p style="padding: 10px; margin: 10px;">
   <font color="#696969">
 ここの部分をノーマルにしたい
</p>
</font>
  </div>
</div>

このcssとhtmlでボックスを連結させております。

左のボックスの文字を上下左右中央に寄せ、右のボックスの文字を太字ではなくノーマルにしたいと思っております。

上下左右中央寄せはいくつかコードを試してみたものの、全部ダメでした。
太字の方は

<div class="flex">
  <div class="left-box">
<p style="font-size: 15px">あいうえおあいうえお</p>
<p style="font-size: 20px">あいうえおあいうえお</p>
<p style="font-size: 25px">あいうえおあいうえお</p>
  </div>
  <div c1ass="right-box">
  <p style="padding: 10px; margin: 10px;">
   <font color="#696969">
ここの部分をノーマルにしたい
<p style="font-weight:nomal;">
</p>
</p>
</font>
  </div>
</div>

で一回試してみましたが、右のボックスに入っている文字が下に行ってしまい、だめでした。

どうすればよいのでしょうか。

Comments

[azuapricot]

codepen で見たところ上下左右中央寄せはできているように見受けられますがキャッシュクリアはしましたか？

[x_x]

ノーマルというのは何を指していますか？
font-weight: normal; のことであればそう書けばいいと思いますができない理由があるのでしょうか？

[AmiI]

azuapricotさん
キャッシュをクリアしてもダメです。

x_xさん
のことを指しているのですが、書いた結果なぜか文字がボックスの下の方に行ってしまいます。

[x_x]

> のことを指しているのですが
コメントが消えているようですので編集か追記をお願いします

[AmiI]

x_xさん
すみません、どのこのことでしょうか。

[x_x]

どのことは？
「のことを指しているのですが」で始まるのが正しいということですか？
どのことを言っているのかさっぱりわかりません。
外国の方でしょうか？

[AmiI]

「どのこと」は「とこのこと」の打ち間違いです。
「のことを指しているのですが、書いた結果なぜか文字がボックスの下の方に行ってしまいます。」と、先程は書きました。

Answer 1

右のボックスの文字を太字ではなくノーマルにしたいと思っております。

これに関しては、下記を削除すればいいでしょう。
これがあると、すべてのp要素か太字になります。

p {
font-weight: bold !important
}

Comments

[AmiI]

削除したいのですが、ここを削除してしまうと、今度は左のボックスで改行をすると太文字ではなくなってしまうため、削除できないです。

<br>で該当部分に太文字を入れようとしても、全く太くなりません。

[hatena19]

.left-box に font-weight: bold; を設定してあるので、改行を入れても太文字ですけど。
上下中央寄せもできています。
ブラウザのキャッシュクリアをしてみてください。

[AmiI]

キャッシュクリアをしてもダメです。
無料で使えるウェブサイトツールにあるhtml機能で動かしているのですが、もうワードプレスなどのちゃんとしたサイト構築システムを使ったほうがいいのでしょうか。無料で使えるウェブサイトツールのバグなのではと思っております。

[hatena19]

「無料で使えるウェブサイトツール」というのが何なのか分からないので、何ともいえません。
また、どのようなサイトを想定してるかも不明なのでWordPressが適切かも判断しようがない。

どちらにしてもHTML CSS の基本からの学習が必要なレベルだとは思います。

[AmiI]

strikinglyというツールを使っております。
LPを想定しております。

[hatena19]

LPと固定ページのみならそのようなツールでいいと思います。
Wordpressはもとはブログ用のツールですので頻繁に情報の更新、追加があるなら、Wordpressも検討してみていいと思います。

[AmiI]

今strikinglyを使っているのですが、文字色の設定で灰色を指定したのに緑色になったり、文字を大きくしたはずなのに全く反映されなかったり、ジェネレーターを使っているのに影が表示されなかったりで、ワードプレスのみならず、もっと自由にHTMLを反映できるツールを考えています。

それでLPを作る場合、どんなツールがおすすめでしょうか。
検索すると、htmlツールなるものも存在するそうですが、そっちで作ったほうが良いのでしょうか。

[hatena19]

私はツールを使ったことがないので、どれがおすすめかというアドバイスはできませんが、
どのツールを使うにしてもツールの機能以上のことをしようとすれば、HTML、CSS の知識は必要になります。
機能以上のことを自由自在にいじりたいということなら、ツールを使わずに一からHTML、CSSを書いた方が早いかもしれません。

[AmiI]

ありがとうございます。
ワードプレスも検討しましたが、案外strikinglyと変わらなさそう（一番上の部分がカスタマイズしきれないなど）なので、イチから書いてみることにします。（一応部分部分のコードはもうすでにある）

Answer 2

.left-box {
  color: #ffffff;
  background-color: #0454a4;
  line-height: 2/* ← セミコロンが無い */
  font-weight:  bold;
  Font-family:”sans-serif”/* ← セミコロンが無い＆引用符が全角＆「font」が大文字 */
}

  <p style="padding: 10px; margin: 10px;">
   <!-- ><font color="#696969"> ← font要素は廃止されています < -->
ここの部分をノーマルにしたい
<!-- ></font> ← HTMLの構文上、入れるならここ< -->
<!-- ></p> ← HTMLの構文上、入れるならここ（もしくはdivを使う）< -->
<p style="font-weight:nomal;">
</p>
<!-- ></p> ← 削除（p要素の中にp要素は入れられない）< -->
<!-- ></font> ← 削除< -->

【<p>: 段落要素 - HTML: HyperText Markup Language | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/p

Comments

[AmiI]

すみません、全く問題が解決されていないのですが…。
上下左右中央寄せも、太字も全く解決していないのですが…。

[kei344]

今追記しましたが、p要素の中にp要素は入れられません。