みなさま、ごきげんよう。
2014-07-18 勉強会でレスポンシブWebデザイン(RWD)の実装方法について、確認しました。
自分のサイトや作品をレスポンシブにしたい!
レスポンシブWebデザインの理解が曖昧な人や、初めてRWDに挑戦する人は、以下の手順でやってみましょう。
みなさま、ごきげんよう。
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」という記事をご覧下さい。
2014-03-14 Fridayの勉強会の議事録です。
自分のサイトの備忘録ページに「Modernizr/モダナイザーとは?」というのをアップしたので、興味があれば見て下さい。
manaka design
自分のサイトができました。キャッチコピーやいろいろと手直ししたいですが、完璧にできるまでをまっていてもその時は来ない(上を見ている以上)なので、一応これで完成です。紙媒体と違い後から何度でも修正、変更できるのがweb siteのいい所。
http://manakaa.com/
http://blog.livedoor.jp/happygolucky1969/archives/52401162.html
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> |
jQuery でスクロール位置を取得して、色々と仕掛けをしたい時の方法です。
scroll-switch-animation
まずはリンク先と、そのソースを見てみてください。 続きを読む
2014-01-24の勉強会でやった事を現在製作中の自分のサイトにやってみました。
質問1
1つだけならうまくいきますが、2つ設置するとうまくいきません。(同時に作動してしまう。)
質問2
jQuery本体ですが、index.htmlにしゅるしゅるスムーススクロールをやる為に、
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js”
で本体を読み込んでいました。
しかし今回のアニメーションをやるにはversionが古すぎるようで、動きませんでした。
なので、最新の本体をダウンロードしてサイト内に設置しました。そしたらアニメーションは
動きましたが、しゅるしゅるスクロールが動作しません。
こういう場合の対処法については、どうしたらいいでしょうか?
新しいのに対応しているスムーススクロールを見つけるのがいいのかなあ。
製作中のサイトです。トップページにアニメーションあります。あと、何度もいいますが制作途中です。w
manakaa.com
先生が作ったサンプルサイト
ringo20140124
※ダウンロードしてjQ本体をリンクして下さい。
今回は先生から急遽病気で行けなくなったとの連絡をもらいましたので、先生ぬきでの勉強会でした。
サイトを見ていて気になるエフェクトってありますよね。そんなときはFireFoxのFireBugでhtmlとcssをコピってしまおう。そんでもってcssの値をかえたり、プロパティ自体をオフにしてみたりする事で理解を深める。「編集ボタン」でhtmlをコピー、cssをコピーしてhtmlファイルにペースト。どのcssをコピーするかは各自のセンスで。知らないプロパティとかが出て来てもとりあえずコピる。動けばとりあえずOK!
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 |
*, *:after, *:before { -moz-box-sizing: border-box; } nav a { color: #FFFFFF; display: inline-block; font-size: 1.35em; font-weight:400; letter-spacing: 1px; margin: 15px 25px; outline: medium none; position: relative; text-decoration: none; text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); text-transform: uppercase; } .cl-effect-5 a span { display: inline-block; position: relative; transition: transform 0.3s ease 0s; } .cl-effect-5 a:hover span, .cl-effect-5 a:focus span { transform: translateY(-100%); } .container > section { margin: 0 auto; padding: 10em 3em; text-align: center; } .color-5 { background: none repeat scroll 0 0 #CD4436; } .cl-effect-5 a { height: 1em; overflow: hidden; padding: 0 4px; } .cl-effect-5 a span:before { content: attr(data-hover); font-weight:700; position: absolute; top: 100%; transform: translate3d(0px, 0px, 0px); } |
html
1 2 3 4 5 6 7 8 9 |
<section class="color-5"> <nav id="cl-effect-5" class="cl-effect-5"> <a href="#cl-effect-5"><span data-hover="Seraglio">Seraglio</span></a> <a href="#cl-effect-5"><span data-hover="Sumptuous">Sumptuous</span></a> <a href="#cl-effect-5"><span data-hover="Scintilla">Scintilla</span></a> <a href="#cl-effect-5"><span data-hover="Palimpsest">Palimpsest</span></a> <a href="#cl-effect-5"><span data-hover="Assemblage">Assemblage</span></a> </nav> </section> |
質問
・フォントの太さが参考サイトと違うのはなぜ?
・IE/Firefox だと文字の高さをキープするけど、Mac/Firefoxだと文字の高さが(幅も)キープされないのはなぜ?
今日の勉強会は謎をのこしつつ終了しました。
2013-12-20 勉強会議事録
今回は、大きく時間をとって新しい技術に挑戦!という事はせず、基本的な事などを色々やりました。
11/22の勉強会の議事録です。
今回はmacのスクリーンセーバー風なものをcss3で作ってみました。
まずは完成形をご覧ください。↓
それでは作成のポイントを説明致します。
どうぞ、下のソースもあわせてお読み下さい。
目次