作成者別アーカイブ: タカハシ先生

タカハシ先生について

顧問と講師をやってます。本業はweb designerでマークアップ原理主義者の傾向があります。好きな要素は::before、::afterの疑似要素。好きなcssはanimationです。

学習履歴: 独学。元WAVE立川校講師

職業: フリーランス

SNS :

TOPページのデザインを変更しました

コメントをどうぞ

front-page.phpを編集し「パソコン倶楽部りんご」TOPページのaside部分を最新の投稿5件に変更して、カテゴリー、タグ、投稿者を表示するようにし、コメントも最新の5件を表示させました。これに伴い、Front-page用のウィジェットエリアに入れていた、投稿とコメントのウィジェットは削除しました。
また、「おすすめ」というタグを作成しておいたので、りんごユーザーの人は、自分がお勧めしたい投稿に「おすすめ」タグをつけて下さい。数が揃ったら、上記のaside内などに表示してみます。

2013-5-10勉強会

コメントをどうぞ

今日はランサーしょうじさんがお休みです。でもお菓子は確保。
勉強会の概要は

cssアニメーションでパラパラアニメを作る方法
画像スライドアニメーション
Facebookとwordpressを連携させたいのですが…
レスポンシブWebデザインの覚え書き

です。続きを読む →

アイキャッチがある単独ページではヘッダー画像を表示しない

コメントをどうぞ

WordPressで複数ヘッダー画像をcssスライドショーで動かすで設定したヘッダー画像ですが、投稿にアイキャッチを入れることにした為、アイキャッチがある場合は邪魔になってきました。
そこでheader.phpを編集し、アイキャッチがある単独ページの場合はヘッダー画像を表示しないようにしてみました。

<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php
		/*****************************************************************************************
			front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24
		*****************************************************************************************/ ?>
		<?php if( is_front_page() ):	/* front_pageならば */
			$images = get_uploaded_header_images();
			if($images):
			?>
			<div class="top_slides">
				<img src="http://clubringo.com/wp-content/uploads/2013/03/top-img-back.gif" alt="">
				<?php foreach($images as $image):?>
				<img src="<?php echo $image['url']?>" alt="">
				<?php endforeach;?>
			</div>
			<?php endif; /* front_pageここまで */ ?>
		<?php
		/*****************************************************************************************
			単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30
		*****************************************************************************************/ ?>
		<?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?>
		<?php
		/*****************************************************************************************
			ここまで
		*****************************************************************************************/ ?>
		<?php else : /* front_pageでなければ、Twenty Twelveの設定通り（固定かランダム） */ ?>
			<?php
			$header_image = get_header_image();
			if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
			<?php else: ?>
			<!-- no header_image -->
			<?php endif; ?>
		<?php endif; ?>
		<?php
		/*****************************************************************************************
			ここまで by タカハシ 2013-3-24
		*****************************************************************************************/ ?>
	</header><!-- #masthead -->

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

</hgroup>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

</nav>

<?php

/*****************************************************************************************

front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24

*****************************************************************************************/ ?>

<?php if( is_front_page() ): /* front_pageならば */

$images = get_uploaded_header_images();

if($images):

<?php foreach($images as $image):?>

<?php endforeach;?>

</div>

<?php endif; /* front_pageここまで */ ?>

<?php

/*****************************************************************************************

単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30

*****************************************************************************************/ ?>

<?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?>

<?php

/*****************************************************************************************

ここまで

*****************************************************************************************/ ?>

<?php else : /* front_pageでなければ、Twenty Twelveの設定通り（固定かランダム） */ ?>

<?php

$header_image = get_header_image();

if ( ! empty( $header_image ) ) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

<?php else: ?>

<?php endif; ?>

<?php

/*****************************************************************************************

ここまで by タカハシ 2013-3-24

*****************************************************************************************/ ?>

</header>

ページを読み込んだ時に一度だけ動かすCSSのanimation

コメントをどうぞ

まずはDEMOを見て下さい。
DEMO
htmlとcssの中身は以下の通り。

<body>
	<div id="top" class="appear">
		<header>
			<h1>CSS animation <span class="appear d1">only once</span> <span class="appear d2">at</span> <span class="appear d3">page beginning.</span></h1>
		</header>
		<div class="appear d4">
			<p>Animation for attention the content. <span class="appear d6">Elegantly,</span> <span class="appear d8">Modestly,</span> <span class="appear d10">Delay a timing on purpose.</span></p>
			<pre class="appear d12"><!--省略--></pre>
		</div>
	</div>
	<footer><!--省略--></footer>
</body>

<body>

<h1>CSS animation <span class="appear d1">only once</span> <span class="appear d2">at</span> <span class="appear d3">page beginning.</span></h1>

</header>

<p>Animation for attention the content. <span class="appear d6">Elegantly,</span> <span class="appear d8">Modestly,</span> <span class="appear d10">Delay a timing on purpose.</span></p>

</div>

</body>

/* css animation (prefixes are cut) */
.appear {
	transform-origin:center top;
	animation:show 1s both;
}
span.appear {display:inline-block;}
.d1 {animation-delay:1s;}
.d2 {animation-delay:2s;}
.d3 {animation-delay:3s;}
.d4 {animation-delay:4s;}
.d6 {animation-delay:6s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;}
@keyframes show {
	0% {
		transform:translate(0,2em);
		opacity:0;
		text-shadow:0 0 0 #0f0;
	}
	50% {
		text-shadow:0 0 0.5em #0f0;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}

/* css animation (prefixes are cut) */

.appear {

transform-origin:center top;

animation:show 1s both;

}

span.appear {display:inline-block;}

.d1 {animation-delay:1s;}

.d2 {animation-delay:2s;}

.d3 {animation-delay:3s;}

.d4 {animation-delay:4s;}

.d6 {animation-delay:6s;}

.d8 {animation-delay:8s;}

.d10 {animation-delay:10s;}

.d12 {animation-delay:12s;}

@keyframes show {

0% {

transform:translate(0,2em);

opacity:0;

text-shadow:0 0 0 #0f0;

}

50% {

text-shadow:0 0 0.5em #0f0;

}

100% {

transform:translate(0,0);

opacity:1;

text-shadow:none;

}

ページを読み込んだ時に要素をanimationさせる

これは単純に、目的の要素にanimationを指定するだけで良い。
.appear {animation:show 1s both;} の部分がそれ。ショートハンドで書いているのをサブプロパティに書き下すと、以下のようになる。

animation-name（@keyframesの名前）: show
animation-duration（アニメにかける時間）: 1s
animation-fill-mode（アニメの実行前後に、keyframesの0%と100%に指定したスタイルを適用するか。）: both

animation-fill-modeでアニメの開始前と終了後をコントロール

まずは animation-fill-mode がミソ。以下の4つの値を指定できる。defaultはnone。

none: keyframes内の指定は、アニメ中にだけ効果が及ぶ。
forwards: アニメが終了した後も、100%に指定した状態をキープする。
backwards: animation-delayの間（アニメする前）に、0%に指定した状態で待機させる。
both: forwardsとbackwardsの両方の効果

詳しくはanimation-fill-mode – CSS | MDNを参照して下さい。

animation-animation-iteration-countは初期値が1

次のミソがanimation-iteration-count。アニメの繰り返し回数の指定で、無限ループなら infinite で指定できる。初期値が1なので、ショートハンドで数字を書かずに省略すると、1回だけのアニメーションになる。

詳しくはanimation-iteration-count – CSS | MDNを参照の事。

animation-delayは、別のクラスを重ねがけすると便利

パラパラと、時間差で要素を表示しているのは、.d1 とか .d12 などのクラスに指定した animation-delay 。汎用的に使い回すなら、こうしてクラス分けした方がスッキリと指定できるかもしれない。

css animation-delay の使いどころ

2件の返信

cssのanimationでクロスフェイドをさせる際には、各要素で同じ@keyframesを使いつつ、nth-of-type(n)セレクタで、animation-delayをずらしてあげると、効率がいいです。続きを読む →

WordPressで複数ヘッダー画像をcssスライドショーで動かす

3件の返信

2013-3-22勉強会で、収まらなかった内容をパソコン倶楽部りんご：TOPページに実装しました。
WordPressのヘッダー画像に複数の画像をアップしておいて、fornt_pageの時は、header.phpでそれらを取得してcssのanimationで動かします。front_pageでない時は、Twenty Twelveの設定のまま（任意の画像に固定か、ランダムかを選択）です。animationの動作はFirefox16+、Google Chrome21+、Safari6+で確認しました。続きを読む →

2013-3-15勉強会

3件の返信

今回もお菓子が充実してました。
2013-3-15 お菓子勉強会の概要は、

media queryの解説
WordPressのユーザー一覧ページを作る、の補足
実装したい機能を自力で調べて作る方法
TOPページのアイキャッチをスライドにしよう

でした。続きを読む →

Twenty Elevenの子テーマでグローバルメニューの調整

1件のフィードバック

kanedaさんより以下の質問がありました。

Twenty Elevenの子テーマで、グローバルメニューのリンクが、意図しない箇所で改行されてしまうのを直したい！
ウィンドウが広いときには以下の様だったのが、

iPhoneなどの狭いウィンドウで、こうなる（ONLINE SHOPというメニューが改行してしまう）。

#8kaneda

と、いうことで、調べてみました。
結論を言うと、右上にある検索フォームのcssが原因です。子テーマのstyle.cssに以下を追加しましょう。
@media queryにする必要はありません。

#branding .only-search + #access div {
	padding-right:0;
}

#branding .only-search + #access div {

padding-right:0;

}

これで以下のようになります。

さらに、クリックできるエリアを広げる為に、各リンクを横幅いっぱいに広げたければ、以下を追加します。今度は@media queryで狭くなった時だけ、そうなるように条件を指定します。

@media(max-width:600px){
	#access .menu-main_nav-container {
		margin:0 1%;
	}
	#access ul {
		margin:0;
	}
	#access li {
		float:none;
	}
	#branding .with-image #searchform {
		bottom: auto;
	}
}

@media(max-width:600px){

#access .menu-main_nav-container {

margin:0 1%;

}

#access ul {

margin:0;

}

#access li {

float:none;

}

#branding .with-image #searchform {

bottom: auto;

}

こんな感じになるはずです。

キャラメルメープルポップコーンのパッケージをhtml5とcssで再現

コメントをどうぞ

2013-3-8勉強会で行った「マークアップとcssの筋トレ」は、キャラメルメープルポップコーンのパッケージを取り上げました。

マークアップとcssの筋トレとは？

チラシ、パッケージ、書籍などの印刷物や、看板などをhtmlとcssで再構築することで、マークアップとcssのスキルをアップする為の練習です。

手順

まず、題材を用意します。

今回はこれ。

セブンイレブンで買いました

選ぶ題材は、文書量があまり多くないものが良いでしょう。

文字要素を抜き出します。

SEVEN&amp;i PREMIUM
キャラメルメープルポップコーン
キャラメルの甘さとメープルの風味豊かなポップコーンです。
50g
1袋50g当たり272kcal
写真はイメージです
メープル香料使用
VALUE PRICE 100YEN

SEVEN&i PREMIUM

キャラメルメープルポップコーン

キャラメルの甘さとメープルの風味豊かなポップコーンです。

50g

1袋50g当たり272kcal

写真はイメージです

メープル香料使用

VALUE PRICE 100YEN

お好きなエディタでマークアップする

この段階では以下に留意して下さい。

印刷物をWeb上に再現するつもりで、SEOを考慮すること。
マークアップに不要な要素（div,span,br）や、属性(id,class)は使わない。これらはcssで装飾する段階で使う
doctypeを指定する。html5推奨。
title要素も忘れずに

ここで、メンバー同士で、各自のメークアップを発表します。比較・検討すると面白いです。
マークアップには、厳密な意味での正解はありません（明らかな間違いはあるでしょうが）。
例えばこの題材では次の様なパターンがありました。

<section>
<p>SEVEN&i PREMIUM</p>
<p>キャラメルメープル</p>
<h1>ポップコーン</h1>
</section>

<p>SEVEN&i PREMIUM</p>

<p>キャラメルメープル</p>

<h1>ポップコーン</h1>

</section>

<section>
<hgroup>
<h3>SEVEN&i PREMIUM</h3>
<h2>キャラメルメープル</h2>
<h1>ポップコーン</h1>
</hgoup>
</section>

<h3>SEVEN&i PREMIUM</h3>

<h2>キャラメルメープル</h2>

<h1>ポップコーン</h1>

</hgoup>

</section>

<hgroup>
<h3>SEVEN&i PREMIUM</h3>
<h1>キャラメルメープルポップコーン</h1>
</hgoup>

<h3>SEVEN&i PREMIUM</h3>

<h1>キャラメルメープルポップコーン</h1>

</hgoup>

この場合は、パターン3の方が妥当性が高いです。hgroup内の見出し要素は、最も数字の小さいものがアウトラインとして採用され、その他は省略されてしまいます。
「キャラメルメープルポップコーン」は、一つながりの商品名で、要素としても「キャラメルメープル」と「ポップコーン」で分けるべきではありません。「ポップコーン」の方が大きい文字になっているのは、cssで調整しましょう。

cssで装飾する

まずは題材を出来るだけ再現してみます。
その上で、Webならではの工夫を加えると、より良いです。
ここで、必要ならば、divやspanを追加したり、idやclassなどの属性を追加しましょう。

こんな感じにしてみました

screenshot-html5-popcorn-package

<body>
<hgroup>
<h3 class="logo"><span class="si">SEVEN&amp;i</span><span class="pr">PREMIUM</span></h3>
<h1>キャラメルメープル<span>ポップコーン</span></h1>
<h2>キャラメルの甘さとメープルの風味豊かなポップコーンです。</h2>
</hgroup>
<ul>
<li>50g</li>
<li>1袋50g当たり<strong>272kcal</strong></li>
<li>写真はイメージです</li>
<li>メープル香料使用</li>
</ul>
<p>
<span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span>
<span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span>
<span class="vp"><span>V</span><span>A</span><span>L</span><span>U</span><span>E</span><span> </span><span>P</span><span>R</span><span>I</span><span>C</span><span>E</span></span>
<span class="hyaku">100<small>YEN</small></span></p>
</body>

<body>

<h3 class="logo"><span class="si">SEVEN&i</span><span class="pr">PREMIUM</span></h3>

<h1>キャラメルメープル<span>ポップコーン</span></h1>

<h2>キャラメルの甘さとメープルの風味豊かなポップコーンです。</h2>

</hgroup>

<ul>

<li>写真はイメージです</li>

<li>メープル香料使用</li>

</ul>

<p>

</body>

cssはこんな感じ。

html,body,hgroup,h1,h2,h3,p,ul,li{
margin:0;padding:0;
}
body {
text-align: center;
background:url(popcorn.jpg) 0 0 no-repeat;
background-size:cover;
}
hgroup{
width:20em;
margin:5em auto;
padding:1em;
background:rgba(255,255,255,0.8);
font-family:'Hiragino Mincho ProN',serif;
font-size:1.5em;
}
h1{line-height:1.2;font-size:2.6em;letter-spacing:-0.15em;
}
h1 span{display:block;font-size:1.55em;letter-spacing:-0.2em;}
h2{line-height:1.2;font-size:1.4em;}
/*ロゴマーク*/
.logo{
font-size:0.6em;
margin:1em auto;
width:4em;
height:5em;
position:relative;
overflow: hidden;
border-radius:0 0.5em 0 0;
}
.logo span {
position:absolute;
display:block;
text-align:center;
font-size:0.9em;
z-index:8;
background:#fff;
line-height: 1;
}
.logo .si {
color: green;
font-family: Arial;
font-size: 0.88em;
left: 0.1em;
top: 2.4em;
z-index: 9;
}
.logo .pr {
bottom: 0;
color: #32d;
font-family: Georgia;
font-size: 0.7em;
left: 0.1em;
z-index: 8;
}
.logo:before,
.logo:after,
.pr:before,
.pr:after {
content:"";
display:block;
position:absolute;
font-size:1em;
}
.logo:before{
font-size:0.8em;
display:block;
background:orange;
top:0;
left:0.2em;
width:4em;
height:1.2em;
z-index:2;
}
.logo:after {
font-size:0.8em;
display:block;
border:1.1em solid transparent;
border-color:red #fff #fff red;
border-radius: 90% 0 0;
box-shadow:0 0 0 0.3em #fff;
height: 4.2em;
width: 2.8em;
left: 1.2em;
top:-0.3em;
z-index:3;
}
.pr:before{
background:green;
height:4.2em;
right: 0.2em;
top: -4.2em;
width: 1.1em;
z-index: 3;
}
.pr:after {
background:green;
border-radius: 50%;
box-shadow: 0 0 0 0.3em #fff;
height: 1.3em;
right: 0;
top: -6em;
width: 1.3em;
z-index: 6;
}
ul{padding:1em;display:inline-block;font-size: 1.2em;}
li{display:inline-block;line-height:1.2;}
li:first-of-type {font-size:2em;padding:0.2em;}
li:nth-of-type(2) {font-size:0.7em;width:8em;position:relative;}
li:nth-of-type(2):before {
border-left: 2px solid #000;
content: "";
font-size: 2.3em;
width: 1em;
height: 1em;
left: -0.3em;
top: 0.2em;
position: absolute;
}
li:nth-of-type(2) strong {display: block;font-size:1.5em;}
p{display:inline-block;
width:4em;
height:4em;padding:1em;text-align:center;background:#fff;border-radius:50%;border:2px solid #000;position:relative;}
.hyaku {display:block;font-size:2em;line-height:1;font-weight: bold;position:relative;top:0.3em;left:-0.1em;}
.hyaku small {display:block;font-size:0.5em;}
.vp {
display: block;
font-size: 0.6em;
height: 50%;
left: 4.5em;
position: absolute;
top: 0;
width: 1em;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
transform-origin:center bottom;
}
.vp:nth-of-type(2){
-webkit-transform:rotateZ(120deg);
-moz-transform:rotateZ(120deg);
transform:rotateZ(120deg);
}
.vp:nth-of-type(3){
-webkit-transform:rotateZ(240deg);
-moz-transform:rotateZ(240deg);
transform:rotateZ(240deg);
}
.vp span{
position: absolute;
display:block;
width: 1em;
height: 100%;
left: 0;
top: 0;
-webkit-transform-origin:center bottom;
-moz-transform-origin:center bottom;
transform-origin:center bottom;
}
.vp span:nth-of-type(1){-webkit-transform:rotateZ(-50deg);-moz-transform:rotateZ(-50deg);transform:rotateZ(-50deg);}
.vp span:nth-of-type(2){-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}
.vp span:nth-of-type(3){-webkit-transform:rotateZ(-30deg);-moz-transform:rotateZ(-30deg);transform:rotateZ(-30deg);}
.vp span:nth-of-type(4){-webkit-transform:rotateZ(-20deg);-moz-transform:rotateZ(-20deg);transform:rotateZ(-20deg);}
.vp span:nth-of-type(5){-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}
.vp span:nth-of-type(6){-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);transform:rotateZ(0deg);}
.vp span:nth-of-type(7){-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);transform:rotateZ(10deg);}
.vp span:nth-of-type(8){-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);transform:rotateZ(20deg);}
.vp span:nth-of-type(9){-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);transform:rotateZ(30deg);}
.vp span:nth-of-type(10){-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);transform:rotateZ(40deg);}
.vp span:nth-of-type(11){-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);transform:rotateZ(50deg);}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

html,body,hgroup,h1,h2,h3,p,ul,li{

margin:0;padding:0;

}

body {

text-align: center;

background:url(popcorn.jpg) 0 0 no-repeat;

background-size:cover;

}

hgroup{

width:20em;

margin:5em auto;

padding:1em;

background:rgba(255,255,255,0.8);

font-family:'Hiragino Mincho ProN',serif;

font-size:1.5em;

}

h1{line-height:1.2;font-size:2.6em;letter-spacing:-0.15em;

}

h1 span{display:block;font-size:1.55em;letter-spacing:-0.2em;}

h2{line-height:1.2;font-size:1.4em;}

/*ロゴマーク*/

.logo{

font-size:0.6em;

margin:1em auto;

width:4em;

height:5em;

position:relative;

overflow: hidden;

border-radius:0 0.5em 0 0;

}

.logo span {

position:absolute;

display:block;

text-align:center;

font-size:0.9em;

z-index:8;

background:#fff;

line-height: 1;

}

.logo .si {

color: green;

font-family: Arial;

font-size: 0.88em;

left: 0.1em;

top: 2.4em;

z-index: 9;

}

.logo .pr {

bottom: 0;

color: #32d;

font-family: Georgia;

font-size: 0.7em;

left: 0.1em;

z-index: 8;

}

.logo:before,

.logo:after,

.pr:before,

.pr:after {

content:"";

display:block;

position:absolute;

font-size:1em;

}

.logo:before{

font-size:0.8em;

display:block;

background:orange;

top:0;

left:0.2em;

width:4em;

height:1.2em;

z-index:2;

}

.logo:after {

font-size:0.8em;

display:block;

border:1.1em solid transparent;

border-color:red #fff #fff red;

border-radius: 90% 0 0;

box-shadow:0 0 0 0.3em #fff;

height: 4.2em;

width: 2.8em;

left: 1.2em;

top:-0.3em;

z-index:3;

}

.pr:before{

background:green;

height:4.2em;

right: 0.2em;

top: -4.2em;

width: 1.1em;

z-index: 3;

}

.pr:after {

background:green;

border-radius: 50%;

box-shadow: 0 0 0 0.3em #fff;

height: 1.3em;

right: 0;

top: -6em;

width: 1.3em;

z-index: 6;

}

ul{padding:1em;display:inline-block;font-size: 1.2em;}

li{display:inline-block;line-height:1.2;}

li:first-of-type {font-size:2em;padding:0.2em;}

li:nth-of-type(2) {font-size:0.7em;width:8em;position:relative;}

li:nth-of-type(2):before {

border-left: 2px solid #000;

content: "";

font-size: 2.3em;

width: 1em;

height: 1em;

left: -0.3em;

top: 0.2em;

position: absolute;

}

li:nth-of-type(2) strong {display: block;font-size:1.5em;}

p{display:inline-block;

width:4em;

height:4em;padding:1em;text-align:center;background:#fff;border-radius:50%;border:2px solid #000;position:relative;}

.hyaku {display:block;font-size:2em;line-height:1;font-weight: bold;position:relative;top:0.3em;left:-0.1em;}

.hyaku small {display:block;font-size:0.5em;}

.vp {

display: block;

font-size: 0.6em;

height: 50%;

left: 4.5em;

position: absolute;

top: 0;

width: 1em;

-webkit-transform-origin:center bottom;

-moz-transform-origin:center bottom;

transform-origin:center bottom;

}

.vp:nth-of-type(2){

-webkit-transform:rotateZ(120deg);

-moz-transform:rotateZ(120deg);

transform:rotateZ(120deg);

}

.vp:nth-of-type(3){

-webkit-transform:rotateZ(240deg);

-moz-transform:rotateZ(240deg);

transform:rotateZ(240deg);

}

.vp span{

position: absolute;

display:block;

width: 1em;

height: 100%;

left: 0;

top: 0;

-webkit-transform-origin:center bottom;

-moz-transform-origin:center bottom;

transform-origin:center bottom;

}

.vp span:nth-of-type(1){-webkit-transform:rotateZ(-50deg);-moz-transform:rotateZ(-50deg);transform:rotateZ(-50deg);}

.vp span:nth-of-type(2){-webkit-transform:rotateZ(-40deg);-moz-transform:rotateZ(-40deg);transform:rotateZ(-40deg);}

.vp span:nth-of-type(3){-webkit-transform:rotateZ(-30deg);-moz-transform:rotateZ(-30deg);transform:rotateZ(-30deg);}

.vp span:nth-of-type(4){-webkit-transform:rotateZ(-20deg);-moz-transform:rotateZ(-20deg);transform:rotateZ(-20deg);}

.vp span:nth-of-type(5){-webkit-transform:rotateZ(-10deg);-moz-transform:rotateZ(-10deg);transform:rotateZ(-10deg);}

.vp span:nth-of-type(6){-webkit-transform:rotateZ(0deg);-moz-transform:rotateZ(0deg);transform:rotateZ(0deg);}

.vp span:nth-of-type(7){-webkit-transform:rotateZ(10deg);-moz-transform:rotateZ(10deg);transform:rotateZ(10deg);}

.vp span:nth-of-type(8){-webkit-transform:rotateZ(20deg);-moz-transform:rotateZ(20deg);transform:rotateZ(20deg);}

.vp span:nth-of-type(9){-webkit-transform:rotateZ(30deg);-moz-transform:rotateZ(30deg);transform:rotateZ(30deg);}

.vp span:nth-of-type(10){-webkit-transform:rotateZ(40deg);-moz-transform:rotateZ(40deg);transform:rotateZ(40deg);}

.vp span:nth-of-type(11){-webkit-transform:rotateZ(50deg);-moz-transform:rotateZ(50deg);transform:rotateZ(50deg);}

実装は以下のリンクから開けます。
html5-popcorn-package
SEVEN&iのロゴマークや、VALUE PRICE 100 YENのマークは、本来なら画像にすべき所ですが、練習でcssだけで描いています。

WordPressのユーザー一覧ページを作る

7件の返信

2013-3-8の勉強会で、ランサーしょうじさんへお伝えしようとした内容を、改めて整理して実装してみました。
まず、ユーザー一覧ページを作る条件は以下の通りでした。

登録されたユーザーのアバターやプロフィール情報を自動取得して表示したい
テーマはTwenty Twelveのクローン。テンプレートファイルの編集はアリとする。
ページ自体は固定ページで作成
他の固定ページには影響を与えないこと

続きを読む →

css3のanimationで作る永久ループのスライドショー

6件の返信

「Pure CSS3 Cycle Slider」をお手本にして、css3のanimationで永久ループするスライドショーを作ります。続きを読む →

kozackmanの名刺デザイン

1件のフィードバック

名刺を作ります！

冬期はゲレンデに生息するフリースキーヤーのkozackmanさん。久しぶりのパソコン倶楽部りんごの勉強会への参加で、名刺デザインの考察を発表してくれました。これに対して、りんごメンバーで意見を出し合いました。

#14kozackman

SNS時代に名刺？

今時、個人で名刺を作りたい、と思ったのには訳がある、ということで、どんなコンセプトで名刺作成をしようとしている、という発表をしてもらいました。

名刺の目的

ゲレンデで知り合った人に渡して、自分のサイトにアクセスしてもらう

利用シーン

スキー場に於いて使用する事を前提にしたデザイン。ゲレンデでは携帯を持ち歩かないので、せっかく意気投合しても、その場限りになってしまうのがもったいない。そこで物理的に情報を伝える「名刺」をツールとして使おうと考えた。

デザインポイント

facebookをはじめ、youtube,flickr,pintarestなど、各種のSNSを最大限に活用したいので、それらのアイコンと、IDが必須。
各種SNSのIDが統一されていれば、省スペースにもなる。
この名刺は自己ブランディングのツールと考えている。

今までの名刺との違い

一般的な名刺の内容をおさらいしておくとこんな感じ。

会社名
役職
名前
メールアドレス
電話番号

作ろうとしている名刺ではこうしようと考えている。

~~会社名~~ サイトロゴ（かっこいいヤツ）
サイトurl
役職（いらないので削除）
名前（ローマ字でカッコよく！） a.k.a（SNSのIDをニックネームとして書く手もアリ）
~~メールアドレス~~ SNSアイコンとID
~~電話番号~~（教えたくないので削除）

メンバーからの意見

#12ランサーしょうじ

材質はプラスチックなど、濡れても大丈夫な素材にしないと使えないのでは？

#3真中のぶ

サーファーも海に携帯は持って行かないから、その手の情報は暗記してました！
名刺がなくても、興味がある人には後日連絡するし、口頭で伝えて覚えてもらえない人からの連絡はあまりないかも・・・
僕の場合は「nobu69」で検索してね！でだいたい問題ありません。せっかく自分のサイトがあるならそれを活用しない手はない！
本当に興味のある人は、検索して連絡をくれます。なので確実に、そのキーワードなら検索上位になるというキーワードを把握しておく必要があります。
簡単なキーワードが有利です。

#2タカハシ先生

名刺はインパクトを残せるかどうかが大切。総額で数千円しか違わないのなら、カード素材やプリント業者による印刷も多いに使うべきだと思います。そもそもインクジェットは水に弱いので、想定される使用環境では使えないし。

#9かおりんご

ステッカーやシールにしたら良いかも

今後の予定

kozackmanさんは、フリースキーとシーケンスに関するサイトを作るそうです。楽しみですね。サイトや名刺が出来上がったら報告をしてください。

2013-2-22勉強会

コメントをどうぞ

18:00スタート。参加6名。議題は「clubringoの新メンバーの迎え方について」、「Webデザインの考え方について」続きを読む →

2013-2-15勉強会

コメントをどうぞ

18:10開始。参加者7名。clubringo.comの編集方法と、Progressive Enhancementなどの制作コンセプトの解説。続きを読む →

月	火	水	木	金	土	日
« 8月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

タカハシ先生 について

ページを読み込んだ時に要素をanimationさせる

animation-fill-modeでアニメの開始前と終了後をコントロール

animation-animation-iteration-countは初期値が1

animation-delayは、別のクラスを重ねがけすると便利

マークアップとcssの筋トレ とは？

手順

まず、題材を用意します。

文字要素を抜き出します。

お好きなエディタでマークアップする

cssで装飾する

こんな感じにしてみました

名刺を作ります！

SNS時代に名刺？

今までの名刺との違い

メンバーからの意見

今後の予定

タカハシ先生について

マークアップとcssの筋トレとは？