Another Step.com http://another-step.com HTML、CSS、その他なんちゃってWebデザイナーの備忘録 Sat, 08 Jan 2011 11:58:14 +0000 ja hourly 1 http://wordpress.org/?v=3.0.4 HTML5ことはじめ http://another-step.com/2010/08/22/70/ http://another-step.com/2010/08/22/70/#comments Sun, 22 Aug 2010 06:52:00 +0000 anotherstep-admin http://another-step.com/?p=70 続きを読む →]]> 制作者側にはかなり普及してきた感もあるHTML5。
情報は溢れていますが、自身も少しづつ勉強してきたのでXHTML1.0との違いなどをメモがわりにアウトプットしてみました。
(マークアップメインの話です)

HTML5はW3Cより2008年1月22日に草案が発表され、2010年8月現在も草案の段階です。
勧告はW3Cが2012年3月、WHATWGは2022年としており、どちらにしてもまだ先ですが、新しいブラウザは段階的に対応していくと予想されるし、JSを使えばIEもカバーできるので、現状利用することも可能でしょう。
メリット・デメリットについては賛否両論?あるでしょうが…

※このサイト自体もHTML5で組んでいますが、HTML5、WordPressともに未熟なため、制御できず正しく組めていない箇所があります。
また下記内容についても間違っている可能性があるので、その場合は指摘していただけると助かります。

HTML5を利用するにあたって

2010年8月現在多くのブラウザはHTML5での新要素はデフォルトスタイルが用意されていないため、必要な要素には予めCSSでdisplay:blockを指定するのが一般的です。

article, aside, canvas, details, figcaption, figure, header,
footer, hgroup, menu, nav, section, summary {
	display: block;
}

指定する要素は必要に応じて調整が必要かもしれません。

Intenet Explorer8以下のHTML5対応

IEはHTMLの新要素に対して正しいDOMを構成しないので、JavaScriptのdocument.createElement()を利用して、要素を新たに作り出す必要があるようです。
IE8以下にはgoogleコードでそれを実現してくれるhtml5.jsを読み込んでおけばOKでしょうか。
※なんかごめんなさい、不要な部分を削除しました。(2010-08-23)

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

DOCTYPE

これまでのDOCTYPE宣言は長ったらしく暗記して書ける人も多くはなかったかもしれませんが、HTML5は物凄く短くなりました。

<!DOCTYPE html>

たったこれだけなのでコピペしなくてもいけそうです。
ぶっちゃけ従来のXHTML1.0で書かれた文書のDOCTYPEを変更するだけで、基本的にはHTML5に準拠したものになったりしますw
※WordPress3のデフォルトテーマのtwentytenも新要素を使わずDOCTYPEだけHTML5といったところでしょうか。

head内の要素他

<html lang="ja"><!--日本語サイトの場合-->
<head>
<meta charset="文字コード" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

※html要素にはlang属性を指定するのみ。
※文字コードはmetaタグのcharset属性で指定。

<link rel="stylesheet" href="ファイル名.css" type="text/css" />
<script src="ファイル名.js" type="text/javaScript"></script>

※上記はtype属性を指定しなくてもOKです。

マークアップ方法

終了タグの省略

終了タグが必須だったXHTMLとは異なり、HTML4のように終了タグを省略が許されます。
※もちろん全部じゃなく条件つきです。

<ul>
<li>2010年8月
<li>2010年9月
<li>2010年10月
</ul>

※<li>の終了タグを省略しています。

空要素について

空要素は<br>もしくは<br />とマークアップします。
ただし<br></br>のように中身なしの開始・終了タグといった書き方は許されないようです。

コンテンツ属性について

コンテンツ属性の引用符は省略できますが、値自体に”、’、<、>、=、\などが含まれる場合は省略不可です。

<input type = text value= HTML5 name = search />
<input type = "text" value = "HTML5" name= "search" />

※どちらもOK(ただし値に”、’、<、>、=、\などが含まれる場合は下の書き方で)

比較的柔軟な書き方が許されますが、なんにしても一つのサイトで書き方の統一は必要でしょう。
個人的には慣れたXHTML1.0の書き方をそのまま移行が分かりやすいかなと思ってます。

セクショニングコンテンツについて

個人的にはマークアップするときに最も意識したいのがアウトラインかなと思うのですが、セクショニングコンテンツはその中でも重要なのではないでしょうか。
セクショニングコンテンツに分類される要素はarticle、aside、nav、section要素です。

section要素

セクションは章や節を表し、見出しとその内容で構成されます。
逆に言えば見出しが書けない場合はsectionでのマークアップは適していないということです。
※sectionを利用すればこれまでのようなdivの多用を減らせると思いますが、sectionは新しいdivではありませんw

セクション内は見出しのレベル(h1～h6)をリセットできます。
※セクションのネストに沿った見出しレベルで書くことも可能。

見出しのレベルをリセットした書き方

<body>
<h1>HTML</h1>
<p>HTMLについて</p>
	<section>
		<h1>HTML5</h1>
		<p>HTML5について</p>
		<section>
			<h1>section要素</h1>
			<p>section要素の特徴</p>
		</section>
	</section>
</body>

見出しのレベルを継承した書き方

<body>
<h1>HTML</h1>
<p>HTMLについて</p>
	<section>
		<h2>HTML5</h2>
		<p>HTML5について</p>
		<section>
			<h3>section要素</h3>
			<p>section要素の特徴</p>
		</section>
	</section>
</body>

どちらで書くかによって(場合によっては)CSSのセレクタの作りやすさが変わってくると思いますが、どちらにしても統一した書き方が出来ていればOKなのでしょう。
※現状でh1を多様すると検索エンジンにスパム扱いされるなんて噂を聞いた気がするんですがどうなんでしょ？大丈夫だとは思いますが

article要素

article要素はブログの記事、ニュース記事などのように、それだけで独立したコンテンツをマークアップします。
それ自身が独立していればいいので、掲示板の投稿や、ブログへのコメント、通販サイトの商品説明コンテンツにも利用できるのではないでしょうか。
article要素を利用できる基準としてよくいわれるのはRSSフィードなどの1つのエントリーとして成り立つか否かだそうです。

aside要素

aside要素はメインとなるコンテンツと関連性の薄い、もしくは間接的にしか関連しないコンテンツに利用します。
aside要素には見出しを含めなくても問題はないです。
article要素の中でaside要素を入れる場合は、補足記事やイメージ写真に使用できます。
逆にarticle要素の外側ではサイドばーやバナー広告などへの使用でしょうか。

nav要素

nav要素は主要なナビゲーションを形成するリンクの集まりに利用します。
「主要な」ということでグローバルナビゲーションへの利用がまず考えられますかね。
内容が同じでも主要でないページ下部のフッターにあるページナビゲーションには適さないようです。
サイドナビやパン屑リストも主要なナビゲーションと見なせば利用できるようです。

サイトマップで利用できるか?

※サイトマップはナビゲーション自体がメインコンテンツなのでnav要素でのマークアップは適さず、section要素などでマークアップが適切のようです。

参考にしたサイト・参考になるサイト

ざーっと書いて長くなったのでここまでですが、いつか続きを書きたいです。
いたるところにありふれた情報ですがアウトプットの練習ということで。
以下ためになるサイトです。

]]> http://another-step.com/2010/08/22/70/feed/ 2 CSS3でアクアボタン http://another-step.com/2010/08/15/42/ http://another-step.com/2010/08/15/42/#comments Sat, 14 Aug 2010 15:06:44 +0000 anotherstep-admin http://another-step.com/?p=42 続きを読む →]]> 現在CSS3を勉強中でふと、グラーデーションと角丸を利用すればCSSだけで一昔前に流行った?アクアボタンを再現できるんじゃないかと思い調べてみました。
※↓こういうやつ（下のは画像です）
アクアボタンのダミー画像です。

調べてみた

自分ができると思ったくらいなんで、すでに作ってる方もいるだろうと思い調べると
ホント素晴らしく見事に作成されてる方がいました。

CSS3 Box-Shadow with Inset Values – The Aqua Button ReReVisited!
上記サイトではCSSのみでとてもキレイなアクアボタンを再現しています。

実践してみた

ただ幅を固定していると使いづらいかなというのとinput要素でなくa要素のみで作成しようと思い、上記サイトを参考にして自分も実践してみました。

アクアボタンデモ

HTMLソース

<p class="aquaBtn"><a href="#">アクアボタン</a></p>

CSSソース

.aquaBtn a {
	padding: 3px 15px;
	text-align: center;
	position: relative;
	background-color: #348ee0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.3, rgb(84, 163, 233)), color-stop(0.60, rgb(52, 142, 224)), color-stop(1, rgb(140, 200, 250)));
	background: -moz-linear-gradient(center top, rgb(84, 163, 233) 0%, rgb(52, 142, 224) 60%, rgb(140, 200, 250) 100% );
	border: 2px solid #54a3e9;
	border-radius: 18px;
	-webkit-border-radius: 18px;
	-moz-border-radius: 18px;
	-webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 5px 8px;
	-moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 5px 8px;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 1px 1px;
	overflow: hidden;
 }  

.aquaBtn a:before {
	content: "";
	height: 1.05em;
	width: 92%;
	padding: 0px 0;
	margin-left: -46%;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.25);
	background: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
	background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 95%);
}

 .aquaBtn a {
	color: #fff;
	text-decoration: none;
}

.aquaBtn a:hover {
	text-shadow: rgba(255, 255, 255, 0.6) 0px 0px 5px;
 }

ポイントはa：before疑似要素の幅を%指定して、position: absoluteとleft: 50%、margin-left: -46%で光沢部分を中央配置しているところでしょうか…
※マージンの-46%の値は幅92％の半分の値です

%指定なのであまり横長になるとボタンとボタンの光沢部分の幅の差が大きくなってしまいますが、これである程度はボタンの中の文字数が可変しても対応できるようになります。

確認したブラウザはChrome5.0とFirefox3.8です、IEは見る気すら起きません。

]]> http://another-step.com/2010/08/15/42/feed/ 1 スクロールすると出てくる「ページトップへ」ボタン http://another-step.com/2010/08/14/29/ http://another-step.com/2010/08/14/29/#comments Sat, 14 Aug 2010 07:09:51 +0000 anotherstep-admin http://another-step.com/?p=29 続きを読む →]]> 様々なサイトでたま～に見かける
スクロールするとふわっと出てくる「ページトップへ」ボタン。
このブログでも一応実装したのでメモ。

よく使われているプラグイン

どこで見かけたか思い出せなかったのですが
google先生に聞いたところよく使われているのは
「jQuery Scroll to Top Control」というプラグインのようです。
→配布先

jQueryを読み込んだ後にこのJSを読み込むだけで「ページトップへ」のフェードのほか、
いわゆる「するするスクロール」?まで実装してくれる便利なプラグインです。
（たくさんのサイトで紹介しているので詳細は省きます。）

気になった点

で、早速試してみたのですが…
jQuery Scroll to Top Controlデモ

  • そもそも「するするスクロール」は別のJSで実装している
  • 右下に固定はIE6に目を瞑ればCSSのposition:fixed;で実装できる
  • JSが効かない環境では「ページトップへ」が表示されない
  • 隠れている状態でもボタン自体は存在していてリンクも生きている
    （デモを見てもらえばわかりますがスクロールせず、隠れている状態でも右下にマウスカーソルを持っていくとボタンが存在しているのが確認できます）

上記4点のうち特に4つ目が気になったので改造・自作してみました。

改造・自作してみました

自作版デモ

「するするスクロール」や右下固定は別の手法で実装しているのでスクロールすると出現するというだけのものです。

JSソース

var scrolltotop={

	//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
	setting: {startline:100},

	state: {isvisible:false, shouldvisible:false},

	togglecontrol:function(){

		var scrolltop=jQuery(window).scrollTop()

		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
		if (this.state.shouldvisible && !this.state.isvisible){
			jQuery("#pageTop").fadeIn("fast");
			this.state.isvisible=true;

		}
		else if (this.state.shouldvisible==false && this.state.isvisible){
			jQuery("#pageTop").fadeOut("fast");
			this.state.isvisible=false;
		}
	},

	init:function(){
		jQuery(document).ready(function($){
			jQuery("#pageTop").hide();
			var mainobj=scrolltotop;

			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol();
			})
		})
	}
}
scrolltotop.init();

jQueryを読み込んだ後にこのJSを読み込むとid=”pageTop”を設定した要素がスクロールによりフェードイン・アウトします。

え？IE6？？…そんなもの知りませんっ！

]]> http://another-step.com/2010/08/14/29/feed/ 0 とりあえずブログ新規開設 http://another-step.com/2010/08/01/10/ http://another-step.com/2010/08/01/10/#comments Sun, 01 Aug 2010 12:14:59 +0000 anotherstep-admin http://www.another-step.com/?p=10 続きを読む →]]> WordPressの勉強とアウトプットの練習を兼ねてブログを開設してみました。

むかーーしもブログを書いていたときもあるんですが、ドメイン取得してというのは初めてなのです。
飽きっぽいので無理をせず、月1でも更新できればいいなと思います。
WordPressもまだまだ全然でデザインも中途半端な状態での開設なので
これから適宜変更していきたいと思うのです。
一部CSS充ててないトコあったり…

あ、このサイトはIE無視しています（汗

]]> http://another-step.com/2010/08/01/10/feed/ 0