読者です 読者をやめる 読者になる 読者になる

晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

CSSで画像を正方形枠内で上下左右中央揃えするシンプルな方法

前回の「写真/画像をサムネイル一覧するHTMLサンプル」で紹介したHTMLサンプルでは、画像を正方形枠内で上下左右中央揃えする方法として、<span>タグのbackground-imageとbackground-sizeを使っていたが、<img>タグのobject-fit:contain;を使う方法を試してみた。object-fit:contain;を使うと、要素枠内に合うサイズになり縦横比は維持され中央揃えされる。HTMLとCSSは非常にシンプルで美しい。だが、残念ながら、現時点ではMicrosoft EdgeIEでは機能しない。

f:id:art2nd:20170315085112j:plain

<span>タグのbackground-imageとbackground-sizeを使う方法

→ <span>タグ版 画像サムネイルHTMLサンプル

<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;を使う方法

→ <img>タグ版 画像サムネイルHTMLサンプル

<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>

写真/画像をサムネイル一覧するHTMLサンプル(ブロック全体は中央揃え+中の複数画像は左寄せ)

写真/画像をサムネイル一覧するHTMLサンプルを作成。

f:id:art2nd:20170313140402j:plain

「サムネイル一覧のブロック全体はページ内で左右中央揃えし、ブロック内の複数画像は左寄せする。」というのをCSSだけで実現したかったが、ブロック内の右側に余分な余白が付いてしまうのを解除する方法が見つからず。Yahoo!知恵袋で質問して、oishii_mahouさんからJavaScriptで実現する方法を教えてもらって解決。方法としては、ブロック内の横一列に並ぶ画像の数に合わせてブロックの横幅を調整し、余分の余白が出来ないようにする。

画像サムネイル一覧のブロック全体をページ内で左右中央揃えしたい。... - Yahoo!知恵袋

画像サムネイルHTMLサンプルページは以下。なお、ブロック内の各画像はそれぞれ正方形ボックス内で上下左右中央揃えしている。

≪画像サムネイル・サンプル≫

http://home2nd.html.xdomain.jp/thumbnail-sample.html

12cm×8cmの小さなアート≫にも適用。

http://2ndart.16mb.com/

以下関係部分のHTML+CSS+JavaScript

<div id="contents">
	<div id="gallery">
		<span style="background-image: url('thumbs/001.jpg')"></span>
		<span style="background-image: url('thumbs/002.jpg')"></span>
		...
	</div>
</div>
<style>
#contents {
	margin: 0 auto;
}
#gallery {
	margin: 0 auto;
	padding: 0;
	text-align: left;
}
</style>
<script>
function initGallery() {
	gallery = document.getElementById("gallery");
	imgItem = gallery.getElementsByTagName("span");
	gallery.innerHTML = gallery.innerHTML.replace( /\r?\n|\r/g, "" );	// 改行コードを除去
	adjustGallery();
}
function adjustGallery() {
	var imgStyle = imgItem[0].currentStyle || document.defaultView.getComputedStyle(imgItem[0], "");
	var imgMargin = parseInt(imgStyle.marginLeft, 10) + parseInt(imgStyle.marginRight, 10);
	var imgWidth = imgItem[0].offsetWidth + 5;
	var winWidth = document.body.offsetWidth || document.documentElement.offsetWidth;	// ウィンドウ幅
	var imgNum = Math.min(Math.floor(winWidth/imgWidth), imgItem.length);	// 横に並んでいる画像の数
	gallery.style.width = imgNum * imgWidth + (imgNum - 1) * imgMargin + "px";
}
window.addEventListener( "load", initGallery, false );
window.addEventListener( "resize", adjustGallery, false );
</script>

「12cm×8cmの小さなアート」作品追加(#208-#217)

「12cm×8cmの小さなアート」に作品を10個(#208-#217)追加しました。

《12cm×8cmの小さなアート》

http://2ndart.16mb.com/?p=6

f:id:art2nd:20170310140511j:plain

御影→打越山→横池→風吹岩→保久良梅林→岡本

阪急電鉄広報誌「ハイキングTOKK」に載っていた「打越山&七兵衛山コース」を歩いてみた。阪急御影駅から登って阪急岡本駅に降りてくるコース。一部急な坂もあるが、概ね歩きやすい道。途中TOKKのコースから外れて横池にも寄ってみた。昼食休憩10分を除いて約3時間。

横池までの登山道では人に会わなかったが横池では30人程が昼食をとっていた。横池から岡本に降りる道では何組かのハイカーとすれ違った。平日にも関わらず、比較的若いハイカーが多かった。横池からの道は道幅も広く歩きやすいが、風吹岩周辺は岩場で道がいくつもあって、どれが最善のルートなのかよく分からなかった。風吹岩には猫が何匹も居た。六甲山周辺には結構猫が住み着いているらしい。ハイカーが餌をやっているのだろうか。保久良梅林の梅も見頃だった。

下の地図は「登山情報サイト | YAMAP(ヤマップ)」の地図を利用させていただきました。

f:id:art2nd:20170310125802j:plain

GPSログGoogleマップで表示したものが以下。(パソコンで見てください。)

GPSログ:御影→打越山→横池→風吹岩→保久良梅林→岡本

f:id:art2nd:20170309152628j:plain

f:id:art2nd:20170309152636j:plain

f:id:art2nd:20170309152650j:plain

f:id:art2nd:20170309152658j:plain

城南宮のしだれ梅と椿

3月5日、京都城南宮のしだれ梅を見に行ってきた。ちょうど見頃。花の密集度が凄い。椿も種類が多く、薔薇のような椿も。苔の上に落ちた椿も緑と赤のコントラストがきれい。ついでに伏見の酒蔵、黄桜酒造と月桂冠にも寄ってみた。

f:id:art2nd:20170305155227j:plain

f:id:art2nd:20170305155229j:plain

f:id:art2nd:20170305162006j:plain

f:id:art2nd:20170305155226j:plain

f:id:art2nd:20170305155156j:plain

f:id:art2nd:20170305155234j:plain

月桂冠大倉記念館を裏手から見たところ。

f:id:art2nd:20170305155130j:plain

和泉リサイクル環境公園の梅林

2月25日、和泉リサイクル環境公園の梅を見に行ってきた。

産業廃棄物埋立跡地を利用した所らしいが、枝垂れの梅が多く、期待以上にきれい。

公共交通機関で行く場合、泉北高速線和泉中央駅から南海バスで納花(のうけ)というバス停で降りて10分程歩くのだが、歩道のない狭い道路の割に交通量が多く歩きづらいのが難点。

f:id:art2nd:20170228161019j:plain

f:id:art2nd:20170228161021j:plain

f:id:art2nd:20170228161022j:plain

f:id:art2nd:20170228161024j:plain

f:id:art2nd:20170228161018j:plain

 

阪急岡本駅の北側にある岡本梅林公園に行ってきた

阪急岡本駅の北側にある岡本梅林公園に行ってきた。

小さな公園だが、30種以上の品種の梅がある。

岡本は昔「梅は岡本、桜は吉野、みかん紀の国、栗丹波」と唄われる程有名な梅林地帯だったとのこと。

岡本には山側にもう一つ、保久良梅林があるが、見頃はもう少し先か?

f:id:art2nd:20170222095541j:plain

f:id:art2nd:20170222095553j:plain

f:id:art2nd:20170222095639j:plain

f:id:art2nd:20170222095647j:plain