Design Life

Webデザインに役立つ素晴らしいデザインのWebサイト　Part3

2010年04月07日 20:30

今回は、Webデザインに役立つ素晴らしいデザインのWebサイト　Part3ということで

Green TV Japan

を紹介します。

フルフラッシュのWebサイトで、とてもクオリティが高いです。

デザインも灰色をベースにうまいコンセフトですね

コメントをする・見る: Comments(4)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: Webサイト

Webデザインに役立つ素晴らしいデザインのWebサイト　Part2

2010年04月07日 20:00

今回は、Webデザインに役立つ素晴らしいデザインのWebサイト　Part2ということで

ハーゲンダッツのWebサイトを紹介します。

Dolce Wonderland

メニューのFlashがいいですね！

いい効果音を出しています！

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: Webサイト

4/6のニュース!　　【調査】「首相にふさわしいのは？」１位は舛添氏２９％、２位は岡田外相９％

2010年04月06日 23:30

美人すぎる漫画家（笑） / 恥ずかしすぎるコスプレ画像他

女子アナ放送事故　朝の８:０５にホントに乳首が放送されてしまった女子アナ

【話題】「鶏の唐揚げ」…この定番おかずに脚光

美人すぎる漫画家（笑） / 恥ずかしすぎるコスプレ画像他

【修正前】完全にまんこモロ見えで一時的に発禁になってた問題作「若村真美　17の御法度この女子、マジ...

【調査】「首相にふさわしいのは？」１位は舛添氏２９％、２位は岡田外相９％。以下、前原国交相、菅財...

【無修正】美女と野獣！ますます腹が出てきたオヤジと美少女の性記録

「写真撮ってる場合じゃなかろうが！」３７歳男、火災現場で携帯電話っぽい端末で写真撮影してる警官殴る...

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: NETニュース

Flashのナビゲーション！　Part2

2010年04月06日 23:30

今回は、Flashのナビゲーション第二弾です。

ナビゲーションバーです。

[ 続きを読む ]

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: Flash

Flashのナビゲーション！　Part１

2010年04月06日 23:00

DEMOページ

前回の記事でFlashについて書きましたが、ちょっと評判がよかったので

Flashの紹介もしていくことにします。

今回は、Flashで実装できるナビゲーションの紹介です。

いいデザインと動きです！

[ 続きを読む ]

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: Flash

Webデザインに役立つ素晴らしいデザインのWebサイト　Part1

2010年04月06日 21:30

今回からWebデザインに役立つWebサイトを紹介していきます！

第一回のWebサイトは、 Gen Ittetsu Official Websiteです！

Flashで構築されたこのサイトは、モノクロさをイメージさせながらとてもシンプルな感じになっています！

コメントをする・見る: Comments(7)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: Webサイト

CSSだけで作成したかっこいいメニューバー

2010年04月06日 16:00

今回は、いいデザインのメニューバーを紹介します。

CSSPlayから紹介するこのメニューバーは、CSSだけで実装しましたが、

デザインがいいですねｗ

[ 続きを読む ]

コメントをする・見る: Comments(1)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: CSS・HTML

4/6のニュース！　「浅田真央とキム・ヨナは友達」　日テレの捏造報道に非難が集中　問題の動画有

2010年04月06日 14:30

【エロ動画】息子嫁が脚フェチな寝たきり義父を足コキで昇天させる！

【爆笑】こんなやつなかなかいねぇ！！ダブルで痛い映像ｗｗwww

人妻不倫発覚か！妻夫木聡が不倫愛をスクープされ・・・

【エロ画像】眠ってる女の子にいたずらしてる二次エロ画像パート３

【ヌード】嘉門洋子、ヌード画像集

美人すぎる漫画家（笑） / 恥ずかしすぎるコスプレ画像他

しょこたんぼっち特集　他

DVD丸ごと１本　家出娘をコスプレ店長がバイトにして悪戯ハメ撮り　第１４弾

【3DTVに制約？】『3Dゲームには制約が生まれてしまう』指摘記事が掲載中。

いいとものテレフォンショッキングにガチャピン登場！

iPad ビミョーなおもしろ動画 ( 'O')

Half byte loaderを使って自作ゲームをしよう！

【無修正】素人援●　胸だけ異常に発育した1●歳少女　手錠されて生SEX ※個人

「浅田真央とキム・ヨナは友達」　日テレの捏造報道に非難が集中　問題の動画有

２ちゃんねるに慣れるまで

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: NETニュース

4/6のニュース！　　EXILEメンバーがクスリをクラブで！？薬中っぽい女性との・・・ほか

2010年04月06日 00:05

【8冊】彼氏持ち会長が校長に屈辱アナル舐め【エロ画像】東方

NONSTYLEのものまね　HOTLIMIT　T.M.Revolution　浅倉大介

「浅田真央とキム・ヨナは友達」　日テレの捏造報道に非難が集中　問題の動画有

自由空間の電子に、新しい性質「軌道角運動量」を発見？

人妻不倫発覚か！妻夫木聡が不倫愛をスクープされ・・・

【爆笑】こんなやつなかなかいねぇ！！ダブルで痛い映像ｗｗwww

EXILEメンバーがクスリをクラブで！？薬中っぽい女性との・・・

流出　個人撮影　同会社の不倫彼女とのホテルハメ撮り映像が流出

【3DTVに制約？】『3Dゲームには制約が生まれてしまう』指摘記事が掲載中。

大阪府「東京都がロリコンを規制するなら、俺たちは腐女子を規制するぜ！」　BL規制を検討

手榴弾を投げ損なうハプニング

アークザラッド3－特殊能力集

素人　胸だけ異常に発育した美少女　手錠されて生SEX ※個人

【ヌード】嘉門洋子、ヌード画像集

【エロ画像】眠ってる女の子にいたずらしてる二次エロ画像パート３

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: NETニュース

本物のiPodのような画像を作成することができるPhotoshopのチュートリアル

2010年04月06日 00:00

今回は、↑の画像のように本物のiPodの写真のような画像を作成することができる

チュートリアルをpsdtuts+から紹介します。

[ 続きを読む ]

コメントをする・見る: Comments(6)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: PhotoShop

かっこいい金網風のテキストをPhotoshopで作成するチュートリアル

2010年04月05日 23:30

かっこいいですね～

今回は、金網風のテキストをPhotoshopで作成するチュートリアルをpsdtuts+から紹介します。

[ 続きを読む ]

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: PhotoShop

Photoshopのロゴと同じのをPhotoshopで作成するチュートリアル【動画】

2010年04月05日 23:00

PhotoshopでPhotoshopのロゴを作成するチュートリアルが動画であったので紹介します。

[ 続きを読む ]

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: PhotoShop

フェードしながら切り替わるシンプルなタブメニュー【jQuery】

2010年04月05日 22:30

DEMOページ

今回は、シンプルだけど、切り替わるときにフェードする便利なタブメニューを紹介します。

jQueryのプラグインの一種で、簡単な動作トリガーを使用しているのでSEO的にもいいです。

[ 続きを読む ]

①<head>設定

<head>は以下のようになっています。

一応jQueryの読み込みを記述していますが、既に読み込んでいる人は、

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">

の部分は必要ありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});

②HTMLマークアップ

htmlは以下のようになっています。

表示させたい場所に記述してください。

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>

③CSS設定

CSSは以下のようになっています。

お好みにカスタマイズシテください。

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	background: #e0e0e0;
	overflow: hidden;
	position: relative;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}	
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	clear: both;
	float: left; 
	width: 100%;
	background: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}
.tab_content h2 {
	font-weight: normal;
	padding-bottom: 10px;
	border-bottom: 1px dashed #ddd;
	font-size: 1.8em;
}
.tab_content h3 a{
	color: #254588;
}
.tab_content img {
	float: left;
	margin: 0 20px 20px 0;
	border: 1px solid #ddd;
	padding: 5px;
}

コメントをする・見る: Comments(1)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: JavaScript

4/5のニュース！　小倉優子、ギャラ２億で涙ながらにヘアヌード承諾！　他

2010年04月05日 22:00

小倉優子、ギャラ２億で涙ながらにヘアヌード承諾！　他

各都道府県のオタク系ショップの数を調べてみた

いいとものテレフォンショッキングにガチャピン登場！

これはレア　ロシア少女の処女喪失ポルノ　真っ白少女のファーストファック動画

正しいブラジャーの選び方　Ｃ　Ｄカップ編

PSP ハック情報まとめ

【フィギュア】日テレが訂正とお詫び　浅田真央選手の記者会見を「編集」して放送

【動画】 AKB48 水着コレクション

【盗撮】都内の某マンガ喫茶で激しくセックスする女子校生を盗撮！

しゃべくり007　春の2時間半SP

PSP 「iso_tool UMD_ID.csv 更新」

AKB48ブスばっかで吹いたｗｗｗｗｗｗｗｗｗｗｗｗｗ

元ウエスト87cmのいとうあさこが見事なくびれ披露！【画像】

【ラグビー/訃報】元日本代表・渡辺泰憲さん(35)が鎌倉駅でホームから線路に転落、電車にはねられ死亡

【無修正】素人援●　胸だけ異常に発育した1●歳少女　手錠されて生SEX ※個人

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: NETニュース

Photoshopでシールがめくれたような画像を作成するチュートリアル

2010年04月05日 21:30

今回は、↑のようにPhotoshopでシールがめくれたような画像を作成するチュートリアルを

Photoshopstarから紹介します。

とてもいい感じですねｗ

[ 続きを読む ]

コメントをする・見る: Comments(4)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: PhotoShop

まるで映画館！？　コンテンツ以外を暗くしてムードを出すスクリプト

2010年04月05日 16:30

DEMOページ

今回は、映画館のように、クリックするだけで、指定のコンテンツ以外のところを暗くしてメードを出すことのできるスクリプトを紹介します。

[ 続きを読む ]

①turn_off_the_lights.zipのダウンロード

turn off the lights

↑のサイトからturn_off_the_lights.zipをダウンロードし、必要なファイル等はアップしておきます。

②<head>~</head>設定

以下のようになっています。

jquery-1.3.2.min.jsは普通のjqueryが読み込んであれば、読み込む必要はないです。

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#shadow").css("height", $(document).height()).hide();
            $(".lightSwitcher").click(function(){
                $("#shadow").toggle();
                if ($("#shadow").is(":hidden"))
                    $(this).html("Turn off the lights").removeClass("turnedOff");
                 else
                    $(this).html("Turn on the lights").addClass("turnedOff");
            });
            
        });
    </script>

③HTMLマークアップ

HTMLは以下のようになっています。

DEMOのソースを参考にしながら調節してください。

<div id="container"> <div id="header"> <h1>Janko At Warp Speed</h1> <h2>Turn off the lights - demo</h2> <div id="command"> <a class="lightSwitcher" href="#">Turn off the lights</a> </div> </div> <div id="movie"> <object width="560" height="340"> <param name="movie" value="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <embed src="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"> </embed> </object> </div> <div id="description"> <p>Some description ges here</p> </div> </div>
<div id="shadow"></div>

④CSS設定

CSSは以下のようになっています。

お好みに調節してみてください。

#container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;}
#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px; position:relative; z-index:102;}
#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}
#command { position:relative; height:25px; display:block; margin: 25px 0 0 0;}
.lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png); 
background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px; outline:none; text-decoration:none;}
.lightSwitcher:hover {text-decoration:underline;}
#shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}
.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}
#clickHere {position:absolute; top: -25px; left:130px;}

コメントをする・見る: Comments(0)
トラックバックをする・見る: Trackbacks(0)
カテゴリー: JavaScript