![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqLo5zgwF0XEzfPFhOIm_qLXRUzPc815GIZvEqJApVb8HLy7w4aGbmO9RkAI5h8yPocbt1cXEDkeDM8dFFJfzY47sjX3g_yYoq-kkmHUWYReiKuqV7rkgL18qlSSPkapNBlMNFSwtGXe6G1lk3_Gnby99OgzqxGJbP7wIshKqvspRPIyo4aJadW7eRYPo/s1600-rw/animal-4683342_1280.jpg)
safariブラウザだけ、svgの縦サイズがちゃんとしない件
GoogleChromeで問題なく見えていると思って安心していてはいけません。 SafariやFirefoxでは、思いの外違った見え方をしている場合も少なくありません。 以前から作っていたゲームの中でsvgを使用するケースがあり、その中でsvgオブジェクトの表示位置がズレるという事象が見つかりました。(iPhone及びSafariブラウザのみ) GoogleChromeでは次のように見えていたところ・・・![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWFXdh9PyUNToYJR34a5It1fP9g0QccOhRacMoR2wK5-RfKVRpoIW-QnFW1BJWXKv6CynxCw1FRpa6T3TxcypA1zjXYEUyUS1fK_HUOW9x08v7braWQkN3OVrzFM6jNXa0KzFcYnR5NyhDSvHRIbd6HHcW18hzHS0Ct5ZgteVV_B5jDAA9O1GYfKyga98/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-17%207.00.07.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnGjiEizWZEzVYi09bVtaZkJPckH1uOjfNz_XJ7nl5vnIu0dEWeHYMgaWfs5jVwGB_Ia8E21Ae14PzoIA6K-hL7YzDq4gtuwT12S7uUHFx37XVOaRCrl6h8pvBfo3uE9FfTN5eI49iaC60KxPfv9YIPXbT-uhrKiqvloZUEjESZHJUwU0Wfme_zvW-9Sk/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-17%207.01.13.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD32DAbJTpi-R1iWkdNssSduczttBclvJ3I-mZFmi3C3a6KsNfQxjupR1-I9pjpWfX8Zps-IGKa1aqUJX1zoAM_Gfjfv81X52WfRVvyOWZyXlqbsRfFKCHl1fA5XGC10czl8LuhWxh8G8aXCAOlzeGgWD4XzWzMz8_0bjGjFWY-x1tS4QMagcYcwuCJNY/s1600-rw/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-17%207.09.17.png)
文字を枠の中心に配置したい件
次のようなコードで、内部の文字や画像を中心に配置したい場合があるとします。<div class='sample'>sample</div><style>.sample{
width:300px;
height:200px;
border:1px solid black;
}
</style>
sample
上記に対しては、cssに次のコードを追加するだけで、中央表示が可能になります。
※黄色い文字が追加箇所です。
<div class='sample'>sample</div><style>.sample{
width:300px;
height:200px;
border:1px solid black;
display:flex;
align-items:center;
justify-content:center;
}</style>
sample
縦並びでもflexが便利な件
リストで並ぶ項目に対して、display:flexを適用しておくことで、並びの位置していや、隙間調整のgap指定が便利にできるようになります。 もはや、リストタグや、テーブルタグよりも使いやすいかもしれませんね。サンプルコード
<ul class='list-view'>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul><style>.list-view{
display:flex;
flex-direction:column;
gap:10px;
border:1px solid black;
padding:5px;
margin:5px;
width:300px;
}
.list-view > *{
list-style:none;
border:1px solid black;
padding:5px;
margin:0;
display:flex;
justify-content:center;
}</style>
サンプル表示
- 項目1
- 項目2
- 項目3
0 件のコメント:
コメントを投稿