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

こんにちは、IT開発センター 川崎です。

以前、仲沢よりHTML5をご紹介させていただきましたが、スマートフォンサイトへの導入を皮切りに、徐々に普及し始めてきました。
今回は次世代の標準HTML基準となるであろうHTML5で利用できるタグの一部をご紹介したいと思います。

▼追加された新たなタグ

<header>
サイト内のヘッダに使用

<footer>
サイト内のフッタに使用

<nav>
グローバルナビ、フッタナビなどのナビゲーション類に使用

<article>
ブログやコラム等で「記事」に当たるものに使用

<section>
一般的なドキュメントとして使用（"お問い合わせ案内"や"図"等）

<aside>
注釈などの補足等に使用

<hgroup>
「hタグ」のグルーピング、見出しリストとして使用

従来のサイトではDIVタグでレイアウト構成されているものがほとんどですが、今後はコンテンツに見合った<article>、<section>、<aside>等で構成するため、ソースが整理されSEOにも影響を及ぼすものと思われます。

また、INPUTタグのように、利便性が向上したタグも取り上げてみました。

▼INPUT
type="url"
URLの入力に使用し、入力チェックも可能

type="email"
メールアドレスの入力に使用し、入力チェックも可能

type="date"
日時の入力に使用

pattern
正規表現を設定
・郵便番号入力フォームの例
<input pattern="^[0-9]{3}\-[0-9]{4}$">

活用することで、サイト構築の効率化になるだけでなく、ユーザビリティ向上にもつながります。

実際にHTML5で構築したサイトを表現できるOperaでフォーム確認したのが下の図です。
Operaではemailやurlに自動でアイコンが表示され、dateの場合カレンダーが表示されます。

HTML5の機能としてはまだ、ほんの一部ですが、今回は初歩的な部分のみをご紹介させていただきました。

Operaだけでなく、ChromeやFireFoxでも対応が進んでいますが、シェアNo1のIEが対応しきれていない為、
PC版の普及には少し時間がかかりそうです。

▼ブラウザ対応状況
http://www.findmebyip.com/litmus/

こんにちは、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開発センター 川崎です。前回に続き、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へ余白を設定 */
}

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