画像を左に、縦書きメニューを右に置きます。
簡単に出来そうなのに、ちょっと手間が掛かります。
が、
これが出来るようになるとデザインの幅がぐっと広がるので、ぜひマスターしましょう！
画像とメニューを横並びにする準備
メニューを横並びにしているひとは、一旦縦並びに戻しましょう。
えええ…という気持ちも分かります！分かりますが、整えたり崩したりする経験は、今後の肥やしになります。ホントに。
とはいえ、せっかく記述した内容を消すのは忍びないですよね。先人たちも、きっとそう思ったに違いなく、いい方法が用意されているんです。
/*li {
display: inline-block;
margin: 0 15px;
}*/メニューを横並びにするための記述を、/*～*/で包んでください。
保存して、ブラウザで確認すると
縦並びに戻りました！
この、/*～*/で包むことによって、「無効」にすることができます。つまり、/*、*/を削除すると記述が復活します。
この方法は、非常に役に立つので覚えてください。
いや、頻繁に使うことになってくるので、今は無理して覚えなくていいです。そんな方法があるんだ、へ～。くらいで大丈夫です。
横並びにする画像とメニューを入れる箱をつくる
画像とメニューを入れる箱を準備します。
index.htmlの、トップ画像とメニューを「箱」に入れます。
＜nav＞～＜/nav＞で包むと、ナビゲーションという意味を持ちましたよね。
同じように「箱」という意味を持つタグで包んで………しまいたいですが、「箱」という意味のタグは存在しません。
じゃ、どうするか。
「意味を持たないタグ」で包んで、それを「箱」としてしまいます。言い換えると、何者でもないタグを使って、「キミは箱だよ」と洗脳します。
真ん中寄せの記事で、「透明で純真で柔軟な子」と紹介した「div」の出番です。
具体的に記述していきましょう
<div>
<p><img src="image/top.png" alt="トップ画像"></p>
<nav>
<ul>
<li><a href="comic.html">漫画</a></li>
<li><a href="contact.html">ご感想・お問合せ</a></li>
<li><a href="blog.html">ブログ</a></li>
<li><a href="news.html">お知らせ</a></li>
</ul>
</nav>
</div>
index.htmlをサクラエディタで開いて、横並びにする「画像」と「メニュー」を＜div＞～＜/div＞で包み込みました。
しかし、これだとdivさんはまだ何者でもないdivさんです。
「箱」と洗脳します。
<div class="hako">
<p><img src="image/top.png" alt="トップ画像"></p>
<nav>
<ul>
<li><a href="comic.html">漫画</a></li>
<li><a href="contact.html">ご感想・お問合せ</a></li>
<li><a href="blog.html">ブログ</a></li>
<li><a href="news.html">お知らせ</a></li>
</ul>
</nav>
</div>
htmlは漢字NGなので、ローマ字で「hako」という名前を付けました。
名前の付け方は２通りありますが、いまは今回の方法だけ使えたら大丈夫です。
<div class="付けたい名前">～包む中身～</div>
divの後に、class＝”付けたい名前”です。
この名前は、好きな名前で大丈夫です。名付けが不得意なひとは、”container ”なんかが一般的ですので参考までに。
これで、一応箱らしきものが出来ました。
トップ画像とメニューを横並びに配置する
箱で包んだら、あとは簡単
style.cssをサクラエディタで開いて、以下のコードを記述してください。
.hako {display: flex;}
すると…
はい、無事横並びになりました！
ですが！！！
左寄りになってしまいましたね。
箱＝div自体は、真ん中に寄ってなんて言われてないので、こんな事になってます。
もちろん真ん中に寄せていきます、が
長くなりそうなので、真ん中に寄せるのは別記事にします。
お疲れさまでした。
コメント