おしえて

html初めてです、教えてください！

解決済

質問者：taiseihoukan1867
質問日時：2021/08/08 12:28
回答数：1件

添付してある写真のようなものを作りたいのですが、いくつか質問があります！

①↓だと、「さしすせそ」と「たちつてと」との間がなくなって詰まってしまいます。
②「あいうえお」の部分だけフォントサイズを大きくしたいです。
③上下の中央寄せにしたいです。
④「かきくけこ」「さしすせそ」「たちつてと」の文字の長さに関わらず、後ろの図形の大きさが一定になるようにしたいです(「○○○○」と、「○○○○○○○○」では、後ろの図形の横幅が長くなって変わってしまうので、同じ長さになるようにしてほしいです。)

以前教えて!gooで作ってもらったのを基盤に、部分的に自分で変更したものなので「ん？？」となる部分があるかもしれないです...
全体の形はこのままで進めたいです！説明不足な部分もあるかもしれないですがよろしくお願いします！

<html>
<center>

あいうえお</p>

<a class=linked-button href="リンク">
<b>かきくけこ</b>
</a></p>

<a class=linked-button href="リンク">
<c>さしすせそ</c>
</a></p>

<a class=linked-button href="リンク">
<d>たちつてと</d>
</a>

<style>
a.linked-button {
display:inline-block; text-align:center;
}
a.linked-button:any-link {
text-decoration:none; color:black;
}
a.linked-button > b {
display:block; margin:2px;
padding:0.5em 6em; border-radius:2em;
background:#660066; color:white;
box-shadow:0 0 1px darkorange;
}
a.linked-button > b:after {
content:" \27A4"
}

a.linked-button > c {
display:block margin:2px;
padding:0.5em 6em; border-radius:2em;
background:#00acee; color:white;
box-shadow:0 0 1px darkorange;
}
a.linked-button > c:after {
content:" \27A4"
}

a.linked-button > d {
display:block margin:2px;
padding:0.5em 6em; border-radius:2em;
background:#3b5998; color:white;
box-shadow:0 0 1px darkorange;
}
a.linked-button > d:after {
content:" \27A4"
}
</style>
</center>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2021/08/08 17:41

taiseihoukan1867 さん

　･････写真のようなものを作りたい･････････

例えば↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.center{
display:flex; flex-direction:column; justify-content:center; align-items:center;
height:98vh;
}
a.linked-button {
display:inline-block; text-align:center;
text-decoration:none; color:black;
width:18em;
margin:2px;
padding:0.5em ; border-radius:2em;
box-shadow:0 0 1px darkorange;
}
a.linked-button:after {
content:" \27A4"
}
.aa{ font-size:36px; font-weight:bold; }
.bb{ background:#cc0; }
.cc{ background:#3cf; }
.dd{ background:#09e; }

</style>
</head>
<body>

<div class="center">
<span class="aa">
あいうえお
</span>
<p>
<a class="linked-button bb" href="リンク">
かきくけこ
</a></p>

<p>
<a class="linked-button cc" href="リンク">
さしすせそ
</a></p>

<p>
<a class="linked-button dd" href="リンク">
たちつてと
</a></p>
</div>
</body>
</html>