『positionプロパティのabsoluteを使いこなす』というタイトルの内容について書いています。

興味がある方は、読んでいただければ幸いです。

• JavaScriptをきった場合は、年数がはいっていない画像を表示する。
• Development Referenceのマシモンに、相対パスでも使えるようにしたりもろもろ修正してもらいました。
• コピーライトの画像はデフォルト画像と同じディレクトリに配置
• altも、年度ごとに自動できりかわる。

JavaScriptをきった場合は、下記を表示

2009年の場合、下記を表示

2010年の場合、下記を表示

旧バージョン

■html
<p id="copyrightyear"><img src="common/img/copyright.gif" alt="Copyright &copy; Magic Happens" width="201" height="13" /></p>


■JS
function thisYear(){
		var day=new Date();
		var year=day.getFullYear();
		if(document.getElementById("copyrightyear")){
				document.getElementById("copyrightyear").innerHTML='<img src="'+'common/img/copyright'+year+'.gif" alt="Copyright &copy; '+year+' Magic Happens" width="201" height="13" />';
		}
}

function addEvent(){
			try {
			window.addEventListener('load', this.thisYear, false);
		} catch (e) {
			window.attachEvent('onload', this.thisYear);
		}
}

addEvent();

新バージョン

■html
<p id="copyright"><img src="images/copyright.gif" alt="copyright &copy; Magic Happens" width="201" height="13" /></p>

■JS
// --------------------------------------------------------------------
// Author  : mashimonator
// Create  : 2010/01/25
// Update  : 2010/01/25
// Description : コピーライト画像を該当年によって自動で切り替えて表示する
// --------------------------------------------------------------------

/*@cc_on 
var doc = document;
eval('var document = doc');
@*/
var copyright = {
	//-----------------------------------------
	// 設定値
	//-----------------------------------------
	config : {
		targetId : 'copyright', // コピーライトのID
		prefix : {
			img : 'copyright_####.gif', // ####部分に年数が挿し込まれる
			alt : 'copyright &copy; #### Magic Happens' // ####部分に年数が挿し込まれる
		}
	},
	storage : {
		origin : ''
	},
	//-----------------------------------------
	// 初期処理
	//-----------------------------------------
	initialize : function() {
		var element = document.getElementById(copyright.config.targetId);
		if ( element ) {
			var img = element.getElementsByTagName('IMG');
			if ( img && img.length > 0 ) {
				// 初期設定値を保持
				copyright.storage.origin = img[0].src;
				// 画像パスの書き換え
				img[0].src = copyright.getFilePath();
				// altの書き換え
				img[0].alt = copyright.getAlt();
				// 画像が存在しない場合
				img[0].onerror = function() {
					this.src = copyright.storage.origin;
				};
			}
		}
	},
	//-----------------------------------------
	// 該当年のコピーライト画像ファイルのパスを返す
	//-----------------------------------------
	getFilePath : function() {
		// 該当年取得
		var day = new Date();
		var year = day.getFullYear();
		// パス書き換え
		var path = copyright.storage.origin.split('/');
		path[path.length-1] = copyright.config.prefix.img.replace('####', year);
		return path.join('/');
	},
	//-----------------------------------------
	// 該当年のコピーライト画像ファイルのaltを返す
	//-----------------------------------------
	getAlt : function() {
		// 該当年取得
		var day = new Date();
		var year = day.getFullYear();
		// alt書き換え
		return copyright.config.prefix.alt.replace('####', year);
	},
	//-----------------------------------------
	// イベントに関数を付加する
	//-----------------------------------------
	addEvent : function( target, event, func ) {
		try {
			target.addEventListener(event, func, false);
		} catch (e) {
			target.attachEvent('on' + event, (function(el){return function(){func.call(el);};})(target));
		}
	}
}
// 実行
copyright.addEvent( window, 'load', copyright.initialize );

テキスト編

旧バージョン

■html
<p id="copyright">Copyright &copy; <span id="copyrightyear">2009～</span> Magic Happens</p>


■JS
function thisYear(){
		var day=new Date();
		var year=day.getFullYear();
		if(document.getElementById("copyrightyear")){
				document.getElementById("copyrightyear").innerHTML=year;
		}
}

function addEvent(){
			try {
			window.addEventListener('load', this.thisYear, false);
		} catch (e) {
			window.attachEvent('onload', this.thisYear);
		}
}
addEvent();

新バージョン

■html
<p id="copyright">Copyright &copy; 2009～ Magic Happens</p>


■JS
// --------------------------------------------------------------------
// Author  : mashimonator
// Create  : 2010/01/25
// Update  : 2010/01/25
// Description : コピーライトの文字列に自動で年を挿入する
// --------------------------------------------------------------------

/*@cc_on 
var doc = document;
eval('var document = doc');
@*/
var copyright = {
	//-----------------------------------------
	// 設定値
	//-----------------------------------------
	config : {
		targetId : 'copyright', // コピーライトのID
		prefix : 'copyright © #### Magic Happens' // ####部分に年数が挿し込まれる。####部分以外を自分のサイトのコピーライトに変更する。
	},
	//-----------------------------------------
	// 初期処理
	//-----------------------------------------
	initialize : function() {
		var element = document.getElementById(copyright.config.targetId);
		if ( element ) {
			// 該当年取得
			var day = new Date();
			var year = day.getFullYear();
			// パス書き換え
			element.innerHTML = copyright.config.prefix.replace('####', year);
		}
	},
	//-----------------------------------------
	// イベントに関数を付加する
	//-----------------------------------------
	addEvent : function( target, event, func ) {
		try {
			target.addEventListener(event, func, false);
		} catch (e) {
			target.attachEvent('on' + event, (function(el){return function(){func.call(el);};})(target));
		}
	}
}
// 実行
copyright.addEvent( window, 'load', copyright.initialize );

次は、画像編の予定

けっこう、下記のこと(他にもあるけど、とりあえず)考えない人いるんだよね。

• 仕様書なし？
• あとで仕様変更をがんがん追加？
• データベースのバックアップしないの？
• セキュリティのアップデートは、誰がすんの？（結構、頻繁にあるよね）
• 古いバージョンのサポート終了したとき、どうするの？
• (無償、有償)便利なプラグインが、たくさんあってすごい助かるけど、バージョンあげたときの動作の確認とかの対応は誰？

もしかしたら、作業工数増やしているのは制作側の担当者かもね。

• コンポーネント・・・部品あるいは成分を表す。
• モジュール・・・工学などにおける設計上の概念で、システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。

コンポーネント、 モジュールWikipedia参照

画像編

• JavaScriptをきった場合は、年数がはいっていない画像を表示する。
• 階層がかわっても表示されるように、JSのソースに書いているimg srcはルートパスにしている。（本当は、ローカルで確認できるように相対パスにしたいが・・・）

JavaScriptをきった場合は、下記を表示

2009年の場合、下記を表示

2010年の場合、下記を表示

■html
<p id="copyrightyear"><img src="common/img/copyright.gif" alt="Copyright &copy; Magic Happens" width="201" height="13" /></p>


■JS
function thisYear(){
		var day=new Date();
		var year=day.getFullYear();
		if(document.getElementById("copyrightyear")){
				document.getElementById("copyrightyear").innerHTML='<img src="'+'common/img/copyright'+year+'.gif" alt="Copyright &copy; '+year+' Magic Happens" width="201" height="13" />';
		}
}

function addEvent(){
			try {
			window.addEventListener('load', this.thisYear, false);
		} catch (e) {
			window.attachEvent('onload', this.thisYear);
		}
}

addEvent();

テキスト編

■html
<p id="copyright">Copyright &copy; <span id="copyrightyear">2009～</span> Magic Happens</p>


■JS
function thisYear(){
		var day=new Date();
		var year=day.getFullYear();
		if(document.getElementById("copyrightyear")){
				document.getElementById("copyrightyear").innerHTML=year;
		}
}

function addEvent(){
			try {
			window.addEventListener('load', this.thisYear, false);
		} catch (e) {
			window.attachEvent('onload', this.thisYear);
		}
}
addEvent();

１ファイルずつはずすのは、「メニュー→テンプレート→テンプレートから切り離す」をおこなえばいい。

すべてのファイルはずすには、といりあえずなんでもいいからファイル開いて、「メニュー→テンプレート→マークアップを省略して書き出し」からサイトの書き出し先フォルダを選択して、書き出せばオッケー

Web creators (ウェブクリエイターズ) 2010年 01月号

巻末特集の『脱メタボなWEBサイトのススメ』で2記事を担当しました。

記事タイトル：「スクロールが終わらないほどページが長い」、「リスト項目が増えすぎて情報が探しづらい」

Web creators (ウェブクリエイターズ) 2009年 12月号

巻頭特集の『最新WEB配色トレンド2010』で1記事を担当しました。

記事タイトル:「黒：使い方で主役にも脇役にも！全体の雰囲気を決定づける」

Web creators (ウェブクリエイターズ) 2009年 10月号

巻頭特集の『スタイルシートの差がつく見せ技、92 種 CSS デザイン表現 最新最強テクニック』で1記事を担当しました。

記事タイトル：「リスト表示をN型にレイアウトする」

Web creators (ウェブクリエイターズ) 2009年 09月号

巻末特集の『かっこいいWEBをつくる30の条件』で1記事を担当しました。

記事タイトル：「モノトーンのグラフィックを扱う」

Web creators (ウェブクリエイターズ) 2009年 08月号

巻頭特集の『クオリティそのままにコストと時間を削減する WEB 制作のアイデア』で1記事を担当しました。

記事タイトル：「使えそうなJavaScriptライブラリを実装しストックしておく」

Web creators (ウェブクリエイターズ) 2008年 11月号

巻頭特集の『サイトのメッセージを正しく伝えるWEBデザインの鉄則』で1記事を担当しました。

記事タイトル：「わかりづらい言い回しや類似したアイコン・ボタンを排除する」

Webにも掲載されました。(http://www.mdn.co.jp/di/articles/513/?page=5)

参考記事

• TC50: FluidHTMLはFlashをHTMLのように簡単に書ける新しいマークアップ言語

demo

thickbox.cssにGIFアニメーションをよみこませるだけです。

■thickbox.css
デフォルトの記述は、コメントアウトしています。

/*.TB_overlayMacFFBGHack {background: url(common/images/macFFBgHack.png) repeat;}*/
.TB_overlayMacFFBGHack {background: url(../images/fuzz.gif) repeat;}

.TB_overlayBG {
/*background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;*/
background:url(../images/fuzz.gif) repeat;

}

demo

■jQuery
$(document).ready(function() {

$("ul#topnav li").hover(function() { //Hover over event on list item
$(this).css({ 'background' : '#ec6800 url(topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
$(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
$(this).css({ 'background' : 'none'}); //Ditch the background
$(this).find("span").hide(); //Hide the subnav
});

});

■CSS
ul#topnav {
margin: 0;
padding: 0;
float: left;
width: 500px;
list-style: none;
position: relative;
font-size:93%;
background: #333;;
}
ul#topnav li {
float: left;
margin: 0;
padding: 0;
border-right: 1px solid #555;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover { background: #ec6800; }
ul#topnav li span {
float: left;
padding: 15px 0;
position: absolute;
left: 0; top:35px;
display: none;
width: 500px;
background: #ec6800;
color: #fff;
-moz-border-radius-bottomright: 3px;
-khtml-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;
-moz-border-radius-bottomleft: 3px;
-khtml-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}


■HTML
<ul id="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">企業情報</a>
<span>
<a href="#">ご挨拶</a> |
<a href="#">会社概要</a> |
<a href="#">企業理念</a> |
<a href="#">会社沿革</a> |
<a href="#">アクセスマップ</a>
</span>
</li>
<li>
<a href="#">採用情報</a>
<span>
<a href="#">新卒採用</a> |
<a href="#">中途採用</a>
</span>
</li>
</ul>

demo

■CSS
ul, li {
list-style-type:none;
padding:0;
margin:0;
}		
#topicPath {
height:2.3em;
border:1px solid #dedede;
}
#topicPath li {
float:left;
line-height:2.3em;
color:#777;
padding-left:.75em;
}		
#topicPath li a {
background:url(common/images/topicpath_bg01.gif) no-repeat right center;
display:block;
padding:0 15px 0 0;
}


■HTML
<ul id="topicPath">
<li><a href="#">Home</a></li>
<li><a href="#">works</a></li>
<li>テスト</li>
</ul>

h2=document.getElementsByTagName('h2');
for(var i=0; i<h2.length; i++) {
  h2[i].style.color='#0099CC';
}


下記のほうが、速度がはやくなる。

h2=document.getElementsByTagName('h2');
for(var i=0; L=h2.length; i<L; i++) {
  h2[i].style.color='#0099CC';
}

下記は、理由を簡単にまとめています。詳細は、WebクリエイティブのためのDOM Scriptingという本にが書かれてています。参考にどーぞ。

• ノードリストのlengthプロパティにアクセスするのがあまりはやくない（現在のドキュメントから再度html要素の数を計算しなおしているため）
• forループの条件式は、ループが回るたびに実行されるから

demo