はじめに
社労士事務所などのホームページを制作していると、「ロゴ画像とタイトル文字（事務所名）を横に並べたい」というシンプルながらも重要なデザイン調整が必要になることがあります。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
今回は、実際に「ホンダ社労士事務所」のトップページを例に、ロゴとタイトルを自然に横並びに整える方法をご紹介します。
困っていたこと
HTML上では以下のようにロゴ画像とタイトルが並べられていますが、実際の表示では縦に並んでしまっている状態でした。
<header>
<img src="images/logo.png" alt="ロゴ" style="height: 50px; margin-right: 10px;">
<h1><a href="index.html">ホンダ社労士事務所</a></h1>
</header>
これは、img と h1 がブロック要素として縦に積まれてしまうためです。
実際のフロント画面について
解決方法：Flexboxで横並びにする
画像とタイトルを横並びにするには、2つの要素をひとつの div でまとめ、Flexbox を使うのが一般的です。
実際のHTMLコード（修正済み）
<header>
<div class="header-title">
<img src="images/logo.png" alt="ロゴ" style="height: 50px; margin-right: 10px;">
<h1 style="margin: 0;"><a href="index.html">ホンダ社労士事務所</a></h1>
</div>
<nav>
<a href="index.html">HOME</a>
<a href="greeting.html">代表挨拶</a>
<a href="office.html">事務所案内</a>
<a href="services.html">サービス案内</a>
<a href="pricing.html">料金案内</a>
<a href="contact.html">お問い合わせ</a>
<a href="support-a.html">就労支援A型</a>
</nav>
</header>
実際のCSSコード（style.cssなどに追加）
.header-title {
display: flex;
align-items: center;
justify-content: center; /* 必要に応じて中央揃え */
}
このように実装することで、見た目にも整った横並びが実現できます。
このようにすることで、img と h1 が横に並び、ロゴの左に事務所名が自然に表示されます。
また、align-items: center; を使うことで、ロゴとテキストの縦方向の中央揃えも実現できます。
まとめ
- ブロック要素はそのままだと縦に並ぶ → Flexbox を使って横並びに
- ロゴ画像とタイトルをまとめるラッパー要素を用意する
-
display: flexとalign-items: centerを指定すれば整ったレイアウトに
このように、少しのHTMLとCSSの工夫で見た目を大きく改善できるので、試してみてください！