月別アーカイブ: 2013年11月

2013-11-22の議事録

1件のフィードバック

2013-11-22の勉強会お休みしたので、どなたか議事録お願い致します。

どうぞよろしく。

ドロワーメニュー・css/jQ

コメントをどうぞ

2013-11-15 勉強会の議事録です。

cssでドロワーメニューをやりました。(jQuery versionもやりました。)

僕のサイトhttp://nobu-69.com/others.htmlに書きましたのでご覧下さい。
「cssでドロワーメニュー(jQuery versionもあるよ！) 2013/11/15」をクリックして下さい。

Drawer（ドロワー）とは机とかの引き出しという意味です。基本的には表示領域が小さいスマホ対策と言えると思いますが、PCサイトのように表示領域が大きい場合に、この仕組みを利用し遊び心として面白い演出をするのもアリだと思います。

続・cssで3D Box（立体図形）を作り、さらに回転させる。

3件の返信

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を指定すると表示画像の大きさが変わってしまうのはなぜですか？

cssで3D Box（立体図形）を作り、さらに回転させる。

1件のフィードバック

2013-11-08の勉強会でやった事をまとめました。

cssで3D Box（立体図形）を作り、さらに回転させる。
自分のサイトにまとめたので、興味のある方はご覧下さい。
アイデア次第で面白い事ができそうですよー。

http://nobu-69.com/others.html
上記のサイトに行きましたら”cssで3D BOXを作る。さらにhoverで回転。 2013/11/08″をクリックして下さい。

スマートフォン向け jQuery touch slide swipeで画像表示させる　その２（解決）

1件のフィードバック

前回質問したスマートフォン向け jQuery touch slide swipeで画像表示させるについて、ひとまず解決したので内容を書きます。

これは、カラーミーの商品詳細ページ（スマートフォンのテンプレート）で使用しました。
カラーミーはプランによって、商品詳細ページに掲載できる画像の枚数が決まっています。
私は４枚までのプランなので、今回は４枚の画像をスワイプさせました。
カラーミーショップは独自タグがあって画像を読み込む為に、if文？が使われています。
これがカスタマイズする時に、探し出すのが少し難しいのです。
今回は１枚目の画像とカラーミーのデフォルトで、<商品画像その他>とわかれている部分を４枚連続で表示できるようにhtmlを変更してます。そこに、下記のCSSを使用しました。CSSはコメントアウトしてる部分を変更しました。
※今回の大事な所
.deviceを100%
.swiper-containerにmax-width
他にも大事な指定はあると思いますが、ここが大事なのかな？と思います。
スマホを縦にした時は全体画像が見えて、画像の上に矢印が見えるようになります（矢印にz-indexを指定）。
横にスマホを回転した時は画像の大きさはそのままで、.deviceが100%になります。
画像の大きさを100％にすると横に回転した時に、商品の全体画像の一部が表示されて全体画像が見えないので、画像サイズは固定したほうが見やすいと思いました。
公開したページ（スマートフォン用）こちら　

html

<!--商品画像-->
<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>
<!--/商品画像-->

<{else}>

<{/if}></div>

<{/if}></div>

<{/if}></div>

<{/if}></div>

</div>

</div>

css

/* ===============================================================
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;
}

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とスマートフォン)をカスタマイズしていくつもりです。
また、宜しくお願いします!
ありがとうございまいた。

スマートフォン向け jQuery touch slide swipeで画像表示させる

3件の返信

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の事を考えて指定しなければいけないですよね？
雑ですみませんが、画像でまとめてみました。(~_~)

他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか？これだと、表示画像が小さくなりますよね？

宜しくお願いします。

Sublime Text 2を使ってみよう！

コメントをどうぞ

エディタのお話です。

これまで「Dreamweaver」や「Aptana Studio」を使いコーディングをしていました。
最近使ってみた「Sublime Text 2」は使い勝手がよく、これからメインのエディタとして使っていけそうな感じでした。

慣れていたエディタを変えるのは決心がいりますが、今「Dreamweaver」を使っている人の導入のきっかけになれば、と。。

導入手順

導入作業は5ステップ。各ステップで行う作業は下記の内容です。

1. 「Sublime Text 2」のダウンロード

Windows版、Mac版、Linux版があります。OSが違っても同じ作業環境を作れるので魅力的です。

2. メニューの日本語化

sublime text2はメニューなど全て英語です。
日本語化ファイルを使うことで、一部日本語化できます。
（必須ではありません）

3. 日本語インライン入力への対応

Windows版は、日本語をインライン入力できないので、対応できるようにします。
（Mac版の方は不要です）

4. パッケージをインストールするための準備

「Sublime Text 2」にはパッケージと呼ばれる、プラグインのようなものがあります。
追加することで、HTML入力時の自動補完など機能追加をすることができます。
このステップでは、パッケージのインストールや管理を簡単に行うための、機能拡張を行っておきます。

5. パッケージのインストール

パッケージをインストールして、機能追加を行います。

導入には下記の記事が参考になりました。
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に近い使い勝手にする

パッケージは検索するとかなりの数あります。
「Dreamweaver」に近い使い勝手を求めるなら、下記のパッケージを入れておくと良いかと思います。
いつでも、追加できるので必要なパッケージから追加してみましょう。

HTML5…HTMLの自動補完
CSS Snippets…CSSの自動保管
jQuery…jQuery の自動補完
SublimeLinter…HTML,CSS,JS のエラーをリアルタイムで指摘
Bracket Highlighter…タグの開始タグと閉じタグをハイライト表示
AutoFileName…imgタグのsrc属性を記述する際にディレクトリにある画像を相対パスで参照、width 属性と height 属性を自動入力

Dreamweaverの良いところ

「Sublime Text 2」を使ってみて、気づいたのは「Dreamweaver」には下記の良い点があることです。

table（テーブル）の作成と編集
クリッカブルマップの作成と編集
ファイルを移動するとリンクを自動修正

最近は少なくなった作業ですが、テーブルやクリッカブルマップの修正が必要なときは「Dreamweaver」を使っています。
「デザインビュー」を使えるので、ソースコードだけを見ているより簡単に作業ができます。
さすが、高いソフトなだけのことはありますね。

また、余談ですが「vintage」モードを使うと、vimのような操作もできるらしです。
時間のある時にでも試してみようかと思いました。

パソコン倶楽部りんご

Webデザイン脱初心者の勉強会

月別アーカイブ: 2013年11月

2013-11-22の議事録

ドロワーメニュー・css/jQ

続・cssで3D Box（立体図形）を作り、さらに回転させる。

cssで3D Box（立体図形）を作り、さらに回転させる。

スマートフォン向け jQuery touch slide swipeで画像表示させる　その２（解決）

スマートフォン向け jQuery touch slide swipeで画像表示させる

Sublime Text 2を使ってみよう！

導入手順

1. 「Sublime Text 2」のダウンロード

2. メニューの日本語化

3. 日本語インライン入力への対応

4. パッケージをインストールするための準備

5. パッケージのインストール

Dreamweaverに近い使い勝手にする

Dreamweaverの良いところ

月	火	水	木	金	土	日
« 10月				12月 »
				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