月別アーカイブ: 2013年3月

css animation-delay の使いどころ

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

WP CSS3フルスクリーン背景スライドショーについて-Fullscreen Slideshow

CSS3で、スライドショーを背景にしたサンプルをみつけました。
ちょっとやってみたくなって、
http://st-neverland.com/
でやってみました。
写真は仮です。

wpの、front-page.php (固定ページ)に
demoサイト
から、コピペ(^_^;)して、やってみました。
表示は出来るのですが、背景に指定できません。
コンテンツもきちんと表示できません。
スマホもグチャグチャです。

Demo1のように表示して、新着ブログも背景の中に表示したいのですが。
どこにスタイルを指定すれば良いのか、、、困っています。(~_~)

ヘッダー含め、修正箇所が沢山あると思いますが、どうしたら良いですか???。。。

front-page.php

div id=”page” は元々body id=”page” でした。
bodyはおかしいと思って。divに変更しました。
これだと、bodyには指定できてない気がします。。。
すみません。長いですがこんな感じです。

スマホ対応のデザイン

先生に質問

media queryでスマホ対応にしようと思い、作業中です。

参考にと思いhttp://www.malebranche.co.jp/
を見ました。画面横幅をせばめるとメニューが縦並びになります。その際にスマートフォン対応サイトへと出てきます。
それをクリックして見る(PCで)のと、実際スマホで見るのとでは、レイアウトが違います。PCで見ると、左側にサイドメニュー的なものがあります。

これは、どういうことでしょうか?

スマホ用に、別にサイトを作り、modanizerとかで
分岐して表示させてるのですか?

cssで画像をクロスフェードに挑戦

先生のを参考にやってますが、うまくいきません。手書きしてましたけど上手くいかないので、
とりあえず、一回コピペで試してみましたが、うまくいきません。
http://nobu-69.com/manakaa/sample2/
3枚目の画像の後に謎の空白時間があります。

現在の理解度

/*cssでスライドショー*/

クロスフェードするものの大外枠です。widthを切れば画面いっぱいに表示されます。
#bg_header{
margin:0 auto;
width:900px;
}

高さ指定は必須。指定しないと、場所が確保されないので。
画像は縦に3つ並びます。overflow:hidden;であふれた分を隠します。
.slider{
height:400px;
position:relative;
overflow:hidden;
}

各画像をabsolute the butcherで同じ位置に重ねる。
.slider img {
position:absolute;
width:100%;
}

opacity:0;で完全に透明にする。キーフレーム名(必須)をつける、overwrapとする。(任意の名前でいい)
24sは24秒という意味。何が24sなのでしょう?easeはイージング。infiniteは永遠に。
.slider img {
opacity:0;
animation:overwrap 24s ease infinite;
}

nth-of-type(1)は一枚目という意味かな?一枚目のディレイが0なのは、
すぐに表示させたいから。2枚目は4秒後に出現。3枚目は8秒後に出現。
.slider img:nth-of-type(1) {
animation-delay:0;
}
.slider img:nth-of-type(2) {
animation-delay:4s;
}
.slider img:nth-of-type(3) {
animation-delay:8s;
}

overwrapと名前をつけたキーフレームに色々と指定を書く。
ここが良く分からないです。
スライドショーの柿のやつの黒板の説明みたけど、?です。
難しいです。
@keyframes overwrap {
0% {opacity:0;z-index:10;}
5%,30% {opacity:1;}
44% {opacity:0;z-index:-1;}
45%,100% {opacity:0;z-index:-1;}
}

よろしくお願いします。

スライドショーサンプル

先生に質問

css3アニメーションでmanaka.comのトップページの画像いっぱいに表示でスライド(フェード)ショーする
記事がありましたが、見当たりません。

それを参考に自分でやってみようと思ってたんですが。

どこにいっちゃったんでしょうか?

真中のぶ 備忘録

2013.03.22の勉強会にて

①グローバルメニューを横並びする際にliにフロートしないでli aにフロートしてしまうので、liをフロートする事!これは癖で何度もやってしまうので注意する事!

②バナーサイズに国際標準規格というのがあるのを知りました。
 http://www.bana-wave.com/banner/info/bannersize.html

③メディアクエリでスマホやタブレットの大きさに対応する際にブレイクポイントは、横幅600pxだけでいいかも。たくさんやるときりがない。あと、やるなら800。800以下は、横幅%指定。800以上はpx指定。

④cssアニメーション
 タブレット、モバイルはie10,firefox,safari,chromeなので問題ない。
 デスクトップは、ie9以下は効かないから、ヘッドにif ieでjQueryを実装、または静止画を一枚表示。

2013-03-22 勉強会

日時:2013年3月22日(金)18:00〜22:00
会場:柴崎学習館 第二和室
出席者:高橋先生、真中のぶ、ランサーしょうじ、かおりんご、KANEDA
項目は、

  • Manaka Designのマークアップについて
  • レスポンシブwebデザインのスライダーはどうするか?
  • バナーサイズについて
  • 新しいプラグイン(勉強会のカレンダーをwidgetに表示)
  • 固定トップページに画像をアップし、スライドさせる方法の検討

続きを読む

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

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

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

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

Twenty Elevenの子テーマで、グローバルメニューのリンクが、意図しない箇所で改行されてしまうのを直したい!
ウィンドウが広いときには以下の様だったのが、
twenty-eleven-menu
iPhoneなどの狭いウィンドウで、こうなる(ONLINE SHOPというメニューが改行してしまう)。
twenty-eleven-menu-item-line-brake
kaneda#8kaneda

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

これで以下のようになります。
twenty-eleven-menu-item-line-brake-fixed

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

こんな感じになるはずです。
twenty-eleven-menu-item-line-brake-fixed-wide

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

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

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

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

手順

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

今回はこれ。

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

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


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

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

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

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

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

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

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

cssで装飾する

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

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

screenshot-html5-popcorn-package

cssはこんな感じ。

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

WP固定ページに最新投稿一覧を表示する

front-page.php(固定ページの表示したい場所に記述)

2013-3-8勉強会

今日は、新メンバーのKIKOさんが参加されました。
お菓子が今回も更に充実!! KIKOさんからもたくさんいただきました!
KIKOさんは元漫画家さんという事で、イラスト作品も拝見させていただきました。さすがプロ!!

議題は以下の通り

  • KIKOさんのマッサージ治療院のチラシデザインについて
  • キャラメルメープルポップコーンのパッケージでマークアップとCSSの筋トレ
  • サイトのTOPページをWwordPressにしたい
  • WwordPressのユーザー一覧ページを作る

です。 続きを読む

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

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

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

続きを読む