一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集

Post on:2009年7月8日

1. コンテンツイメージをインラインに配置

一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。

テキストやリストが画像に重ならないように、marginを設定します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<h3>Contest Details</h3>
<div class="imagery"">
	<img src="imagery.png" width="205" height="400" alt="Imagery" />
</div>

<p>...the introductory paragraph...</p>
<ol>
	<li>...various bullet points went here...</li>
</ol>
</textarea>

<h3>Contest Details</h3>

</div>

<p>...the introductory paragraph...</p>

<ol>

<li>...various bullet points went here...</li>

</ol>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
.imagery{
/* The image is floated to the right */
	width: 205px;
	float: right;

/* The image is positioned precisely,
		by pushing it 20px from the right border */
	margin-right: -20px;

/* The image is pushed away from the text
		(to the right) with a left margin of 47px */
	margin-left: 47px;
}
</textarea>

.imagery{

/* The image is floated to the right */

width: 205px;

float: right;

/* The image is positioned precisely,

by pushing it 20px from the right border */

margin-right: -20px;

/* The image is pushed away from the text

(to the right) with a left margin of 47px */

margin-left: 47px;

}

</textarea>

2. タイポグラフィのトリック

CommandShift3

投票のパーセントにタイポグラフィのトリックを使用しています。

パーセントの数字を本来の表示領域より小さい幅にし、「overflow:hidden;」を使用します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div class="bar">
	<div class="screen-left loser choice">
	<div class="pct">
		<div>46<span>%</span></div>
		</div>
		<div>
			--the image goes here--
		</div>
	</div>
	<div class="screen-right winner">
	<div>
		--the image goes here--
	</div>
		<div class="pct">
			<div>54<span>%</span></div>
		</div>
	</div>

	<div class="legend">
     	--You voted for text goes here--
     </div>
</div>
</textarea>

</div>

<div>

--the image goes here--

</div>

<div>

--the image goes here--

</div>

</div>

--You voted for text goes here--

</div>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
.result .pct{
	float:left;
	height:80px;
	margin:0;
	overflow:hidden;
	padding:0;
	white-space:nowrap;
	width:95px;
}
.result .screen-left .pct div{
	margin:28px 0 0 10px;
	float: left;
}
.result .loser .pct div{
	color:#84C3FF;
}
.result .pct div span{
	display:inline;
	font-size:55px;
}
.result .screen-right .pct div{
	margin:28px 0 0 -8px;
	float: left;
}
.result-first .pct div{
	color:#FFFFFF;
}
</textarea>

.result .pct{

float:left;

height:80px;

margin:0;

overflow:hidden;

padding:0;

white-space:nowrap;

width:95px;

}

.result .screen-left .pct div{

margin:28px 0 0 10px;

float: left;

}

.result .loser .pct div{

color:#84C3FF;

}

.result .pct div span{

display:inline;

font-size:55px;

}

.result .screen-right .pct div{

margin:28px 0 0 -8px;

float: left;

}

.result-first .pct div{

color:#FFFFFF;

}

</textarea>

3. パネルがオーバーレイで表示

MyFamily

ツールチップに似た感じに、パネルがオーバーレイで表示します。左半分は透過してます。

この仕組みはjQueryなどのフレームワークを使用せずに、ごく簡単な2つの関数で実装できます。
透過箇所には、透過PNGを使用します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div id="hover" onmouseover="showLayer('image')" onmouseout="hideLayer('image')"> </div>

<div id="image" style="visibility: hidden;">
	<img src="img/event_hover.png" alt="image" height="" width="">
</div>
</textarea>

</div>

</textarea>

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
function showLayer(layerName, shadowLayerName){
    if (document.getElementById) // Netscape 6 and IE 5+{
        var targetElement = document.getElementById(layerName);
        targetElement.style.visibility = 'visible';
    }
}

function hideLayer(layerName){
   if (document.getElementById){
       var targetElement = document.getElementById(layerName);
       targetElement.style.visibility = 'hidden';
   }
}
</textarea>

function showLayer(layerName, shadowLayerName){

if (document.getElementById) // Netscape 6 and IE 5+{

var targetElement = document.getElementById(layerName);

targetElement.style.visibility = 'visible';

}

function hideLayer(layerName){

if (document.getElementById){

var targetElement = document.getElementById(layerName);

targetElement.style.visibility = 'hidden';

}

</textarea>

4. 特定箇所をハイライト表示

Basecamp

並列に配置した要素の一つをハイライト表示します。テキスト箇所をホバーするとそれぞれツールチップが表示されます。

このエフェクトは二つに切り分けられており、ハイライト表示はCSS、ツールチップにはPrototype.jsを使用します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div class="tall">
	<h1><a href="https://signup.projectpath.com/signup/Plus">Plus</a></h1>
	<h2>$49/month</h2>

	<h3>Most popular plan</h3>
	<ul class="highlight" style="margin-top: 12px;">
		<li>
			<a href="#" onclick="return false" class="hover_target" hover_container="users_bubble"><strong>35</strong> projects</a>
			<span class="hover_container" id="users_bubble">
			<div class="bubble hover_target"><div class="wrapper"><div class="content"><div class="inner">
			<div class="arrow"></div>

			<h2>What are active projects?</h2>
			<p>..Content for the tool tip...</p>
			</div></div></div></div>
			</span>

		</li>
...code repeats for all product bullet points...
	</ul>

	<a href="https://signup.projectpath.com/signup/Plus" onClick="return ConversionCount()"><img src="/images/btn_signupchart_large.png" width="113" height="45" alt="Sign Up" />
</div>
</textarea>

<h2>$49/month</h2>

<h3>Most popular plan</h3>

<li>

<a href="#" onclick="return false" class="hover_target" hover_container="users_bubble"><strong>35</strong> projects</a>

<h2>What are active projects?</h2>

<p>..Content for the tool tip...</p>

</div></div></div></div>

</span>

</li>

...code repeats for all product bullet points...

</ul>

</div>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
body.signup4 div.tall{
	background-color:#FFFFFF;
	border:3px solid #3671A1;
	float:left;
	font-family:helvetica,arial,sans-serif;
	height:310px;
	padding:8px 10px 10px;
	text-align:center;
	width:220px;
}
body.signup4 div.tall h1, body.signup4 div.tall h1 a{
	color:#000000;
	font-size:42px;
	line-height:1em;
	margin:0;
	padding:0;
	text-decoration:none;
}
body.signup4 div.tall h2{
	color:#000000;
	font-size:24px;
	font-weight:normal;
	margin:0 0 2px;
	padding:0;
}
body.signup4 div.tall h3{
	border-bottom:1px solid #CCCCCC;
	color:#4582B5;
	font-size:16px;
	font-weight:bold;
	margin:0;
	padding:0 0 4px
	text-transform:uppercase;
}
body.signup4 a.hover_target{
	border-bottom:1px dotted #888888;
	color:#64503F;
	margin-left:6px;
	text-decoration:none;
}
body.signup4 div.tall li strong, body.signup4 div.short li strong{
	color:#C33700;
}
</textarea>

body.signup4 div.tall{

background-color:#FFFFFF;

border:3px solid #3671A1;

float:left;

font-family:helvetica,arial,sans-serif;

height:310px;

padding:8px 10px 10px;

text-align:center;

width:220px;

}

body.signup4 div.tall h1, body.signup4 div.tall h1 a{

color:#000000;

font-size:42px;

line-height:1em;

margin:0;

padding:0;

text-decoration:none;

}

body.signup4 div.tall h2{

color:#000000;

font-size:24px;

font-weight:normal;

margin:0 0 2px;

padding:0;

}

body.signup4 div.tall h3{

border-bottom:1px solid #CCCCCC;

color:#4582B5;

font-size:16px;

font-weight:bold;

margin:0;

padding:0 0 4px

text-transform:uppercase;

}

body.signup4 a.hover_target{

border-bottom:1px dotted #888888;

color:#64503F;

margin-left:6px;

text-decoration:none;

}

body.signup4 div.tall li strong, body.signup4 div.short li strong{

color:#C33700;

}

</textarea>

5. 追従するナビゲーション

Clear Focus Designs

ブラウザをスクロールすると、右側のナビゲーションがスライドしながら追従します。

追従には、jQueryのプラグイン「scrollFollow」を使用します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<ul id="sites">
	<li><a href="#copperStone">CopperStone Partners<br />
		<span class="projectDesc">Development</span></a>
</li>
	<li><a href="#vmg">Visionary Marketing Group<br />
		<span class="projectDesc">Development</span></a>
</li>
...code repeats for all menu items...
</ui>
</textarea>

<li><a href="#copperStone">CopperStone Partners<br />

<span class="projectDesc">Development</span></a>

</li>

<li><a href="#vmg">Visionary Marketing Group<br />

<span class="projectDesc">Development</span></a>

</li>

...code repeats for all menu items...

</ui>

</textarea>

JavaScript

<textarea name="code" class="js" cols="60" rows="5">
$(document).ready(function({
	$('#ourWork').scrollFollow({
			speed:1000,
			easing:'linear'
		}
	);
}
);
</textarea>

$(document).ready(function({

$('#ourWork').scrollFollow({

speed:1000,

easing:'linear'

}

);

}

);

</textarea>

6. テキストに対応したサムネイル

UX Booth

複数の著者のそれぞれのポストに対応したサムネイル画像を表示します。

各著者にclass名を設け、テキストに対して相対的にサムネイル画像を配置します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div class="matt review-quote">
<p>...The user's comment went here...</p>
<p><img class="avatar" src="/images/matt.gif" alt="Matthew Kammerer"></p>
</div>
</textarea>

<p>...The user's comment went here...</p>

</div>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
div#ux-booth div#content div.matt.review-quote{
	border-color:#FF9F26;
}
div#ux-booth div#content div.review-quote{
	border-left:6px solid #D8C9A1;
	margin:0 -21px 0 -24px;
	padding:0.5em 21px 1.5em 20px;
	position:relative;
}
div#ux-booth div#content div.matt.review-quote img.avatar{
	border-color:#CC7200;
}
div#ux-booth div#content div.andrew.review-quote img.avatar{
	-moz-border-radius-bottomleft:9px;
	-moz-border-radius-topleft:9px;
	background:#888888 none repeat scroll 0 0;
	border:4px solid #4B6500;
	left:-54px;
	position:absolute;
	top:0;
}
</textarea>

div#ux-booth div#content div.matt.review-quote{

border-color:#FF9F26;

}

div#ux-booth div#content div.review-quote{

border-left:6px solid #D8C9A1;

margin:0 -21px 0 -24px;

padding:0.5em 21px 1.5em 20px;

position:relative;

}

div#ux-booth div#content div.matt.review-quote img.avatar{

border-color:#CC7200;

}

div#ux-booth div#content div.andrew.review-quote img.avatar{

-moz-border-radius-bottomleft:9px;

-moz-border-radius-topleft:9px;

background:#888888 none repeat scroll 0 0;

border:4px solid #4B6500;

left:-54px;

position:absolute;

top:0;

}

</textarea>

7. アーカイブページのレイアウト

Warpspire

アーカイブページは多くの場合、リスト形式の長いレイアウトですが、ここではカラムを使ったレイアウトを採用しています。

各エントリーはリスト要素で実装されており、タイトルはh3、説明はpで実装されています。各リストの奇数番には「odd」のclassを割り当て、フロートさせます。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div class="section-heading-small">
    <h2>February 09</h2>
</div>
<ul class="archives">
    <li class="odd">
      <h3>...title of archived article...</h3>
      <p>...summary and read more link for article...</p>
    </li>
    <li>
      <h3>...title of archived article...</h3>
      <p>...summary and read more link for article...</p>
    </li>
</ul>
</textarea>

<h2>February 09</h2>

</div>

<h3>...title of archived article...</h3>

<p>...summary and read more link for article...</p>

</li>

<li>

<h3>...title of archived article...</h3>

<p>...summary and read more link for article...</p>

</li>

</ul>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
ul.archives li.odd{
	clear:both;
	float:left;
	padding-right:20px;
}
ul.archives li{
	float:right;
	font-size:11px;
	list-style-type:none;
	margin:0 0 20px;
	padding:0;
	width:270px;
}
</textarea>

ul.archives li.odd{

clear:both;

float:left;

padding-right:20px;

}

ul.archives li{

float:right;

font-size:11px;

list-style-type:none;

margin:0 0 20px;

padding:0;

width:270px;

}

</textarea>

8. ホバーで透過の角丸

Particletree

これもアーカイブのレイアウトで、ホバー時に透過の角丸を表示します。

JavaScriptを使用しないで、実装します。
ホバー時に表示される透過png画像は右端に設定し、木の画像と重ねて立体的な印象を与えます。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<div class="red headline">
	<h3>
	The Importance of Design in Business
    <cite><b>By Chris Campbell</b> · Comments (<strong>15</strong>) · August 14th</cite>
	</h3>
</div>
	...code repeats...
</textarea>

<h3>

The Importance of Design in Business

<cite><b>By Chris Campbell</b> · Comments (<strong>15</strong>) · August 14th</cite>

</h3>

</div>

...code repeats...

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
#features .red a:hover{
	background-position: 498px -30px;
}
#features .red a:hover{
	background-image:url(/images/fadetree.png);
	background-repeat:no-repeat;
}
#features[id] h3 a{
	height:auto;
	min-height:66px;
}
#features h3 a{
	-moz-border-radius-bottomright:30px;
	-moz-border-radius-topleft:30px;
	font-size:210%;
	height:66px;
	padding:11px 15px 3px 105px;
}
.red a:hover, a.red:hover{
	background:#5E2510 none repeat scroll 0 0;
	color:#FFFFFF;
}
.red a, .red cite strong{
	color:#843418;
}
h3 a{
	display:block;
	text-decoration:none;
}
</textarea>

#features .red a:hover{

background-position: 498px -30px;

}

#features .red a:hover{

background-image:url(/images/fadetree.png);

background-repeat:no-repeat;

}

#features[id] h3 a{

height:auto;

min-height:66px;

}

#features h3 a{

-moz-border-radius-bottomright:30px;

-moz-border-radius-topleft:30px;

font-size:210%;

height:66px;

padding:11px 15px 3px 105px;

}

.red a:hover, a.red:hover{

background:#5E2510 none repeat scroll 0 0;

color:#FFFFFF;

}

.red a, .red cite strong{

color:#843418;

}

h3 a{

display:block;

text-decoration:none;

}

</textarea>

9. FlashとCSSのブレンド

Hunter Boot

打ち出しの下に配置された4つのパネルをホバーすると、フラッシュが表示されます。

一見jQueryっぽいですが、CSSベースのソリューションです。フラッシュを配置したdivと4つのパネルのdivを用意し、positionでコントロールします。

HTML

<textarea name="code" class="html" cols="60" rows="5">
	<!-- the flash container -->
	<div id="featurePanelHomeFlashBoxCntr">
	   ...the flash movie is inserted here via SWFObject...
	   ...it's important to note that the .swf's wmode is set to transparent...
	</div>

	<!-- the product category links -- >
	<div class="homeFlashListFun">
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
	<div class="homeFlashListSport">
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
	<div class="homeFlashListWork">
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
	<div class="homeFlashListKids">
	<ul>
		<li><a href="/product/link/goes/here" >Link Text</a></li>
		...repeat li's for each link
	</ul>
	</div>
</textarea>

...the flash movie is inserted here via SWFObject...

...it's important to note that the .swf's wmode is set to transparent...

</div>

<!-- the product category links -- >

<ul>

...repeat li's for each link

</ul>

</div>

<ul>

...repeat li's for each link

</ul>

</div>

<ul>

...repeat li's for each link

</ul>

</div>

<ul>

...repeat li's for each link

</ul>

</div>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
.featurePanelHomeFlashBox { margin: 0px; padding: 0px; float: left; height: 528px; width: 720px; position: relative; }
#featurePanelHomeFlashBoxCntr { width: 720px; height: 528px; position: absolute; top: 0px; left: 0px; background: #ffffff; z-index: 300; }

---This chunk of CSS is repeated for each of the lists, with the difference being the positioning of the ul---
.homeFlashListFun ul { position: absolute; top: 380px; left: 15px; z-index: 599; width: 100px; background: transparent; list-style: none; list-style-image: none; list-style-type: none; margin: 0px; padding: 10px 0px 0px 0px; }
.homeFlashListFun ul li { margin: 0px; padding: 0px 0px 6px 0px; background: transparent; text-decoration: none; line-height: 1em; }
.homeFlashListFun ul li a { text-decoration: none; color: #999; font-size: 0.95em; letter-spacing: -0.00em; background: transparent; }
.homeFlashListFun ul li a:hover { text-decoration: underline; color: #bf0000; }
</textarea>

.featurePanelHomeFlashBox { margin: 0px; padding: 0px; float: left; height: 528px; width: 720px; position: relative; }

#featurePanelHomeFlashBoxCntr { width: 720px; height: 528px; position: absolute; top: 0px; left: 0px; background: #ffffff; z-index: 300; }

---This chunk of CSS is repeated for each of the lists, with the difference being the positioning of the ul---

.homeFlashListFun ul { position: absolute; top: 380px; left: 15px; z-index: 599; width: 100px; background: transparent; list-style: none; list-style-image: none; list-style-type: none; margin: 0px; padding: 10px 0px 0px 0px; }

.homeFlashListFun ul li { margin: 0px; padding: 0px 0px 6px 0px; background: transparent; text-decoration: none; line-height: 1em; }

.homeFlashListFun ul li a { text-decoration: none; color: #999; font-size: 0.95em; letter-spacing: -0.00em; background: transparent; }

.homeFlashListFun ul li a:hover { text-decoration: underline; color: #bf0000; }

</textarea>

10. タグの人気度合いをグラフ化

OMG Durham

タグの人気度合いをグラフ化して表示します。

タグはシンプルなリストで、人気度はインラインの指定で行っています。おそらくサーバーサイドで計算された数値と思われます。
この数値を元に、タグの人気度合いをグラフ化します。

HTML

<textarea name="code" class="html" cols="60" rows="5">
<ol class="transGreen">
  <li style="width: 242px">
  	<a href="" style="display:block;width:100%;color:#fff" class="tag tag_1">work</a>
  </li>
  <li style="width: 216px">
  	<a href="" style="display:block;width:100%;color:#fff" class="tag tag_2">philosophy</a>
  </li>
  <li style="width: 153px">
  	<a href="" style="display:block;width:100%;color:#fff" class="tag tag_3">agency</a>
  </li>
  <li style="width: 104px">
  	<a href="" style="display:block;width:100%;color:#fff" class="tag tag_4">culture</a>
  </li>
  <li style="width: 77px">
  	<a href="" style="display:block;width:100%;color:#fff" class="tag tag_5">maslow</a>
  </li>
</ol>
</textarea>

</li>

<a href="" style="display:block;width:100%;color:#fff" class="tag tag_2">philosophy</a>

</li>

<a href="" style="display:block;width:100%;color:#fff" class="tag tag_3">agency</a>

</li>

<a href="" style="display:block;width:100%;color:#fff" class="tag tag_4">culture</a>

</li>

<a href="" style="display:block;width:100%;color:#fff" class="tag tag_5">maslow</a>

</li>

</ol>

</textarea>

CSS

<textarea name="code" class="css" cols="60" rows="5">
#top5 li a.tag{
  padding: 1px 5px;
  margin-bottom: 2px;
  color: #fff;
  text-transform: uppercase;
  font-weight: normal;
}

#top5 li a.tag:hover{background: #000;}

.tag_1{background: #c12;}
.tag_2{background: #990000;}
.tag_3{background: #ee6666;}
.tag_4{background: #ee2222;}
.tag_5{background: #cc6666;}
</textarea>

#top5 li a.tag{

padding: 1px 5px;

margin-bottom: 2px;

color: #fff;

text-transform: uppercase;

font-weight: normal;

}

#top5 li a.tag:hover{background: #000;}

.tag_1{background: #c12;}

.tag_2{background: #990000;}

.tag_3{background: #ee6666;}

.tag_4{background: #ee2222;}

.tag_5{background: #cc6666;}

</textarea>

一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集

1. コンテンツイメージをインラインに配置

HTML

CSS

2. タイポグラフィのトリック

HTML

CSS

3. パネルがオーバーレイで表示

HTML

JavaScript

4. 特定箇所をハイライト表示

HTML

CSS

5. 追従するナビゲーション

HTML

JavaScript

6. テキストに対応したサムネイル

HTML

CSS

7. アーカイブページのレイアウト

HTML

CSS

8. ホバーで透過の角丸

HTML

CSS

9. FlashとCSSのブレンド

HTML

CSS

10. タグの人気度合いをグラフ化

HTML

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集

1. コンテンツイメージをインラインに配置

HTML

CSS

2. タイポグラフィのトリック

HTML

CSS

3. パネルがオーバーレイで表示

HTML

JavaScript

4. 特定箇所をハイライト表示

HTML

CSS

5. 追従するナビゲーション

HTML

JavaScript

6. テキストに対応したサムネイル

HTML

CSS

7. アーカイブページのレイアウト

HTML

CSS

8. ホバーで透過の角丸

HTML

CSS

9. FlashとCSSのブレンド

HTML

CSS

10. タグの人気度合いをグラフ化

HTML

CSS

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info