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

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

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

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

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

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

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

css3-3D-Box

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

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

css3-3D-Box

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

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

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

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

swipe3

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

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

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

html

css

こんなに長くなりましたが、まとめてみました。
足りない所があると思います。
まだまだこれからも、カラーミーショップのテンプレート(PCとスマートフォン)をカスタマイズしていくつもりです。
また、宜しくお願いします!
ありがとうございまいた。

swipe

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

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のような操作もできるらしです。
時間のある時にでも試してみようかと思いました。