今日はレスポンシブWebデザインのモックアップ作成に良さそうなツール「FROONT」を紹介します。
登録したばかりで使い方も把握してなくて言うのもなんですが(^^;A、上手に使えばかなり便利なツールになるかもしれません。
まずは、Watch video を見てみて下さい。おぉ〜、なんか良さげじゃないですか?
ちなみにこのサイト、今流行りのフラットデザインですね。
しかも、Pantoneの2013年のトレンドカラー、エメラルドグリーンも押さえてます。
よかったら皆さんも試してみて下さい♪
今日はレスポンシブWebデザインのモックアップ作成に良さそうなツール「FROONT」を紹介します。
登録したばかりで使い方も把握してなくて言うのもなんですが(^^;A、上手に使えばかなり便利なツールになるかもしれません。
まずは、Watch video を見てみて下さい。おぉ〜、なんか良さげじゃないですか?
ちなみにこのサイト、今流行りのフラットデザインですね。
しかも、Pantoneの2013年のトレンドカラー、エメラルドグリーンも押さえてます。
よかったら皆さんも試してみて下さい♪
今日もランサーしょうじさんはお休みでした。寂しいなー・・・(ノ_・。)
勉強会の概要
貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか?
通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。
それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか?
よろしくお願い致します。
これからの勉強会に提案があります。
このサイトのオリジナルテーマを一から作っていきませんか?
題して「html5で作るワードプレスオリジナルテーマ」
なんてどうでしょう?
html5もphpもデザインも制作の流れも学べますし、
チームで作り上げて行くことも良い経験になると思います。
制作過程は、このサイトで連載します。
これを一つの柱に、あとは個人の取り上げて欲しいお題を勉強するのは如何でしょうか?
勉強会でやって欲しい事をリクエストします。
①動画挿入用プラグイン「Viper’s Video Quicktags」を先ほどインストールしました。
簡単に出来て特に問題ないのですが、iphoneで見るとサムネイル画像が縦に伸びてしまっています。
クリックして別画面が開き動画を見る際には問題ありません。
②先週のcssアニメを自分なりにアレンジしてやってみました。それについての質問です。
こちらを見て下さい。
http://nobu-69.com/study/css_packman/css-packman.html
パックマンがパクパクやっているのは上手く出来ました。
「パックマンをパクパクさせながら画面の右から左に移動させる」
という所で、つまずいています。
勉強会用にzipファイルも用意しました。
http://nobu-69.com/study/css_packman/css-packman.html
以上
よろしくお願い致しまするん。
②について勉強会でやりました。ありがとうございました!
1 2 3 4 5 6 7 8 |
.pack { width:300px;/*幅の指定は大事です*/ animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/ } @keyframes pack { 0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う!*/ 100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う!*/ } |
こんな感じで実装できました。
動画挿入用プラグイン「Viper’s Video Quicktags」を入れてみました。
「YouTube」というボタンを押せばダイアログボックスが出てきますので、画像のurlを入れて下さい。
サイズも変えられるよ!
[youtube]http://www.youtube.com/watch?v=DC6J1kUd-64[/youtube]
参考サイト
http://wp-site.biz/4618
レスポンシブWebデザインを考える際に、IE8以前(IE8~6)の古いブラウザについて、どのように対応するかを考えてみました。
どうすれば、手間が少なく古いブラウザへの対策ができるのか?
レスポンシブWebデザインを作る際の覚書です。
考えるにあたって、下記の条件のクリアを前提としました。
日本ではまだまだWebページを見るためにIEを使う人が多いです。
デザイン面を考えるとCSS3を使っている場合、ChromeやFirefoxとIEを比べたときに見た目が変わってしまうことがあります。
その辺りの事情は、見る人にはなかなか理解してもらえない現状もあるので、jsライブラリの利用で透過png画像やある程度のCSS3を使えるようにして解決してしまおうというワケです。
また、制作者としてはモバイルファーストも意識したいという気持ちあったりします。
レスポンシブWebデザインと言うと、デバイスごとに異なるデザインになることに意識が向きがちです。
過度に「レスポンシブ」というキーワードに振り回されていないか、制作の際に必要なこと不要なことをざっくりと切り分けてみました。
異なるデバイス間での表示に適したデザインにすることは必要なことですが、PCでブラウザを幅を変えた時にデザインが変わることは必ずしも必要なことには思えませんでした。
その理由としては、PCではわざわざブラウザの幅を狭くして、タブレット用のデザインでWebページを見ることはほとんどないからです。
「必要なこと」「不要なこと」の切り分けができれば、闇雲なレスポンシブに走ることもなく、デザイン、技術の面で必要な対応が見えてきます。
「不要なこと」で切り分けたことを元に、PCでは固定幅デザインを見せるようにします。
また、IE8以前のブラウザを搭載したデバイスは、PC以外には無いことも考慮すると、無理にjsライブラリでIE8以前の環境で@media queryに対応する必要はなくなりますね。
制作の際はIE8以前ブラウザ向けに、固定幅の専用CSSを用意して条件分岐コメントを使って読み込めば大丈夫です。
(モバイルファーストなCSSの記述にしなければ、固定幅専用のCSSを用意する必要はなくなりますが、この辺は個人的なこだわりです。)
他に気づいたこととしては、@media queryに対応していないブラウザは「background-size」にも未対応です。
そのため、フルードイメージへの対応も難しく中途半端になってしまいます。
Webサイトを制作する上で、画像を全く使わないということもほとんどないので、フルードイメージに対応出来ないブラウザは、@media queryにも対応しないという制作方針にしてしまうのも1つの方法かなと考えました。(でも、border-radiusなどのCSS3は使いたいので、その辺はjsライブラリで何とかしてしまいます)
画像について考えると、「Retinaディスプレイとか高解像度ディスプレイはどうするの?」という疑問が出てきますが、長くなりそうなので、他の記事としたいと思います。
front-page.phpを編集し「パソコン倶楽部りんご」TOPページのaside部分を最新の投稿5件に変更して、カテゴリー、タグ、投稿者を表示するようにし、コメントも最新の5件を表示させました。これに伴い、Front-page用のウィジェットエリアに入れていた、投稿とコメントのウィジェットは削除しました。
また、「おすすめ」というタグを作成しておいたので、りんごユーザーの人は、自分がお勧めしたい投稿に「おすすめ」タグをつけて下さい。数が揃ったら、上記のaside内などに表示してみます。
今日はランサーしょうじさんがお休みです。でもお菓子は確保。
勉強会の概要は
です。 続きを読む
animationプロパティのanimation-timing-functionの値にsteps()を使うと、簡単にパラパラアニメが作れます。こんな感じです。
作成の手順は以下の通り。
1 2 3 4 5 6 7 8 9 10 11 |
.parapara { width:50px; height:100px; margin:1em auto; overflow:hidden; background:url(http://clubringo.com/wp-content/uploads/2013/05/para.png); animation:para 0.5s steps(5,end) infinite; } @keyframes para { 100% {background-position:-250px;} } |
簡単ですね?animation-timing-functionの解説はこちらなど。
実装はここの例を参考にしましたよ>codepen.io
すごい!
[youtube]http://www.youtube.com/watch?v=SHrSgFI24zU[/youtube]
技術もすごいし、このアートのもつメッセージも素敵です。
感動しました。
http://rocketnews24.com/2013/05/14/328295/
Q. いつCreative Suite 7がでるのでしょうか?
A. だからでません!
キレてます!ヽ(@ @)ノ
と言う訳で本日は取り急ぎ、
Creative Cloudの個人ユーザー向け価格設定は、
で利用出来るとのことですが、止めたらソフトが手元に残らないし、使うのはPhotoshopとIllustratorくらいだし〜な私には、この使用料は正直高い。
そこでCS6を指定校ライセンス版で購入出来るサイトを紹介しておきます。
オンライン通信講座の受講生になることで指定校ライセンス版が購入出来る、という仕組みです。
受講生になる、といっても自宅で好きな時に受講しても(しなくても)良いみたいですし、CS6パッケージ版の在庫もいつまであるのか不明なので、購入を迷っている方は覗いてみて下さい。
アドバンスクールオンライン
私はこちらで購入しちゃいました。届くのが楽しみだな〜(^^)ゞ
下記のサイトのトップページ中央の画像スライド?アニメーション?
http://www.chanterelle.jp/index.html
これは、どのように実装しているのか教えて下さい。
jQueryかな。css3でも出来そうな気もします。(分らないけど)
出来たら本日の勉強会のお題としてお願いします。
—————————————————————-
2013-05-10 fri 勉強会でやってみました。jQueryではなく、css3で実装しました。
いい感じにできましたよ。タカハシ先生ありがとうございます!
僕のサーバーに作ったものをアップしたので見て下さい。
http://nobu-69.com/study/20130510_anime/green.html
html,cssは以下の通りでございます。ちなみにベンダープレフィックスは、書いてません。実際に制作で使う際には、ちゃんと書かないとだめですよ。
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 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css3でアニメ</title> <style> .anime { background: url("home.png") repeat-x scroll 0 0 #FFFFFF; width:100%; height:86px; animation:scr1 infinite 30s linear; position:absolute; z-index:10; opacity:0.9; } .anime2 { background: url("cloud.png") repeat-x scroll 0 0; width:100%; height:25px; animation:scr2 infinite 40s linear; position:absolute; z-index:20; opacity:0.9; } @keyframes scr1 { 0% {background-position:0 0;} 100% {background-position:1000px 0;} } @keyframes scr2 { 0% {background-position:0 0;} 100% {background-position:-703px 0;} } h1{font-size:15px;color:#666;} </style> </head> <body> <h1>css3でアニメーション</h1> <div class="anime"></div> <div class="anime2"></div> </body> </html> |
キーフレームを以下の様に指定するので画像の横幅の数値は重要です。横幅のサイズの数値を記入して下さい。違う数値を書くとカクカクした動きになったりします。
1 2 3 4 5 6 7 8 |
@keyframes scr1 { 0% {background-position:0 0;} 100% {background-position:1000px 0;} } @keyframes scr2 { 0% {background-position:0 0;} 100% {background-position:-703px 0;} } |
画像が重なっているのは、
position:absolute;
z-index
が効いているからです。
もちろん画像は変えられるし、動くスピードもかえられるので、アイデア次第で、面白い物ができそうですねー。
レッツ チャレンジ!
※ie9.ie8.ie6では動きません。
この記事のアイキャッチ画像を見て下さい。多分この文章の上に表示されてるかな。
上段のサムネイルがieによるものです。横幅が狭く、写真がつぶれちゃってますね。FireFoxで見ると下段の様にきれいに表示してくれます。
どうしてieはこんなにも意地悪なんでしょうか?
などと、愚痴を言っていてもサムネイルはつぶれたままなので、以下の記述をテーマのスタイルシート(style.css)に書くと直ります。
1 |
.entry-content .ngg-gallery-thumbnail img { height:auto; margin: 0 0 18px 0; max-width:none; } |
参考サイト
http://wordpress.org/support/topic/plugin-nextgen-gallery-ie-8-issue-with-image-lists