HTMLとCSSで以下画像のようなメインメニューを作成したいと思っていますが、
うまく作成ができませんでした。
<--条件-->
_ 上の段「TOP」「会社概要」「社長挨拶」は同じ幅で3等分。
_ 下の段「事業内容」「アクセス」で2等分。
_ スマホとタブレットのレスポンシブで作成(PCでの閲覧はしません)
_ 画面横サイズによってバランスが崩れないように自動で調整
すみませんが意見をいただけませんでしょうか。
よろしくお願いします。
2列を別々にスタイル当ててみてはいかがでしょう。
<nav>
<div class="row first">
<a class="link">TOP</a>
<a class="link">会社概要</a>
<a class="link">社長挨拶</a>
</div>
<div class="row second">
<a class="link">事業内容</a>
<a class="link">アクセス</a>
</div>
</nav>
<style>
.row {
display: flex;
}
.link {
border: 1px solid #000;
display: block;
text-align: center;
}
.link+.link {
border-left: none;
}
.row.first>.link {
width: calc(100% / 3);
}
.row.second>.link {
border-top: none;
width: calc(100% / 2);
}
</style>
先に回答なさっている @shiraph さんのflexboxで対応するほうが、対応ブラウザも多いですし、cssもシンプルでわかりやすいと思います。
一応CSS Gridを使う方法もあるので、ご参考までに。
リンクの装飾は別途行ってください。
Flexboxの対応ブラウザ
CSS Gridの対応ブラウザ
<nav class="parent">
<a href="" class="link1">TOP</a>
<a href="" class="link2">会社概要</a>
<a href="" class="link3">社長挨拶</a>
<a href="" class="link4">事業内容</a>
<a href="" class="link5">アクセス</a>
</nav>
.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 0 0;
}
%linkStyle {
border: 1px solid #ccc;
text-align: center;
display: block;
&:nth-of-type(2),&:nth-of-type(3),&:nth-of-type(5) {
border-left: none;
}
&:nth-of-type(n+4) {
border-top: none;
}
}
.link1 {
@extend %linkStyle;
grid-area: 1 / 1 / 2 / 3;
}
.link2 {
@extend %linkStyle;
grid-area: 1 / 3 / 2 / 5;
}
.link3 {
@extend %linkStyle;
grid-area: 1 / 5 / 2 / 7;
}
.link4 {
@extend %linkStyle;
grid-area: 2 / 1 / 3 / 4;
}
.link5 {
@extend %linkStyle;
grid-area: 2 / 4 / 3 / 7;
}