hタグの下部に文字を入れる

当ブログの左上ロゴは、実はh1タグとspanタグで構成されています。

Bootstrap v4を使用した記述方法は以下の通り

<h1 class="logo m-0 p-0">
    TojiTech
    <span class="mt-1 d-block logo-span">
        No Programming, No Life.
    </span>
</h1>

簡単に説明すると、spanタグをブロック要素にすることで改行を走らせています。
もし、Bootstrapを使用しないとすると以下のような感じでしょうか。

<h1 class="logo">
    TojiTech
    <span class="logo-span">
        No Programming, No Life.
    </span>
</h1>

.logo {
  padding: 0;
  margin: 0;
}

.logo-span {
  display: block;
  margin-top: 0.25.rem
  font-size: 0.7rem;
  text-align: center;
}

あとは、Google Fontsで整えて完了！

当ブログのロゴフォントは“Righteous”を使用しています。

TojiTech No Programming, No Life.