: サイト構築 -制作

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

ちょっとしたアイデアや一工夫で、ページのクオリティをアップするCSSとJavaScriptの10のソリューションをSmashing Magazineから紹介します。

10 Useful CSS/JS-Coding Solutions For Web-Developers

1. コンテンツイメージをインラインに配置
2. タイポグラフィのトリック
3. パネルがオーバーレイで表示
4. 特定箇所をハイライト表示
5. 追従するナビゲーション
6. テキストに対応したサムネイル
7. アーカイブページのレイアウト
8. ホバーで透過の角丸
9. FlashとCSSのブレンド
10. タグの人気度合いをグラフ化

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

Silverback Giveaway

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

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

HTML

<h3>Contest Details</h3>
<div class="imagery"">
	<img src="imagery.png" width="205" height="400" alt="Imagery" />
</div>

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

CSS

.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;
}

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

CommandShift3

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

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

HTML

<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>

CSS

.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;
}

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

MyFamily

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

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

HTML

<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>

JavaScript

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';
   }
}

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

Basecamp

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

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

HTML

<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>

..Content for the tool tip...
</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>

CSS

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;
}

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

Clear Focus Designs

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

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

HTML

<ul id="sites">
<li><a href="#copperStone">CopperStone Partners
		<span class="projectDesc">Development</span></a>
</li>
<li><a href="#vmg">Visionary Marketing Group
		<span class="projectDesc">Development</span></a>
</li>

...code repeats for all menu items...
</ui>

JavaScript

$(document).ready(function({
	$('#ourWork').scrollFollow({
			speed:1000,
			easing:'linear'
		}
	);
}
);

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

UX Booth

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

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

HTML

<div class="matt review-quote">

...The user's comment went here...

<img class="avatar" src="/images/matt.gif" alt="Matthew Kammerer">
</div>

CSS

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;
}

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

Warpspire

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

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

HTML

<div class="section-heading-small">
<h2>February 09</h2>
</div>
<ul class="archives">
<li class="odd">
<h3>...title of archived article...</h3>

...summary and read more link for article...
</li>
<li>
<h3>...title of archived article...</h3>

...summary and read more link for article...
</li>
</ul>

CSS

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;
}

8. ホバーで透過の角丸

Particletree

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

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

HTML

<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...

CSS

#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;
}

9. FlashとCSSのブレンド

Hunter Boot

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

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

HTML

	<!-- 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>

CSS

.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; }

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

OMG Durham

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

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

HTML

<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>

CSS

#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;}

Post on:2009年7月8日

frankly: on 2009年7月8日

1つ目の。
alt属性もついていない100％「装飾目的」の画像を、HTML上に直接書いてしまうのは、むしろクオリティをダウンさせているような気がします。
「視覚的」な要素なのですから、CSSで背景画像とするべきではないでしょうか？

コリスさんはどのように思われますか？

コリス: on 2009年7月8日

> frankly さん

キャラクター画像をどうとらえるかで、異なると思います。
僕であれば、ワイヤーフレームにキャラクターがあるようなレベルだと実体で配置し、単に飾りであれば背景として配置します。

ワイヤーフレームの作成時から考えると、テキストだけでは弱くロゴやキャラクターの画像をマスト要素とすることが多いと思います。そうなると実装時は背景ではなく実体配置を期待するでしょうか。
デザイン的に背景のようにするのは、ポツンと矩形で配置するよりも面白いと思います。
オルトが無いのは、ちょっといただけないですね。

ページの先頭へ