2013-11-15 勉強会の議事録です。
cssでドロワーメニュー をやりました。(jQuery versionもやりました。)
僕のサイトhttp://nobu-69.com/others.htmlに書きましたのでご覧下さい。
「cssでドロワーメニュー(jQuery versionもあるよ！) 2013/11/15」をクリックして下さい。
Drawer（ドロワー）とは机とかの引き出しという意味です。基本的には表示領域が小さいスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。
cssで3D Box（立体図形）を作り、さらに回転させる。
2013-11-08の勉強会でやった事をまとめました。
2013-11-08の勉強会
の続編です。
今度は、回転の際に遠近感を出す方法です。cssのperspectiveを使います。現在はプロパティでも値でもあるようです。そのうち統一されるのかな？
サンプルかこちら↓
http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。
【1つ質問】
perspectiveを指定すると表示画像の大きさが変わってしまうのはなぜですか？
2013-11-08の勉強会でやった事をまとめました。
cssで3D Box（立体図形）を作り、さらに回転させる。
自分のサイトにまとめたので、興味のある方はご覧下さい。
アイデア次第で面白い事ができそうですよー。
http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。
前回質問したスマートフォン向け jQuery touch slide swipeで画像表示させるについて、ひとまず解決したので内容を書きます。
これは、カラーミーの商品詳細ページ（スマートフォンのテンプレート）で使用しました。
カラーミーはプランによって、商品詳細ページに掲載できる画像の枚数が決まっています。
私は４枚までのプランなので、今回は４枚の画像をスワイプさせました。
カラーミーショップは独自タグがあって画像を読み込む為に、if文？が使われています。
これがカスタマイズする時に、探し出すのが少し難しいのです。
今回は１枚目の画像とカラーミーのデフォルトで、<商品画像その他>とわかれている部分を４枚連続で表示できるようにhtmlを変更してます。そこに、下記のCSSを使用しました。CSSはコメントアウトしてる部分を変更しました。
※今回の大事な所
.deviceを100%
.swiper-containerにmax-width
他にも大事な指定はあると思いますが、ここが大事なのかな？と思います。
スマホを縦にした時は全体画像が見えて、画像の上に矢印が見えるようになります（矢印にz-indexを指定）。
横にスマホを回転した時は画像の大きさはそのままで、.deviceが100%になります。
画像の大きさを100％にすると横に回転した時に、商品の全体画像の一部が表示されて全体画像が見えないので、画像サイズは固定したほうが見やすいと思いました。
公開したページ（スマートフォン用）こちら
html
|
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 |
<!--商品画像--> <div class="device"> <a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><{if $product.img_url != ""}> <img id="swipe_image" src="<{$product.img_url}>" alt="<{$product_name}>の画像"> <{else}> <img id="swipe_image" src="http://img.shop-pro.jp/tmpl_img/13/now200.gif" alt="NOW PRINTINGの画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot1_url != ""}> <img src="<{$product.ot1_url}>" alt="<{$product_name}>の画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot2_url != ""}> <img src="<{$product.ot2_url}>" alt="<{$product_name}>の画像"> <{/if}></div> <div class="swiper-slide"><{if $product.ot3_url != ""}> <img src="<{$product.ot3_url}>" alt="<{$product_name}>の画像"> <{/if}></div> </div> </div> <div class="pagination"></div> </div> <!--/商品画像--> |
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
/* =============================================================== Basic Swiper Styles ================================================================*/ .swiper-container { margin:0 auto; position:relative; overflow:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; /* Fix of Webkit flickering */ z-index:1; } .swiper-wrapper { position:relative; width:100%; -webkit-transition-property:-webkit-transform, left, top; -webkit-transition-duration:0s; -webkit-transform:translate3d(0px,0,0); -webkit-transition-timing-function:ease; -moz-transition-property:-moz-transform, left, top; -moz-transition-duration:0s; -moz-transform:translate3d(0px,0,0); -moz-transition-timing-function:ease; -o-transition-property:-o-transform, left, top; -o-transition-duration:0s; -o-transform:translate3d(0px,0,0); -o-transition-timing-function:ease; -o-transform:translate(0px,0px); -ms-transition-property:-ms-transform, left, top; -ms-transition-duration:0s; -ms-transform:translate3d(0px,0,0); -ms-transition-timing-function:ease; transition-property:transform, left, top; transition-duration:0s; transform:translate3d(0px,0,0); transition-timing-function:ease; } .swiper-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { float: left; } /* IE10 Windows Phone 8 Fixes */ .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } /* Demo Syles */ body { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; } .device { width: 100%;/*-----外枠のBOXサイズ-----*/ height: 300px;/*-----高さ指定-----*/ padding: 30px 0; background: #f2f2f2; margin: 5px auto; position: relative; } .device .arrow-left { background: url(http://micco.pupu.jp/js/Swiper/img/arrows-2.png) no-repeat left top; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; z-index: 4;/*-----矢印を画像の上に表示させる-----*/ } .device .arrow-right { background: url(http://micco.pupu.jp/js/Swiper/img/arrows-2.png) no-repeat left bottom; position: absolute; right: 10px; top: 50%; margin-top: -15px; width: 17px; height: 30px; z-index: 4;/*-----矢印を画像の上に表示させる-----*/ } .swiper-container { margin:0 auto; height: 100%; max-width: 300px;/*-----画像をスマートフォンを横にしても画像サイズが変わらないように指定-----*/ } .content-slide { padding: 20px; color: #fff; } .pagination { position: absolute; left: 0; text-align: center; bottom:5px; width: 100%; } .swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; background: #999; box-shadow: 0px 1px 2px #555 inset; margin: 0 3px; cursor: pointer; } .swiper-active-switch { background: #fff; } |
こんなに長くなりましたが、まとめてみました。
足りない所があると思います。
まだまだこれからも、カラーミーショップのテンプレート(PCとスマートフォン)をカスタマイズしていくつもりです。
また、宜しくお願いします!
ありがとうございまいた。
Android、iphone、ipadなどで、スワイプ（フリック）操作による画像切り替えをしたいです。
2013-10-18 Friday 勉強会の議事録
jQuery Slide Panel
真中さんのサイトを参考に、jQuery本体を読み込む方法をやりました。
jQuery carousel
スワイプの参考サイトはhttp://www.idangero.us/sliders/swiper/demos.php
DemosのDefaultを参考にしています。
スワイプ（フリック）操作による画像切り替えをするまではできました。
作業中のページは商品詳細ページ
できれば、スマホで見て下さい。m（-..-）m
.device（外枠の黒い部分）width 100%にしました。
画像を読み込んだのですが、画像サイズの指定がうまくいきません。
画像をきちんと表示させるには、％で指定するのでしょうか？
CSSの問題ですよね？その場合、paddingやmarginの事を考えて指定しなければいけないですよね？
雑ですみませんが、画像でまとめてみました。(~_~)
他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか？これだと、表示画像が小さくなりますよね？
宜しくお願いします。
2013-10-18 Friday 勉強会の議事録です。
kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。
タカハシ先生、ありがとうございました。
CSSで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「css3 ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。
jQueryバージョンは、近日中にアップ予定。
みなさん議事録を書くのをいやがる傾向にありますが、書く事により確実に理解度は増すのでとても自分の為になります。もし、議事録を書いている時に分からなくなってしまっても先生がサポートしてくれる（多分）ので心配ありません。WAVE時代にPALを見ながら勉強していて実際に課題制作になったら何も出来なかったという事が多々ありましたよね。そのことからも分かるように、勉強会に出たからといって教わった技術が絶対身に付くとは限りません。
タカハシ先生は、私たちの質問に常に答えてくれます。質問内容が先生の知らない事であれば調べたり調査したりして答えてくれています。先生はよくこんな事を言っています。
メンバーの質問に答えたり、議事録を書いたりすることは、もちろん他の人の為でもありますが、実は自分の為に一番なるのですよー。
日本語と英語の２ヶ国語のホームページの更新をしていたら、日本語は問題なく表示されるのに、英語のページで文字があふれてしまいました。
日本語の文章は句読点や中点によって、語や文章の区切りを識別しますが、英語などの西洋語は語の区切りに空白を挟んで記述されるので、単語が羅列され空白がないときに文字があふれてしまうことがあります。
word-breakプロパティで指定できる値には、normal・keep-all・loose・break-strict・break-allがあります。キーワードによってCJK（ハングル、日本語のカナ、および、CJK表意文字）と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。
word-break－CSS3リファレンス
初期値はnormalでCJKは厳格に改行制限されるため、日本語はあふれることがありません。
改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー（はみ出し）を防ぐことができます。
ワープロソフトなどで、行末に長い単語が来るなどして単語を2行に分ける必要が生じたときに行われる、単語の前半と後半をハイフンで繋ぐ機能。主に欧文で使われる機能である。
どこで切ってもよいわけではなく、単語中の音節の区切りでハイフネーションを行うことになっている。また、ハイフネーションを続けて行うと読みにくくなるため、3行以上連続してハイフネーションを行うのは望ましくないとされている。
ハイフネーションとは 【 hyphenation 】 – 意味/解説/説明/定義 ： IT用語辞典
正しい位置で改行するためには、改行したい位置に<br/>タグを入れた方がよいかもしれません。
css3でパラパラアニメを作る方法をご紹介します。 続きを読む
サイトのメニューのホバーをふわ～っとさせて、かわいくするにあたってのの注意点。
（2013-09-06勉強会・制作中のサイトを先生に見てもらったらアドバイスを頂いたのでメモしておきます。）
上の３つと下の３つの違いわかりますか？上３つはホバーした時の「ほわ～」が遅いのでユーザーが少々いらいらするかも。なので下３つはちょっと速くしたのでいらいらしない。（と思う）
もう1つ。カーソルを外した時に上段は「ぱっ」ともとに戻るのでかわいくない。下段は「ほわ～」っと戻るのでかわいい。戻るのはゆっくりでもいらいらしない。（と思う）
醤油ラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしないでしょ。それと同じ心理かな。または、かつ丼を注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。さらに、みそラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。……..読んでいらいらした？
|
1 2 3 4 5 6 7 |
nav ul li a:hover{ color:#ccc; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
nav ul li a{ color:#000; -webkit-transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; transition: all 1s ease-out; } nav ul li a:hover{ color:#ccc; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } |
8/23日の勉強会でのicomoonの続きです。
今回は自分で作った画像をicomoonを使ってアイコンフォントにしてみます。
目次
形はなるべく単純に、隙間などは広めにとります。
また時々縮小してみてバランスを確認します。
私は300px×300pxでこんなのを作ってみました。
続きを読む
画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。便利ですねー。
|
1 2 3 4 |
<section> <h1>見出し</h1> <p>テキスト</p> </section> |
sectionに背景#fffでopacity:0.4にするとこうなる。
sectionの中にあるhlとか画像とか全部が半透明。
文字や画像はそのままで、背景色の白だけ半透明にするには 続きを読む
2013-06-14の勉強会で、やりました。
width:calcとsizing:border-boxという新しいものであります。
こんな感じ↓
|
1 2 3 4 5 6 7 8 9 10 11 12 |
width:calc(100% / 3 - 10px); /* -------- 100%を３で割って10px引くという意味。 +（たす） -（ひく） *（かける）も使える。 演算子の前後は、必ず半角あける。 ---------- */ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* -------- borderの幅、paddingの幅もwidthのうちに入れてくれる。 ---------- */ |
僕のサイトにサンプルと説明をアップしました。
http://nobu-69.com/study/cluc_201306/cluc.html