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の事を考えて指定しなければいけないですよね？
雑ですみませんが、画像でまとめてみました。(~_~)
他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか？これだと、表示画像が小さくなりますよね？
宜しくお願いします。
これまで「Dreamweaver」や「Aptana Studio」を使いコーディングをしていました。
最近使ってみた「Sublime Text 2」は使い勝手がよく、これからメインのエディタとして使っていけそうな感じでした。
慣れていたエディタを変えるのは決心がいりますが、今「Dreamweaver」を使っている人の導入のきっかけになれば、と。。
導入作業は5ステップ。各ステップで行う作業は下記の内容です。
Windows版、Mac版、Linux版があります。OSが違っても同じ作業環境を作れるので魅力的です。
sublime text2はメニューなど全て英語です。
日本語化ファイルを使うことで、一部日本語化できます。
（必須ではありません）
Windows版は、日本語をインライン入力できないので、対応できるようにします。
（Mac版の方は不要です）
「Sublime Text 2」にはパッケージと呼ばれる、プラグインのようなものがあります。
追加することで、HTML入力時の自動補完など機能追加をすることができます。
このステップでは、パッケージのインストールや管理を簡単に行うための、機能拡張を行っておきます。
パッケージをインストールして、機能追加を行います。
導入には下記の記事が参考になりました。
http://yuuki-arc.jugem.jp/?eid=35
http://tnnsst35.com/2012/12/13/sublime-text2%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/
http://lab.sonicmoov.com/markup/649/
パッケージは検索するとかなりの数あります。
「Dreamweaver」に近い使い勝手を求めるなら、下記のパッケージを入れておくと良いかと思います。
いつでも、追加できるので必要なパッケージから追加してみましょう。
「Sublime Text 2」を使ってみて、気づいたのは「Dreamweaver」には下記の良い点があることです。
最近は少なくなった作業ですが、テーブルやクリッカブルマップの修正が必要なときは「Dreamweaver」を使っています。
「デザインビュー」を使えるので、ソースコードだけを見ているより簡単に作業ができます。
さすが、高いソフトなだけのことはありますね。
また、余談ですが「vintage」モードを使うと、vimのような操作もできるらしです。
時間のある時にでも試してみようかと思いました。
http://phussa.net/index.html
こちらのサイトの作業をしています。トップページのニュース欄にYouTubeの動画をiflameタグで貼付けていました（これをAとします）。今回の依頼はトップページにUSTREAMを埋め込むという事ですので、配信停止中はクロスフェード画像表示にして埋め込みました（これをBとします）。YouTubeもUSTREAMも各サイトの自動埋め込みタグ生成機能を利用しました。
？？？？？？？？
ustreamを埋め込んだらAもBも、もともと最初にあったAが表示されました。２カ所同じものになってしまいました。あれれ？と思い、Aを削除してBだけにしました。そしたら今度はBの部分にはustreamが表示されるはずなのにAのYouTubeの内容が表示されています。
一回タブを閉じて新しいタブで開いたら直りました。
他のPCでも確認しました。ブックマークからサイトに入ると、やはりBにはA(YouTube)が表示されてました。タブを閉じて新しいタブでブックマークから入らずにアドレスを打ち込んで入ると直りました。（Bには、ちゃんとUSTREAMが表示された）
これは、どういう事がおきているのでしょうか？
１つのhtmlファイルにはiflameは１つしかいれられないのでしょうか？そんなわけないですよね。
どうぞよろしくお願いします。
2013-10-25の勉強会で、僕がタカハシ先生に質問をして解決した事の1つを説明します。
htmlタグをhtmlファイルに表示させたい場合は、このサイト(WordPress)だったら「crayon」というプラグインを使えばいいのですが、そういうシステムが無い場合の対処法です。
jQueryや自動生成サービスなどもありますが、ほんの数行なら自分でどうにかしたいものです。（例えば議事録に１行書きたいとか）
<section >
ほげほげ
</section >
上記の「<」と「>」は文字参照で表示させていて、htmlタグではないので<section >と表示されているわけです。
WPプラグインの「crayon」はそれを自動生成してくれているわけです。
サイト制作で、&とか©など使った事ありますよね。
文字参照でググるとたくさん出てきます。
2013-10-18 Friday 勉強会の議事録です。(part2) (part1 : slider css version)
kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。
タカハシ先生、ありがとうございました。
jQueryで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「jQuery ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。
>タカハシ先生
うまく動きません。いろいろやってみましたが出来ませんでした。明日の勉強会でもう一度お願いします。
2013-10-18 Friday 勉強会の議事録です。
kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。
CSSで実装するパターンとjQueryで実装するパターンをやりました。
タカハシ先生、ありがとうございました。
CSSで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。
http://nobu-69.com/others.html
「css3 ショッピングサイト等でみかけるスライドパネル 2013/10/23」をクリックして下さい。
jQueryバージョンは、近日中にアップ予定。
みなさん議事録を書くのをいやがる傾向にありますが、書く事により確実に理解度は増すのでとても自分の為になります。もし、議事録を書いている時に分からなくなってしまっても先生がサポートしてくれる（多分）ので心配ありません。WAVE時代にPALを見ながら勉強していて実際に課題制作になったら何も出来なかったという事が多々ありましたよね。そのことからも分かるように、勉強会に出たからといって教わった技術が絶対身に付くとは限りません。
タカハシ先生は、私たちの質問に常に答えてくれます。質問内容が先生の知らない事であれば調べたり調査したりして答えてくれています。先生はよくこんな事を言っています。
メンバーの質問に答えたり、議事録を書いたりすることは、もちろん他の人の為でもありますが、実は自分の為に一番なるのですよー。
国内のブラウザシェアについて知りたいのですが、確実な情報を得るにはどこのサイトで見るのがよいのでしょうか。個人のブログとかのサイトは出てくるのですが、正式？というか、確実な情報を発表している信頼のあるサイトを知っていたら教えてください。
例えばマイナビニュースはどうでしょうか？http://news.mynavi.jp/news/2013/09/02/066/
大学のコンピューターリテラシーという科目のレポートでブラウザについて考察しなさいというのがあって、それを書くのに参考資料として使います。あまり個人のブログ等での情報はNGになります。ちなみに大学（ムサビ）のレポートはwikipediaなどの三次資料はNGです。
正しい引用のルール（１）を参照して、引用を行ってみましょう。
引用部分をBLOCKQUOTEタグなどで囲み、引用であることを明示します。見た目の指定はCSSで設定します。
|
1 2 3 4 5 |
blockquote { border: 5px #ccc solid; border-radius: 1em; padding: 1em; margin: 1em 0; } |
|
1 |
<blockquote>～</blockquote> |
引用元をURIで示す（blockquote）
<blockquote>タグに cite=”” を追加すると、引用元を示すことができます。
<blockquote cite=”http://www.taglist.com/”></blockquote>
- cite=””
- 引用元がWebサイトの場合 … URLを指定
- 引用元が書籍の場合 … ISBN（図書コード）を指定
■ 引用元がWebサイトの場合
<blockquote cite=”http://www.taglist.com/”> ～ </blockquote>
■ 引用元が書籍サイトの場合
<blockquote cite=”urn:ISBN:0-0000-0000-0″> ～ </blockquote>
引用元：引用元をURIで示す
|
1 |
<q>～</q> |
|
1 |
<cite>～</cite> |
データファイルをローカルからサーバーに転送するのに今まではffftpフリーソフトを使用していました。（windows xp）
この度マック（Mountain Lion）にしたので、どうすればいいでしょうか？マックは初めてです。ffftpフリーソフトはwindows用のソフトウェアなんですよね？先ほど知りました。
FFFTPのように左右にローカルとサーバーが表示されているものが使い慣れてていいんですが。サーバーとか苦手なので、今までと似た感じが安心する。でも、今までと違くても簡単ならそれもアリかなあ。
調べたらFileZillaがffftpに似ててよさそう。http://www.marbee.info/2012/08/21/3268/
どう思いますか？
マックユーザーのみなさん
マックおすすめのフリーソフト教えてください。
お仕事で、あるお店のサイトリニューアルをしました。サーバー・ドメインは昔のままでということで。
そこで１つ問題があり、解決したのでメモしておきます。
これは、そんページないよ～！というロリポのデフォルトのページです。これでは、困ってしまいますよね。昔からのユーザーに「あれ～、サイトなくなっちゃったの？！」「何かあったのかな?!」と思われてしまいます。指定されたページ（ＵＲＬ）が見つから無い場合、「この度リニューアルしました！新しいサイトはこちらでーす！」と言った感じでリンクを貼ってあるページが表示されると親切＆安心ですよね。
２ステップで問題解決！
以上です。
参考サイトhttp://oxynotes.com/?p=159
この他にも、ロリポ404やredirect htaccess で検索するといろいろ出てきますよ。
タカハシ先生、ありがとうございました。
ちなみに制作したサイトはこれです。http://juicyeyes.com/
試しにhttp://juicyeyes.com/boyoboyo.htmlという、ありもしないアドレスを入力すると440.htmlが表示されます。
日本語と英語の２ヶ国語のホームページの更新をしていたら、日本語は問題なく表示されるのに、英語のページで文字があふれてしまいました。
日本語の文章は句読点や中点によって、語や文章の区切りを識別しますが、英語などの西洋語は語の区切りに空白を挟んで記述されるので、単語が羅列され空白がないときに文字があふれてしまうことがあります。
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/>タグを入れた方がよいかもしれません。
著作権や引用のルールは気を付けなければいけないことだと認識はあっても、その知識があいまいなまま、文章、イラスト、写真、音楽、映像などを引用していませんか？
いい機会なので、著作権についての知識を深め、著作権侵害とならないように、正しい引用のルールを身につけましょう。
下記引用の条件をクリアしていれば、許諾は不要です。正式に掲載したいものは、許諾申請をして許諾をもらいましょう。
文化庁 身近にある著作権～ビジネスパーソンのための基礎知識より。
引用の条件
ア. 既に公表されている著作物であること
イ. 「公正」な慣行に合致していること
ウ. 報道、批評、研究などの引用の目的上「正当な範囲内」であること
エ. 引用部分とそれ以外の部分の「主従関係」が明確なこと
オ. カギ括弧などにより、「引用部分」が明確になっていること
カ. 引用を行う「必然性」があること
キ. 「出所の明示」が必要（コピー以外はその慣行があるとき）
知っていますか？ 「引用」のルール
無料引用のルール
朝日新聞デジタル 著作権について
文化庁 身近にある著作権～ビジネスパーソンのための基礎知識（PDF)
文化庁 身近にある著作権～ビジネスパーソンのための基礎（映像）
文化庁 初めて学ぶ人のために 平成25年度
次回勉強会のリクエストです。
１、「てんてん」をcssでやる。タカハシ先生お願いします！
こういうの。
りんご・・・・・・・1,000円
オレンジ・・・・・・6,000円
なし・・・・・・・・・100円
２、ジェイコさんが制作中のぷりんサイトのグローバルメニューのcss3疑似要素の「ふわ～」と出てくるやつ教えて下さい。
ジェイコさんお願いします！
楽しみにしています。