詳しい人求む！

HTML/CSSを使って写真のようなレイアウトにするにはどのようにすれば良いですか。

締切済

質問者：マスターカッパ
質問日時：2025/04/13 22:17
回答数：2件

写真のように、タイトルといくつかのセクション（A～F)に分けて、各セクションにはリンクを配置するには、どのようにすれば良いでしょうか？
要素やタグの説明も合わせて教えて頂けると幸いです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： rera1016
回答日時：2025/04/14 02:19

普通にtable要素で表を作成して、各セルに画像をimg要素で設定し、それをa要素で囲んだ上で遷移先のURLを設定すればいいです。

＞要素やタグの説明も合わせて教えて頂けると幸いです。

ワンポイントアドバイスのような説明を求めるより、ネットや書籍でHTMLリファレンスがあるので、それを見た方がいいです。
https://www.tagindex.com/

- 0
- 件

通報する

この回答へのお礼

とてもわかりやすい回答、ありがとうございます

通報する

お礼日時：2025/04/14 06:43

No.1

回答者：かわごえ
回答日時：2025/04/14 00:52

https://oshiete.goo.ne.jp/qa/8202833.html
過去にも似たような質問がありました。

https://zinseimurige.hatenablog.com/entry/yokona …
ココまるパクリで

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
h1 {
font-size: 12px;
color: #fff;
background: #006688;
padding: 5px;
text-align: center;
}
.top-btn{
display: flex;
flex-wrap:wrap;
}
.top-btn li {
width: calc(95%/3);
padding:0 15px;
box-sizing:border-box;
}
.top-btn li {
max-width:90%;
height: auto;
}
.top-btn {
list-style: none;
}
.link-btn {
text-decoration: none!important;
justify-content: center;
align-items: center;
color: #fff!important;
display: flex!important;
flex-wrap:wrap!important;
font-weight: bold;
padding: 80px 5px;
border-radius: 4px;
box-shadow: none;
transition: .2s;
}
.link-btn:hover {
box-shadow: none;
transform: translateY(2px);
opacity: .8;
}
.colorname1 {
background: #006688;
}
.colorname2 {
background: #bbb;
}
.colorname3 {
background: #aaa;
}
</style>
</head>
<body>
<h1>タイトルA</h1>
<div>
<ul class="top-btn">
<li><a class="link-btn colorname1" href="リンクURL1">A</a></li>
<li><a class="link-btn colorname2" href="リンクURL2">B</a></li>
<li><a class="link-btn colorname3" href="リンクURL3">C</a></li>
</ul>
</div>
<h1>タイトルB</h1>
<div>
<ul class="top-btn">
<li><a class="link-btn colorname1" href="リンクURL1">C</a></li>
<li><a class="link-btn colorname2" href="リンクURL2">D</a></li>
<li><a class="link-btn colorname3" href="リンクURL3">E</a></li>
</ul>
</div>
</body>
</html>

＞要素やタグの説明も合わせて教えて頂けると幸いです。
すきにやればよいと思います。