ヘッダーの文字の大きさを変えたいのですが

Question

右上のヘッダーの大きさを上(LogoLOGO)と下(コスメです。)で変えたいです。
上を30px、下を12pxに変更したいです。

あとはLogoLOGOとコスメです。の距離を縮めるにはどのように書けばよろしいのでしょうか。

方法がわからず、とりあえず下記のようにしましたが、なんか表記がおかしい気がするので、どなたかご教授いただけましたらと思います。

.html

・・・

<header>
<div class="container1">
  <div class="navbar">
    <div class="logo">
      <p>LogoLOGO</p>
      <p2>コスメです。</p2>
    </div>

・・・

.css

・・・
.logo {
  color: white;
  font-size: 30px;
  padding-left: 2rem;
}
.logo p2{
  font-size: 12px;
}
・・・

Answer 1

右上のヘッダーの大きさを上(LogoLOGO)と下(コスメです。)で変えたいです。

他の方の回答のようにクラス属性を追加するのでもいいですが、
「LogoLOGO」というのがタイトル的なものでサイズを大きくしたいということなら Hタグをつけるのもいいですね。

あとはLogoLOGOとコスメです。の距離を縮めるにはどのように書けばよろしいのでしょうか。

Pタグにはデフォルトのマージンがありますので、マージンを上書き設定すれば縮まります。

上記の2点を考慮して、

<header>
    <div class="container1">
        <div class="navbar">
            <div class="logo">
                <h2>LogoLOGO</h2>
                <p>コスメです。</p>
            </div>
        </div>
    </div>
</header>

.logo{
  color: white;
  padding-left: 2rem;
  background-color: gray;
}
.logo h2 {
  font-size: 30px;  
  margin-bottom: 0;
  margin-top: 0;
}

.logo p {
  font-size: 12px;
  margin-bottom: 0;
  margin-top: 0;
}

上下マージンを0に設定してますので、縮まりすぎたなら適宜調整してください。

Answer 2

質問者さんのソースコードに

<p2>コスメです。</p2>

とありますが、<p2>は、htmlの仕様上存在しないタグです。
（h1〜h6というのはあるのですが）

したがって今回やりたいことを実現するには、

      <p>LogoLOGO</p>
      <p class=“cosme”>コスメです。</p>

のようにして、class名をつけ、
そこに対してcssを書いてみてはいかがでしょう。

Comments

[kyoya0819]

誤って多重投稿されていませんか？
削除依頼を提出することをお勧めします。

[pomu18]

書いた直後に出してます。

Answer 3

質問者さんのソースコードに

<p2>コスメです。</p2>

とありますが、<p2>は、htmlの仕様上存在しないタグです。
（h1〜h6というのはあるのですが）

したがって今回やりたいことを実現するには、

      <p>LogoLOGO</p>
      <p class=“cosme”>コスメです。</p>

のようにして、class名をつけ、
そこに対してcssを書いてみてはいかがでしょう。

Comments

[pomu18]

教えていただきましてありがとうございます。
コスメです。をLogoLOGOに近づけるためにはどのように記載したらよろしいでしょうか(_)？