Microsoftの無償Web開発ツール「WebMatrix」の紹介。
WebMatrixでは通常のWeb制作はもちろん、デスクトップでもサーバーと同じ環境を使用することができるので、WordPressやXOOPS Cube Legacy, SugarCRM, EC-CUBEなどのオープンソースのWebアプリケーションを活用することができます。
テキストエディターはHTML、CSS、JavaScript、PHP、ASP.NET などをハイライト表示したり、色分けすることができます。
データベースはSQL Server Compact と呼ばれる軽量の埋め込み型データベースが含まれています。SQL ServerやMySQLへも対応。
検索エンジンでサイトが表示されやすくなるようアドバイスしてくれるSEOレポートも作成できます。
Windowsをお使いの方でこれからWeb制作を始めてみようとお考えの方は試してみてはいかがでしょう。
メールには普段Gmailを使っているのですが、Gmailのちょっと変わったアイデア実験室のGmail Labsにちょっと便利な機能があるのでご紹介。
受信トレイでメッセージを右クリックすることで、スレッドを開くことなく内容を見ることができます。
Google ドキュメントへのリンクがある場合、ドキュメントやスプレッドシート、プレゼンテーションのプレビューをメールに直接表示します。また、それらを Google ドキュメントで開くためのオプションも表示します。
メール内で見つかったすべての住所を Google マップでプレビュー表示します。
タブのアイコンを見れば、受信トレイ内の未読メールの件数がすぐにわかります。この Labs 機能は Chrome（バージョン 6 以降）と Firefox（バージョン 2 以降）でのみご利用いただけます。
間違って [送信] ボタンを押してしまったことはありませんか？[送信] をクリックしてから数秒以内ならメールの送信をキャンセルすることができます。
Gmail LabsはGmailの設定からLabsタブをクリックしたところにあります。
機能を試してみたい時は「有効にする」にチェックを入れて設定を保存してください。
今回紹介したもの以外にも便利な機能があるのでGmailをお使いの方は1度見てみてください。
Gmailの最新情報はこちらから見ることができます。
ブラウザのスタイルをリセットする「CSS Reset」のまとめサイトの紹介。
Internet Explorer、Firefox、Safari、Google Chrome、Operaなどのブラウザにはそれぞれデフォルトのスタイルがあり、それが各ブラウザごとに違っているのでそれを揃えてみようというものです。
現在まとめられているのは以下の7つです。
CSS リセットの先駆者のひとりEric MeyerのReset CSS。
プロジェクトに合わせて編集、調整することを推薦していますが、ほとんどの人は未編集の状態で使っています。
Eric Meyer’s “Reset CSS”のドキュメント
Eric Meyer’s “Reset CSS”を基にHTML5の新しい属性を利用し、非推奨されたHTML4の要素を取り除いたもの。
HTML5 Doctor CSS Resetのドキュメント
Yahoo! YUI 3は次世代のJavaScript / CSSのライブラリです。
Yahoo! CSS Reset (YUI 3)のドキュメント
すべての要素を対象にするユニバーサルセレクタを用いたCSSリセット。
Universal Selector ‘*’ Resetのドキュメント
デフォルトのスタイルも活かしつつ、必要な箇所だけ上書きするCSS。
他のCSS Resetと提携して働くように設計されています。
Vanilla CSS Un-Resetのドキュメント
読みやすさやコンテンツのユーザビリティを向上させます。
Tripoli CSS Reset – David Hellsingのドキュメント
画像からのリンクのborder及びmargin、paddingを取り除き、フォントサイズを1emに揃えます。
‘undohtml.css’ – Tantek Celikのドキュメント
CSSとjQueryを使ったスライドショーを作ったのでエントリー。
スライドさせたい画像と「次へ」と「戻る」があるだけのシンプルな構造です。
ほっとくと自動でスライドしたりします。「次へ」と「戻る」のどちらかを押せば止まります。
[html]
[/html]
[css]
#container {
margin: 0 auto;
width: 800px;
}
#nav {
margin-top: 100px;
width: 800px;
position: relative;
}
#imgPrev, #imgNext {
width: 50px;
height: 100%;
position: absolute;
top: 0;
}
#imgPrev {
left: 0;
background: url(images/arrow_left.png) no-repeat center center;
}
#imgNext {
right: 0;
background: url(images/arrow_right.png) no-repeat center center;
}
#imgPrev a, #imgNext a {
width: 50px;
height: 100%;
text-indent: -9999em;
display: block;
overflow: hidden;
}
#imgArea {
width: 100%;
height: 100%;
overflow: hidden;
}
#imgWrap li.img {
list-style-type: none;
}
#imgWrap li.img a {
margin: 0;
float: left;
width: 800px;
height: 280px;
display: block;
}
[/css]
jQueryを設置するには「公式サイト」からライブラリー本体をダウンロードして使うか、Googleが提供している「Google AJAX Libraries API」を使うかします。
今回はダウンロードしなくてもjQueryを利用できるので「Google AJAX Libraries API」を使っています。
使い方は簡単。以下のコードを書き込むだけです。
[javascript]
[/javascript]
[javascript]
$(function(){
//横幅の設定
$(“#imgWrap”).css(“width”,800*$(“#imgWrap li.img”).size()+”px”);
$(“#imgWrap li.img:last”).prependTo(“#imgWrap”);
$(“#imgWrap”).css(“margin-left”,”-800px”);
//戻るの設定
$(“#imgPrev”).click(function(){
$(“#imgWrap”).animate({
marginLeft : parseInt($(“#imgWrap”).css(“margin-left”))+800+”px”
},”slow”,”swing” ,
function(){
$(“#imgWrap”).css(“margin-left”,”-800px”)
$(“#imgWrap li.img:last”).prependTo(“#imgWrap”);
});
});
//次への設定
$(“#imgNext”).click(function(){
$(“#imgWrap”).animate({
marginLeft : parseInt($(“#imgWrap”).css(“margin-left”))-800+”px”
},”slow”,”swing” ,
function(){
$(“#imgWrap”).css(“margin-left”,”-800px”);
$(“#imgWrap li.img:first”).appendTo(“#imgWrap”);
});
});
//マウスオーバー時の戻ると次への設定
$(“#imgPrev,#imgNext”).fadeTo(0,0.2);
$(“#imgPrev,#imgNext”).hover(function(){
$(this).fadeTo(100,1);
},
function(){
$(this).fadeTo(200,0.2);
}
);
//自動スライド
var timerID = setInterval(function(){
$(“#imgNext”).click();
},8000);
$(“#imgPrev a,#imgNext a”).click(function(){
clearInterval(timerID);
});
});
[/javascript]
今回はシンプルなものだったので、次は凝ったものを作ってみようかなとか思っています。
社員さんのコメントがオモシロイ「大洋印刷株式会社」の紹介。
「大洋印刷株式会社」はクリエイティブな印刷技術で高い評価を得ている印刷会社です。
「営業部」、「デザイン制作室」…「TAIYO WAVE」など、各部門のコンテンツで社員さんが紹介されていて、クリックするとその人のコメントが表示されるのですが、まじめなコメントにまじって「犬」やら「シトロエン」などユーモアのあるコメントがまじっていてついつい見てしまいます。
トップページにわらわらといる社員さんも良い感じです。
