2013-03-25

CSS3擬似クラスの中の擬似クラス

雑記

あまり解説されている記事がなかったのでメモ
CSS3で新たに追加された要素「:first-letter」で雑誌風に先頭文字を装飾（ドロップキャップ）する

p:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

これで装飾することは出来たが記事の中でｐ要素が一つで終わる事がまずないのでこのままだとｐタグごとに先頭の文字が装飾されてしまう。
解決策として擬似クラスの中の擬似クラスを指定してみる

p:first-child:first-letter {
  font-size: 32px;
  font-weight: bold;
  line-height: 24px;
  padding: 10px;
  background-color: greenyellow;
  float: left;
}

一応現状の最新版のchrome,Firefox,safari,IEで問題なく表示される。これで記事本文の最初のｐ要素の最初の文字にだけスタイルを指定できる。「nth-child(n)」でも可能なのでp要素の中にspanを多用せずにスタイルを適応できるので「:nth-child(n):before」とかある程度使い道がありそう。
first-childはCSS2でもあった要素なので古いIEでも問題なく表示されるが、nth-childを使うとIE9以前のバージョンは表示不可なので無難にjQueryで実装するべきかも。

2013-03-23

複数のRSSフィードをまとめて日付順にソートする

雑記

Google Feed APIを利用して先生と受講生のブログの更新情報を日付順にソートして一箇所にまとめて表示させる。
参考サイトはこちら

Google Feed API

以前はAPIキーの取得が必要だったが今は取得しないでも利用できるのでスクリプトをそのまま貼り付けることで利用できる。
今回指定したURLは合計16個で最新記事３件を表示する指定をしているので合計48件の記事が日付順にソートされて表示されている。
DEMO

JavaScript

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script>
google.load("feeds","1");
var FA = new Array //表示させたいRSSフィードのURLを配列に代入
("http://d.hatena.ne.jp/css_design/rss",
"http://d.hatena.ne.jp/web-css-design/rss",
"http://d.hatena.ne.jp/upquark/rss",
"http://d.hatena.ne.jp/Tokiyo/rss",
"http://d.hatena.ne.jp/izsan/rss",
"http://d.hatena.ne.jp/webry/rss",
"http://d.hatena.ne.jp/azuma123hate/rss",
"http://d.hatena.ne.jp/knserk0526/rss",
"http://d.hatena.ne.jp/esk0810/rss",
"http://d.hatena.ne.jp/yazyou777/rss",
"http://d.hatena.ne.jp/hatewemar2012/rss",
"http://d.hatena.ne.jp/ct4515440/rss",
"http://d.hatena.ne.jp/kh723/rss",
"http://d.hatena.ne.jp/chiii3/rss",
"http://d.hatena.ne.jp/hiroko933/rss",
"http://d.hatena.ne.jp/ysk_garden/rss");

function initialize() {
	var feedsArr = new Array();
	var numEntr = 3; //各RSSフィードの取得件数
	var container = document.getElementById("feed");
	var cnt = FA.length;
	for (var k=0; k<FA.length; k++) {
		var feed = new google.feeds.Feed(FA[k]);
		feed.setNumEntries(numEntr);
		feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
		feed.load(function(result) {
			if (!result.error) {
				for (var i = 0; i < result.feed.entries.length; i++) {
					var entry = result.feed.entries[i];
					var attributes = ["title", "link", "publishedDate", "contentSnippet"];
					var ind = feedsArr.length;
					feedsArr[ind] = new Array();
					feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // 日付順にソート
					feedsArr[ind][1] = entry[attributes[1]]; // リンク
					feedsArr[ind][2] = entry[attributes[2]]; // 更新日時
					feedsArr[ind][3] = entry[attributes[3]]; // 記事本文
					feedsArr[ind][4] = entry[attributes[0]]; // 記事タイトル
					feedsArr[ind][5] = result.feed.title; // サイトタイトル
				}
			}
			
			cnt--;
			if (cnt == 0) {
				feedsArr.sort();
				feedsArr.reverse();
				for (var j = 0; j < feedsArr.length;  j++) {
					var aE = document.createElement("A");
					var h3 = document.createElement("H3");
					var p = document.createElement("P");
					var spanD = document.createElement("SPAN");
					aE.href=aE.title=feedsArr[j][1];
					aE.appendChild(document.createTextNode(feedsArr[j][4]));
					h3.appendChild(aE);
					spanD.appendChild(document.createTextNode(feedsArr[j][2]));
					spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
					p.appendChild(document.createTextNode(feedsArr[j][3]));
					p.appendChild(spanD);
					container.appendChild(h3);
					container.appendChild(p);
				}
			}
		});
	}
}
google.setOnLoadCallback(initialize);
</script>

html

<div id="feed"></div>

実際に吐き出されるhtml

<h3>
<a href="記事URL" title="記事タイトル">記事タイトル</a>
</h3>
<p>記事本文
<span>更新日時(サイトタイトル)</span>
</p>
<h3>
:

2013-03-22

parallaxのマウス位置検知

雑記

parallaxpluginのマウス位置検知機能のテスト
DEMO1

DEMO2

DEMO3

DEMO4

DEMO5

DEMO6

※画像はこちらからお借りしました

HTML

<div id="header">
<div id="parallax-images">
<div class="p_origin"><img src="images/cat.jpg" alt="Cat"></div>
<div class="p_film"><img src="images/film.png" alt="ParallaxFilm"></div>
</div>
</div>

CSS

#header {
	z-index: 1 !important;
	overflow: hidden;
	position: absolute;
	padding-top: 68px;
	width: 98%;
	height: 90%;
	background: #999;
	border-radius: 10px;
}
#parallax-images {
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 464px;
	margin: 0px auto;
}
.p_origin {
	width: 600px;
	height: 464px;
	text-align: center;
}
.p_film {
	width: 600px;
	height: 464px;
}

JavaScript

jQuery(document).ready(function(){
	jQuery('#parallax-images').jparallax({mouseport: jQuery('#parallax-images')},
	{xtravel:0, ytravel:0}, // <!-- p_origin -->
	{xtravel:0.3, ytravel:0} // <!-- p_film -->
	);
});

古いバージョンのparallaxでの記述なのでjqueryのバージョンも1.3.2で動作する。新しいバージョンのparallaxは記述方法がかわる

2013-03-18

レスポンシブでビルボードを画面幅いっぱいに表示する

雑記

HTML

<div id="bilboard">
<div class="bb_img"><img src="img/01.jpg"></div>
</div>

980px以上のCSS

#billboard {
overflow: hidden;
width: 100%;
}
.bb_img {
width: 1280px;
margin-left: -640px;
padding-left: 50%;

980px未満のCSS

.bb_img {
width: 130%;
margin-left: -65%;
}

paddingで画像左端を画面中央にそろえたあとにネガティブマージンで中央に配置し、980pxで画像幅を1280pxになるように１30％を指定

2013-03-17

企業サイトリニューアル

雑記

製作の背景

HTML5でマークアップ
アウトライン構造を意識
現在のブラウザ幅に合わせる
見栄え用の画像は使用しない
ロゴの作成しなおし
文字の大きさ、間隔に注意

製作時間：４時間
DEMO

参考サイト

ソース

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow">
<title>sample site</title>
<link rel="stylesheet" href="css/style.css" media="all">
<link rel="stylesheet" href="css/nivo-slider.css" media="all">
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js></script>
<![endif]-->
<!--[if lte IE9]>
<script src="http://ie7-js.googlecode.com/scn/version/2.1(bate4)/IE9.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://st.shinobi.jp/img/services/homepage/commercial.css" /></head>

<body>
<header id="page_h">
<h1><a href="#page_h"><img src="img/bizin.png" alt="ビズインロゴ"><em>Bizin</em></a></h1>
<nav>
<ul>
<li><a href="#page_h">HOME</a></li>
<li><a href="#page_h">お客様別ナビ</a></li>
<li><a href="#page_h">サービス内容</a></li>
<li><a href="#page_h">提案実績</a></li>
<li><a href="#page_h">セミナー案内</a></li>
<li><a href="#page_h">採用情報</a></li>
<li><a href="#page_h">会社概要</a></li>
</ul>
</nav>
</header>

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/01.jpg" data-thumb="img/01.jpg" alt="ビズイン" title="ビズインは企業活性化の総合サポート企業です">
<img src="img/02.jpg" data-thumb="img/02.jpg" alt="オフィス移転" title="オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？">
<img src="img/03.jpg" data-thumb="img/03.jpg" alt="健康診断" title="健康診断の業務運営が煩雑さを増していませんか？">
<img src="img/04.jpg" data-thumb="img/04.jpg" alt="企業イベント" title="組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。">
</div>
</div><!-- ▲billboard -->

<div id="wrapper">

<div id="content">
<article>
<header>
<h1>トピックス</h1>
</header>
<dl>
<dt><time datetime="2013-2-21">2013.2.21</time>記事掲載情報</dt>
<dd>エン･ジャパン「目指せ!カリスマ管理職」に『伝わる化』が掲載されました。</dd>
<dt><time datetime="2013-2-10">2013.2.10</time>セミナーのご案内を開始しました</dt>
<dd>10/9開催：総務道場「総務基礎講座」</dd>
<dt><time datetime="2013-2-3">2013.2.3</time>セミナーのご案内を開始しました</dt>
<dd>10/2開催：無料セミナー「はじめてのオフィスレイアウト変更」</dd>
<dt><time datetime="2013-1-27">2013.1.27</time>セミナーのご案内を開始しました</dt>
<dd>9/25開催：無料セミナー「年間で考える社内コミュニケーション施策」</dd>
<dt><time datetime="2013-1-23">2013.1.23</time>新刊を発売開始しました</dt>
<dd>『伝わる化』〜コミュニケーションを征するものがビジネスを征す〜</dd>
</dl>
<footer>
<p><a href="#page_h">もっと見る</a></p>
</footer>
</article>

<article>
<header>
<h1>ジョブリポート</h1>
</header>

<section>
<header>
<h1>saboに流れる時間</h1>
</header>
<a href="#page_h"><img src="img/img_job001.jpg" alt="sabo"></a>
<p>オフィス移転、オフィスリニューアルを機にワークスペースを見直しませんか？ ビズインが提供する『sabo（サボ）』は、社員がリラックスやコミュニケーションスペースとして自由に使える空間です。</p>
<footer>
<p><time datetime="2012-11-20">2012年11月20日</time>|<a href="#page_h">ファシリティマネジメント</a>|<a href="#page_h">実績一覧検索</a></p>
</footer>
</section>

<section>
<header>
<h1>健康診断はアウトソースする時代です</h1>
</header>
<a href="#page_h"><img src="img/img_job002.jpg" alt="健康診断オペレーション"></a>
<p>健康診断の業務運営が煩雑さを増していませんか？ ビズインは年間15000人の企業健康診断予約をお手伝いし、平均受診率97.8％を実現。健康診断を始める前にぜひ一度ご相談ください。</p>
<footer>
<p><time datetime="2012-11-20">2012年11月20日</time>|<a href="#page_h">健康診断オペレーション</a>|<a href="#page_h">実績一覧検索</a></p>
</footer>
</section>

<section>
<header>
<h1>見直される企業イベント</h1>
</header>
<a href="#page_h"><img src="img/img_job003.jpg" alt="見直される企業イベント"></a>
<p>不況の影響を受け、経費削減によって企業から姿を消したイベント。 しかしここ数年、組織の一体感を高めるコミュニケーション施策として、企業イベントが見直されています。</p>
<footer>
<p><time datetime="2013-3-17">2013年3月17日</time>|<a href="#page_h">コミュニケーションプロデュース</a>|<a href="#page_h">実績一覧検索</a></p>
</footer>
</section>
</article>
</div><!-- ▲content -->

<aside>
<section>
<ul>
<li><a href="#page_h"><img src="img/banner_magazinewide.gif" alt="メールマガジン申込みボタン"></a></li>
<li><a href="#page_h"><img src="img/banner_archive.gif" alt="実績一覧検索ボタン：ビズインの実績を紹介します"></a></li>
<li><a href="#page_h"><img src="img/banner_rondan002.gif" alt="論談002ボタン：「居場所感」と「縁側」で辞めない会社づくりを"></a></li>
<li><a href="#page_h"><img src="img/banner_rondan001.gif" alt="論談001ボタン：社内活性化のためのメンタルヘルス対策"></a></li>
</ul>
</section>

<section>
<header>
<h1>企業におけるメンタルヘルス対策コラム</h1>
</header>
<ul>
<li><a href="#page_h">&raquo;代表取締役 白戸の「熱いぜ!!」ブログ</a></li>
<li><a href="#page_h">&raquo;副社長 小泉の「総務&amp;農業」ブログ</a></li>
</ul>
</section>

<section>
<figure>
<a href="#page_h"><img src="img/2008080801.gif" alt="ビズイン社長の本"></a>
<figcaption>ビズイン社長白戸の本</figcaption>
</figure>
<figure>
<a href="#page_h"><img src="img/2008080802.gif" alt="エマメイ＆ビズインの本"></a>
<figcaption>エマメイ小泉＆ビズイン白戸の本</figcaption>
</figure>
</section>
</aside>

</div><!-- ▲wrapper -->

<div id="back_top">
<p><a href="#page_h">▲ページの先頭へ</a></p>
</div><!-- ▲back_top -->

<footer id="page_f">
<ul>
<li><a href="#page_h">サイトマップ</a></li>
<li><a href="#page_h">プライバシーポリシー</a></li>
<li><a href="#page_h">ニュースリリース</a></li>
</ul>
<small>Copyright &copy; BIZin ALL RIGHTS RESERVED.</small>
</footer>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/smoothScroll.js"></script>
<script>
$(function(){
    $('a[href^=#]').click(function() {
        var speed = 800;
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});
$(window).load(function() {
		$('#slider').nivoSlider();
});
</script>
</body>
</html>

css

@charset "UTF-8";

/* reset */
* {
	margin: 0;
	padding: 0;
}
body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 16px;
	color: #333;
}
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul {
	list-style-type: none;
}
a:link, a:visited {
	text-decoration: underline;
	color: #000080;
}
a:hover, a:active {
	text-decoration: none;
}
img {
	border: none;
	vertical-align: bottom;
}
img:hover {
	opacity: 0.8;
}
em {
	visibility: hidden;
}
/* header */
header#page_h {
	overflow:hidden;
	margin: 0 auto;
	padding: 5px 0 0 0;
	width: 960px;
}
header h1 {
	display: inline;
	font-size: 0.88em;
	font-weight: normal;
}
header h1 img {
	margin: 0 0 0 20px;
	width: 200px;
	height: 80px;
}
nav {
	float: right;
	margin-top: 44px;
}
nav ul {
	margin: 0 0 10px 0;
}
nav li {
	float: left;
}
nav li a:link, nav li a:visited {
	display: block;
	padding: 5px 10px;
	border: 1px solid #DCE0F2;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background: -webkit-linear-gradient(bottom, #DCE0F2, #FFF);
	background: -moz-linear-gradient(bottom, #DCE0F2, #FFF);
	background: -o-linear-gradient(bottom, #DCE0F2, #FFF);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DCE0F2');
	text-align: center;
	text-decoration: none;
	color: #333;
}
nav li a:hover, nav li a:active {
	border: 1px solid #CCC;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	background: -webkit-linear-gradient(bottom, #CCC, #FFF);
	background: -moz-linear-gradient(bottom, #CCC, #FFF);
	background: -o-linear-gradient(bottom, #CCC, #FFF);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#CCC');
}
/* billboard */
.slider-wrapper {
	margin: 0 auto;
	width: 960px;
}
.nivoSlider {
  position:relative;
}
.nivoSlider img {
  position:absolute;
	height: 300px;
  top:0px;
  left:0px;
  display:none;
}
.nivoSlider a {
  border:0;
  display:block;
}
/* wrapper */
#wrapper {
	overflow: hidden;
	margin: 0 auto;
	width: 960px;
}
/* content */
#content {
	float: left;
	width: 700px;
}
article {
	margin: 0 0 40px 0;
	border: 1px solid #DCE0F2;
	border-top: 3px solid #DCE0F2;
	border-radius: 10px 10px 0 0;
}
article header h1 {
	display: block;
	margin: 0 0 24px 0;
	padding: 2px 0 0 8px;
	border-radius: 10px 10px 0 0;
	background: -webkit-linear-gradient(top, #DCE0F2, #FFF);
	background: -moz-linear-gradient(top, #DCE0F2, #FFF);
	background: -o-linear-gradient(top, #DCE0F2, #FFF);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#DCE0F2', endColorstr='#FFFFFF');
	font-size: 1.25em;
	font-weight: bold;
	color: #374BA0;
}
article dl {
	margin: 0 20px;
}
article dt {
	margin: 0 0 3px 0;
	border-top: 1px dotted #374BA0;
	font-size: 0.88em;
}
article dt time {
	margin: 0 7px 0 0;
}
article dd {
	margin: 0 0 14px 14px;
	font-size: 0.88em;
}
article footer {
	margin: 0 20px 0 0;
}
article footer p {
	text-align: right;
	font-size: 0.88em;
}
section {
	margin: 0 20px 20px;
	overflow: hidden;
}
section header h1 {
	margin: 0 0 18px 0;
	padding: 3px 0 2px 5px;
	border-top: 1px dotted #374BA0;
	border-radius: 0px;
	background: #fff;
	font-size: 1.0em;
	color: #666;
}
section img {
	float: left;
	margin: 0 10px;
	padding: 2px;
	background: #DCE0F2;
}
section p {
	letter-spacing: 0.05em;
	word-break: break-all;
}
section footer {
	margin: 18px 0 0 10px;
	font-size: 0.88em;
	text-align: right;
}
section footer time {
	margin: 0 4px 0 0;
}
section footer a {
	margin: 0 4px;
}
/* sidebar */
aside {
	float: right;
	width: 230px;
}
aside section {
	margin: 0 0 20px 0;
	padding: 0;
}
aside img {
	margin: 0 0 10px 0;
	padding: 0;
}
aside section h1 {
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
	font-size: 0.75em;
	font-weight: bold;
}
aside li {
	font-size: 0.75em;
}
aside figure {
	float: left;
	padding: 0 7px;
	width: 100px;
}
/* back_top */
#back_top {
	overflow: hidden;
	margin: 0 auto;
	width: 960px;
}
#back_top p {
	display: block;
	float: right;
	margin: 0 40px 0 0;
	padding: 5px;
	border: 1px solid #DCE0F2;
	border-bottom: none;
	border-radius: 10px 10px 0 0;
	width: 140px;
	background: -webkit-linear-gradient(bottom, #DCE0F2, #FFF);
	background: -moz-linear-gradient(bottom, #DCE0F2, #FFF);
	background: -o-linear-gradient(bottom, #DCE0F2, #FFF);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#DCE0F2');
	text-align: center;
}
/* footer */
footer#page_f {
	overflow: hidden;
	margin: 0 auto;
	padding: 10px;
	width: 940px;
	background: #DCE0F2;
}
footer ul {
	margin: 0 0 0 10px;
	float: left;
}
footer li {
	float: left;
	margin: 0 7px 0 0;
	font-size: 0.88em;
}
footer small {
	float: right;
}

2013-03-16

IETesterのIE7バグ解消法

雑記

IETesterでローカルHTMLファイルを確認した際にIE7だけファイルが開けずに「about:blank」になるバグがある

解消法

新しいタブをIE7で開く
アドレス欄に「c:\」と入力してファイルブラウザモードにする
この状態で確認したいローカルHTMLファイルのパスを指定する
実行すると見れる

おまけ

毎回IE7で確認する時に「c:\」を打ってから貼り付けるのがめんどくさい場合は起動時のホームページ設定を「c:\」にしてしまいましょう。オプションタブを選択すると出てくるオプションから設定が出来ます。デフォルトページのままだとIETester起動時にも時間がかかるので一石二鳥です。

2013-03-15

FacebookLikebox

雑記

はてなダイアリーにFacebookLikeboxを入れる方法
はてなダイアリーではJavaScriptをほとんど使えないのでインラインフレームで表示する。
下記の内容を管理画面のデザインのページのフッター部分にコピペで追加

<div class="hatena-module">
<div class="hatena-moduletitle">Facebook</div>
<div class="hatena-modulebody">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fここに個別のドメイン名&amp;width=ボックスの横幅&amp;height=ボックスの縦幅&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:ボックスの横幅px; height:ボックスの縦幅px;" allowTransparency="true"></iframe>
</div>
</div>

「ここに個別のドメイン名」となっているところをフェイスブックページのhttp://www.facebook.com/以降の中身を記入。「ボックスの横幅」となっている2箇所は自分のはてなダイアリーの横幅にはまるような横幅を指定。「ボックスの縦幅」となっている2箇所はお好みの高さを指定。