インクレイブ[仙台・渋谷] - ITプロダクト・ホームページ制作・Webシステム開発・デザイン開発

こんにちは、IT開発センター 川崎です。
お馴染みになりつつある、CSSの小ネタ紹介のお時間です。

以前、DIVタグによる記述に関した記事を書かせていただきましたが、そのDIVタグを使って縦位置中央配置をしたいと考えたことはないでしょうか。
今回はCSSを使用したDIV縦位置中央配置を紹介したいと思います。

htmlソースは以下の通りとなります。
　
　

▼html

<div class="table">
	<div class="mdl">
			<div>縦位置中央</div>
	</div>
</div>

記述方法としてはTableに近いと思いますが、3つのDIVで構成します。
よくありがちなのがCSSへ「Vertical-align：middle」を設定する方法がありますが、それだけでは中央に配置されませんので以下のように記述します。

▼CSS

div.table {
	display: table;	/*親DIVをTABLE概念へ*/
	width: 248px;
	height: 118px;
	background-color:#EEF;
	color: #006;
	/position: relative;
}  

div.table div.mdl {
	display: table-cell;/*小DIVをTD概念へ*/
	vertical-align: middle;
	/position: absolute;/*IEはTABLE概念が適用されない為必須*/
	/top: 50%;
	border:1px solid #CCC;
	width:100%;
	text-align:center;
	}  

div.table div.mdl div {
	/position: relative;  /*孫DIVへIE用ポジション設定*/
	/top: -50%;
}

左の画像が上記CSSにて表現したものです。少々IE対策が面倒ではありますが、上記のCSSで縦位置中央が実現できます。
DIVをTABLEの様にセルの属性にすることができ、その後「vercital-align:middle」を設定するとTABLEタグの様に扱えます。
IEではその属性が通用しない為、positionで位置指定する必要があります。

この他にもmarginを使用した縦位置中央配置があるようですが、今回はpositionを使用した方法を紹介させていただきました。
もっと簡略的な方法が無いかと日々探している川崎でございました。

こんにちは、IT開発センターの佐々木です。

みなさん、ゴールデンウィークはいかがお過ごしになりましたか？これからますます暖かくなり、行楽や観光に出かける機会も多くなると思います。前回に引き続き、カメラにまつわる基礎知識をご紹介します。今回は被写界深度【ひしゃかい-しんど】についてです。

被写界深度とは

例えば雑誌などでよく見かける、素敵なカフェの写真。コーヒーカップにピントが合っていて、背景には緑溢れる庭がぼんやりと写っていて…。このように、フレームの中の一部にピントが合っていて、その他がボケている状態を「被写界深度が浅い」と言います。

反対に、眼前に広がる大きな山並みの写真。フレーム内のほとんどの部分にピントが合っていて、ボケている部分がない。この状態を「被写界深度が深い」と言います。

ピントの合っている範囲が、自分から近いところまで=浅い、自分から遠いところまで=深い、というイメージです。

被写界深度と絞り、焦点距離の関係

始めにお断りしますが、一般的なコンパクトデジカメでは、背景をボカした写真を撮るのは難しいのです。ただし「絞り」や「焦点距離」が調整できる機能を持った機種をお持ちの場合はすぐに試すことが出来ますので挑戦してみてください。
※最後にiPhoneのカメラで背景をボカして撮影する小ネタを紹介します！

●被写界深度の浅い写真(背景をボカした写真)を撮るには
・絞りを開く（F値を小さくする）
・ズームを望遠側にする
・被写体との距離を近くする

●被写界深度の深い写真(広い範囲にピントを合わせた写真)を撮るには
・絞りを絞る（F値を大きくする）
・ズームを広角側にする
・被写体との距離を遠くする

なぜ撮るのか、目的も大切

背景をボカした写真というのは柔らかい印象を与え、雰囲気のいいものです。でも、せっかく背景に素晴らしい庭があるのに、手前の飲み干してしまったコーヒーカップにだけピントが合っていてはもったいないというもの。美味しいコーヒーが魅力のカフェに遊びに行ったのなら、背景の庭をボカしてコーヒーだけにピントを合わせることでコーヒーに注目してもらうことが出来ます。または、庭の緑が素敵なカフェに行ったのなら、コーヒーの置かれたテーブルから庭まで見渡せるような、全体にピントを合わせた写真を撮るのもいいでしょう。

どうしてボカすのか？何を見てもらいたいのか？という点を意識してみると、自分の意図が込められた写真になりますし、自然と写真の構図も決まってきます。

iPhoneで背景をボカして撮る！

最後に、ちょっとした小ネタを。iPhoneのカメラでは絞りを調整することは出来ませんが、前述の「被写界深度の浅い写真(背景をボカした写真)を撮るためには」のうち、
→ズームを望遠側にする
→被写体との距離を近くする
この2点を守って撮影すると背景をボカすことが出来ます。

具体的には…

1.被写体になるべく近づく
※あまり近づきすぎるとピントが合いません。iPhoneは接写が苦手です
2.ピントを合わせたい部分をタップする
※iPhoneのカメラは画面をタップすると任意の場所にピントが合わせられます
3.被写体の背景にはなるべく広い空間を確保する
※すぐ後ろが壁などではボカしようもありません…

高機能なカメラほどのボケは出来ませんが、背景がやんわりとボケた柔らかい印象の写真が撮れます。是非お試しください！

こんにちは、IT開発センター 川崎です。前回に続き、CSSの小ネタを紹介したいと思います。

今ではどのサイトを見てもDIVだらけで、すっかり登場回数が減ったTABLEタグですが、やはり表を表現したい時はTABLEタグが最適だと思います。今回はTABLEタグとCSSの組み合わせで、ちょっとしたテクニックを紹介したいと思います。

TABLEは表として使うことが多いため、罫線を引くことが多いかと思いますが、border属性で表現するとどうもイマイチ…なんて経験はありませんでしょうか。そこでよく当時使用した方法が以下の方法です。

1. TABLEへBGCOLORで罫線となる色を設定する。
2. TD、THへBGCOLORで白を設定する。
3. TABLEのCELLSPACINGを「1」に設定する。

この方法で1pxの罫線が表現できましたが、記述としては正いとは言えません。
また、ソースを汚してしまう為SEOの観点からも不利になる場合があります。

そこで、TABLEのデザインをCSSで表現してみましょう。
以下の表をご覧ください。

シンプルで従来のTABLEと変わらず見えますが、罫線はCSSで表現しています。
このTABLEを表現するCSSは以下のとおりです。

table.style{
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
/* tableの上、左に罫線を設定 */
}

table.style th,
table.style td{
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
/* th,tdの右、下に罫線を設定 */
}

table.style div{
margin:5px;
/* cellpaddingを使用しない様に、セル内のDIVへ余白を設定 */
}

TABLEとTH,TDにそれぞれ罫線を設定し、組み合わせて格子のように表現しています。分解すると下の図の様になります。

TABLEをCSSでデザインをしたことがある方は「border-collapse:collapse」を使用したほうが、簡単だと感じたかもしれませんが、ブラウザにより計算が間違う事がありますのでcollapseはおすすめできません。

この方法を使用すると実線と罫線を組み合わせた以下の様な表も実現可能です。

サンプル１）

table.style th{
background-color:#FFC;
/* thに背景色を設定 */
}

table.style th,
table.style td{
border-bottom: 1px solid #CCC;
border-right: 1px dotted #CCC;
/* th,tdの右、下に罫線を設定 */
}

table.style th.right,
table.style td.right{
border-right:0;
/* th,tdの右罫線を非表示 */
}

table.style th.bottom,
table.style td.bottom{
border-bottom:0;
/* th,tdの下罫線を非表示 */
}

table.style div{
margin:5px;
/* cellpaddingを使用しない様に、セル内のDIVへ余白を設定 */
}

サンプル２）

table.style{
border: 1px solid #CCC;
/* tableの罫線を設定 */
}

table.style th{
background:#F0F5E0;
border-top: 1px solid #FFF;
border-bottom: 1px dotted #CCC;
border-left: 1px solid #FFF;
/* thの背景色と上、右、下に罫線を設定 */
}

table.style td{
border-top: 1px solid #FFF;
border-bottom: 1px dotted #CCC;
/* tdの上下に罫線を設定 */
}

table.style th.bottom,
table.style td.bottom{
border-bottom: 0px;
/* th,tdの下罫線を非表示 */
}

table.style div{
margin:5px;
/* cellpaddingを使用しない様に、セル内のDIVへ余白を設定 */
}

今まで味気ないと感じていた表を、こちらの方法で飾ってみてはいかがでしょうか。
お役に立ちましたら幸いです。