皆様、ごきげんよう。
2014-08-01 勉強会
前回、skrollrを実装し、画像やテキストなどの要素をスクロール量に応じて動かす方法を確認しました。そして今回は背景画像の動きを操作して遠近感を出す事によって、パララックスを実現する方法を確認しました。
続きを読む
皆様、ごきげんよう。
2014-08-01 勉強会
前回、skrollrを実装し、画像やテキストなどの要素をスクロール量に応じて動かす方法を確認しました。そして今回は背景画像の動きを操作して遠近感を出す事によって、パララックスを実現する方法を確認しました。
続きを読む
みなさま、ごきげんよう。
2014-07-25 勉強会でskrollrの実装方法について、確認しました。
この勉強会では”skrollr”というJavaScriptライブラリを使用しました。パララックスサイトの理解が曖昧な人や、初めてパララックスに挑戦する人は、以下の手順でやってみましょう。
みなさま、ごきげんよう。
2014-07-18 勉強会でレスポンシブWebデザイン(RWD)の実装方法について、確認しました。
レスポンシブWebデザインの理解が曖昧な人や、初めてRWDに挑戦する人は、以下の手順でやってみましょう。
2014-06-13 勉強会
この日の勉強会は、とても有意義な内容でした。内容の一部を自分のサイトにアップしました。
manaka designのtipsをご覧下さい。とても為になる事が書いてあります。
manaka design
↑「SVG LINE アニメーション・応用編2014-05-15」に追記しました。参照して下さい。
visibility:hiddenは要素の高さをキープする。display:noneは要素の高さをキープしない。まあ、やってみて下さい。違いがわかりますよ。
疑似要素でデザインに装飾を加えたりしていますよね。そして疑似クラスというのもあります。よく使う「:hover」というのは、疑似クラスにあたります。その他に「:target」というのもあります。今回「:target」を使ってどんな事が出来るのかやってみました。下記のファイル参照
2014-5-02の勉強会にて学んだclearfixについてまとめます。現在私は初めてのサイトを制作中で、<footer>内のナビゲーションがfooter画像内におさまらないという問題が発生し、先生に質問しました。
→原因は、<main>の高さが0だから。
中身がすべてfloatしている親要素の高さは0になる。floatをかけると別の次元になり、親要素の中にいない状態になる。上の図の場合、2つの<div>は<main>の中にいない状態になる。つまり、親要素の<main>は2つの<div>を覆っていない状態である。
●解決法
2と3はどちらでもよいが、overflow:hidden; を使用すると、幅を超えてしまったテキストや画像を隠してしまうという問題が生ずる。clearfixの方が安全である。※両方指定しないこと。
●clearfixの使い方
・clearfixしたい要素は中身がすべてfloatしている親要素。
・親要素にクラスを指定しておく。ここでは「class=”clearfix”」とする。
今回の例でいうと、
html
1 |
<main class="clearfix"> |
css
1 2 3 4 5 |
.clearfix:after{ content:""; display:block; clear:both; } |
↑after疑似要素とcontentプロパティを利用して、中身のfloatした要素の後ろに、内容が空のblock要素を生成。そのblock要素にclear:both; を指定している。
これで親要素に高さがキープされ、中身の要素全体を覆うようになった。
ほかにもclearfixが必要な親要素に同じクラス名をつければ、複数回使用できる。
●「:before」「:after」とは
cssの疑似要素。(疑似要素とは、htmlにはかいていないが、cssで作れる要素のようなもの)
:beforeと:after疑似要素は位置を指定するもの。しかしIE7までは非対応。IE8から使用可。
:before →要素の直前にコンテンツを追加
:after →要素の直後にコンテンツを追加
2014-05-09 の勉強会で「SVG LINE アニメーション part2」というのをやりました。前回の応用編です。
SVG LINE アニメーション・基礎編
svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。
manaka design/tips
「SVG LINE アニメーション・応用編 2014-05-15」という記事をご覧下さい。
2014-05-02 の勉強会で「SVG LINE アニメーション」というのをやりました。
svgはベクター画像なので拡大してもビットマップ画像のようにギザギザにはなりません。レスポンシブデザインに最適です。もちろんアニメーションはcssで実装!FlashやJavascriptを使わないので軽いのであります。
manaka design/tips
「SVG LINE アニメーション・基礎編 2014-05-05」という記事をご覧下さい。
サイト内のロゴマークや見出し等の限られた文字だけWEBフォントにしちゃおう。レスポンシヴデザインに最適です。
先週の勉強会でやったやつです。
自分のサイトの備忘録「tips」にアップしました。
http://manakaa.com/tips.html
「日本語のWEBフォントを自作(限られた文字だけ)2014-04-25」という記事をご覧下さい。
このページにも説明を書こうと思いましたが、それは参加されたどなたかにお譲りします。
なぜなら議事録などを書くと理解度が増すからです。僕だけスキルが上がっては申し訳ありません。
どなたかチャレンジを!
2014-03-14 Fridayの勉強会の議事録です。
自分のサイトの備忘録ページに「Modernizr/モダナイザーとは?」というのをアップしたので、興味があれば見て下さい。
manaka design
この日の勉強会は、マークアップについてぼんやりなメンバーがいるので基本からやりました。
少々話がそれますが、デザイナーとはなんでしょうか?……..デザインする人のことです。そんなの知ってますよね(笑)
では、デザインとはなんでしょうか?….かっこいいのや可愛いいのを作るのもデザインですが、それだけではありません。便利で使いやすいや伝わりやすいを作るのもデザインです。ユニバーサルデザイン(できるだけ多くの人が利用可能であるようなデザインにすること)なんていうのもありますよね。
意外と前者だけがデザインと思ってしがいがちですが、後者あっての前者な訳です。簡単な例ですが、大人の高級感を出したいなら黒と白を基調にするのがいいでしょう(シャネルとか)。子供の元気さを出したいなら原色をたくさん使うといいですよね(トイザラスとか)。何を伝えたいかによってデザインは変わってきます。なので伝えたい事がないのであればデザインは存在しません。伝えたい事などはさておき、自分が可愛いやカッコいいと思ったものを表現するのもアリですが、それはデザインではなくアートです。(まあ、デザインとアートについて話すと長くなるのでここではそうしておきます。)
使いやすいや伝わりやすいを作るのがデザインという事なら、正しいマークアップでサイトを作るというのは絶対必要な事です。検索エンジンGoogleにサイトの内容を伝わりやすくすることでGoogleの評価は上がります。評価が上がるという事は検索が上位に来るという事です。検索が上位に来るという事は、ユーザーにこちらの伝えたい情報が伝わりやすくなるのです。
今度は見に来てくれたユーザーの気を引く為に見やすいや使いやすいを考慮しながらカッコいいや可愛いを表現していくのです。
ウェブデザイナーとはそんな仕事だと思います。僕もまだまだ未熟ですが、以上の事を知っているのと知っていないのとでは、だいぶ差が出てくるのではないでしょうか。というわけで見た目のデザインだけではなく中身のデザインも頑張りましょう。文字色を赤にしようかピンクにしようか悩むように、ここのマークアップはpかな?それともh2?などと悩んでいきましょう。文字色に答えはありませんが、マークアップには答えがあるので頑張りましょう。
あと、この記事を読んでいて何か違和感を感じませんでしたか?文才がないので読みにくいというのは無しで!(笑)
写真のサイズもそうですが順番が問題です。シャネル、トイザラスの順番で説明がされているのに、写真の順番が逆です。(こういうのはもともと人間工学という分野で研究されてきました。)使いやすさや見やすさを考えるのであれば、説明と写真の順番は同じでなければなりません。
pでやったりaddressでやったりしてましたが、pの方が正しいみたいです。でも、そこが連絡先なのであればaddressがベター。下記サイト参照↓
以上勉強会まとめです。(というか僕なりのデザインの考え方かな w)
この日は今年2回目の大雪の日でした。帰宅が困難になると予想して柴崎町学習館での勉強会は中止にしました。その代わり、コードシェアやFaceTime等を使い各自自宅にいながらの遠隔学習にチャレンジしました。
サイボウズや当サイトでもお伝えしていたように、先生は18:00〜22:00まで、みなさんの質問に答える為に自宅でスタンバイしてくれました。
僕は先生に、こんな事を教えてもらいました。
http://nobu-69.com/others.html
あとは、RWDについて少々。
やる気があれば、どんな状況でも工夫次第で勉強会は出来るものですね。
先生、お疲れさまでした。
2014.2.14に柴崎学習感で開催予定の勉強会は大雪予報のため中止します。
以下、注意点です。
この日は8人の参加者で賑わいました。
これから初心者の方の参加が目立ってきそうな感じですかね?!そうなるとレベルがバラバラになるので、全員で1つの事をやるのは無理が出てくるかも知れません。
wordpress関数をやっても初心者には理解不能だろうし、idとclassの違いについてやっても初心者以上には退屈でしょう。
来た全員が納得できる勉強会にするにはどうするのが良いか、各自考えてみて下さい。
いくつか考えました。
先生、みなさん
どうですか。
2014-01-31と2014-02-07の2週にわたり勉強会でやった「特定の位置までスクロールしたときにアニメーションさせる」というのを自分なりにやってみました。
オブジェクトの数だけif文を書くという面倒なやり方ですが、理解しました。オブジェクトの数だけif文を書かなくて済む方法も先生に教わりましたが、まだちょっと難しいので理解していません。
とりあえず自分のサイトにアップしました。
http://nobu-69.com/others.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 45 46 47 48 49 50 51 52 53 |
html,body { margin: 0; padding: 3em; } section{ padding:30em 0 } /*1つめ*/ .box { height: 10em; margin: 0 1em 2em 0; position: relative; border: 2px solid #333; } .box:before { content: "1回転して3倍に拡大"; display: block; position: absolute; left: 45%; top : 45%; background-color:pink; transition: 0.5s; } .on.box:before { transform: scale(3) rotate(1turn); background-color:purple; color:#fff; } /*2つめ*/ .box2 { height: 10em; margin: 0 1em 2em 0; position: relative; border: 2px solid #333; } .box2:before { content: "半回転して2倍に拡大"; display: block; position: absolute; left: 45%; top : 45%; background-color:indianred; transition: 0.5s; } .on.box2:before { transform: scale(-2) rotate(1turn); background-color:skyblue; } |
jQuery
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 |
$(function(){ var scrollBottom; var wHeight; var sec1Top = $("#sec1 .box").offset().top;//1つめ varの関数名はif文で使われる 動かしたいオブジェクトの数だけこの行も必要 var wowwow = $("#sec2 .box2").offset().top;//2つめ varの関数名はif文で使われる function getScrollTop(){ wHeight = Math.floor($(window).height() * 0.5);//0.5は画面の真ん中、0はTOP、1はBOTTOMで変化 scrollBottom = $(window).scrollTop() + wHeight; //動かしたいオブジェクトの数だけifとelse(2つでワンセット)がある if(scrollBottom >= sec1Top){ $("#sec1 .box").addClass("on"); } else{ $("#sec1 .box").removeClass("on"); } if(scrollBottom >= wowwow){ $("#sec2 .box2").addClass("on"); } else{ $("#sec2 .box2").removeClass("on"); } } $(window).on("load scroll", getScrollTop); }); //.offset() .scrollTop() .addClass .removeClassはjQueryの変数なので「ヌー」で調べられる。 //仕組みは、ある位置(ここでは0.5に来た時)にcssが入れ替わる。.boxから.box onに。 //変化する矩形は疑似要素でcssのtransformでアニメーションしている。 |
html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<section id="sec1"> <div> <h1>Sec1</h1> <div class="box"></div> </div> </section> <section id="sec2"> <div> <h1>Sec2</h1> <div class="box2"></div> </div> </section> |