🐪
cssだけで文字の位置を楽に調整する
よくフォームとかにある、必須とか任意を表示したいとき
これらの文字は若干小さめにしてます。
となると、文字がいびつに見える...ので解消するため
あれこれ試しました。
やりたいこと
小さい文字が大きい文字の中心上にあってほしい
コードを書く
3パターンできました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
div {
display: flex;
align-items: center;
}
span {
font-size: 0.6em;
font-weight: bold;
color: red;
padding: 0 0.7em;
}
p > span {
vertical-align: middle;
}
</style>
</head>
<body>
<!-- display: flex; または display: grid; をつかうパターン -->
<div>
<p>おなまえ</p>
<span>必須</span>
</div>
<!-- vertical-align: middle; をつかうパターン -->
<p>おなまえ<span>必須</span></p>
</body>
</html>
パターン1. display: flex
div {
display: flex;
align-items: center;
}
パターン2. display: grid
flexの場合、全体的にがたついて見えるので
すべての項目の必須・任意を揃えたいときにはこちらが便利でした。
div {
display: grid;
grid-template-columns: 5em 3em;
align-items: center;
}
パターン3. vertical-align: middle
/** 文字サイズを小さくしたspanに対して設定 */
p > span {
vertical-align: middle;
}
金額を表示するとき
大きい文字に下ぞろえしていたほうがよかったです。
price.html
...省略
<p class="price">1,000</p>
style.css
.price {
font-size: 2.5em;
font-weight: bold;
}
/** 単位が決まっていれば、after 属性を使う */
.price::after {
content: "円";
font-size: .5em;
padding-left: .25em;
}
まとめ
position
で細かく位置調整する必要がないのでいいなと思いました。
Discussion