4月2日、京都府立植物園に行った。
今年は関西の桜の開花がかなり遅いので、花をあまり期待していなかったが、東海桜、カラミザクラ、啓翁桜、カンヒザクラ、カンザクラ、オカメザクラなど色々な種類の桜が咲いていた。桜以外にも、アンズ、モモ、アーモンド、ボケ、レンギョウ、サンシュユ、ミツマタ等咲いていて、十分に春気分を味わえた。
一本桜名木の都道府県別1位は福島県、2位は長野県
今週末には4月で桜の季節。以前、別のブログに載せた内容だが、リンク切れも起こしていたので、改めてこのブログに載せておく。
一本桜の名木の県別ランキングを見ると福島県が1位、長野県が2位。以下、3位岐阜県、4位岩手県、5位栃木県の順。
都道府県別ランキングは、以前作った以下のページで見ることができる。列名タイトル「＊桜名木」をクリックすると多い順に並ぶ。
《桜名木 都道府県別件数》
http://ok2nd.sakura.ne.jp/abook/pc/list-sakura-sum.php?cat=6
後日追記：Googleの規約変更により以下の地図は表示されなくなっている。
↓ Googleマップのマイプレイスで作成し直した全国版地図。
以下で、Googleマップで名木の分布を確認できる。
≪桜名木：福島県≫
https://ok2nd.sakura.ne.jp/w-map//sakura-fukushima.html
≪桜名木：長野県≫
https://ok2nd.sakura.ne.jp/w-map/sakura-nagano.html
CSSで画像を正方形枠内で上下左右中央揃え（センタリング）するシンプルな方法
前回の「写真/画像をサムネイル一覧するHTMLサンプル」で紹介したHTMLサンプルでは、画像を正方形枠内で上下左右中央揃えする方法として、<span>タグのbackground-imageとbackground-sizeを使っていたが、<img>タグのobject-fit:contain;を使う方法を試してみた。object-fit:contain;を使うと、要素枠内に合うサイズになり縦横比は維持され中央揃えされる。HTMLとCSSは非常にシンプルで美しい。だが、残念ながら、現時点ではMicrosoft EdgeやIEでは機能しない。
<span>タグのbackground-imageとbackground-sizeを使う方法
<div id="gallery">
<span style="background-image: url('thumbs/001.jpg')"></span>
<span style="background-image: url('thumbs/002.jpg')"></span>
</div>
<style>
#gallery span {
display: inline-block;
background-position: center center;
background-repeat: no-repeat;
margin: 2px;
width: 240px;
height: 240px;
background-size: contain;
}
</style>
<img>タグのobject-fit:contain;を使う方法
<div id="gallery">
<img src="thumbs/001.jpg">
<img src="thumbs/002.jpg">
</div>
<style>
#gallery img {
object-fit: contain;
margin: 2px;
width: 240px;
height: 240px;
}
</style>
