2013/11/08′′をクリックして下さい。swipeで画像表示させるについて、ひとまず解決したので内容を書きます。これは、カラーミーの商品詳細ページ(スマートフォンのテンプレート)で使用しました。カラーミーはプランによって、商品詳細ページに掲載できる画像の枚数が決まっています。私は4枚までのプランなので、今回は4枚の画像をスワイプさせました。カラーミーショップは独自タグがあって画像を読み込む為に、if文?が使われています。これがカスタマイズする時に、探し出すのが少し難しいのです。今回は1枚目の画像とカラーミーのデフォルトで、とわかれている部分を4枚連続で表示できるようにhtmlを変更してます。そこに、下記のCSSを使用しました。CSSはコメントアウトしてる部分を変更しました。※今回の大事な所.deviceを100%.swiper-containerにmax-width他にも大事な指定はあると思いますが、ここが大事なのかな?と思います。スマホを縦にした時は全体画像が見えて、画像の上に矢印が見えるようになります(矢印にz-indexを指定)。横にスマホを回転した時は画像の大きさはそのままで、.deviceが100%になります。画像の大きさを100%にすると横に回転した時に、商品の全体画像の一部が表示されて全体画像が見えないので、画像サイズは固定したほうが見やすいと思いました。#fff;}こんなに長くなりましたが、まとめてみました。足りない所があると思います。これからも、カラーミーショップのテンプレート(PCとスマートフォン)をカスタマイズしていくつもりです。お願いします!ありがとうございまいた。swipeで画像表示させる3件の返信Android、iphone、ipadなどで、スワイプ(フリック)操作による画像切り替えをしたいです。Panel真中さんのサイトを参考に、jQuery本体を読み込む方法をやりました。carouselスワイプの参考サイトはhttp://www.idangero.us/sliders/swiper/demos.phpDemosのDefaultを参考にしています。スワイプ(フリック)操作による画像切り替えをするまではできました。作業中のページは商品詳細ページできれば、スマホで見て下さい。画像を読み込んだのですが、画像サイズの指定がうまくいきません。画像をきちんと表示させるには、%で指定するのでしょうか?CSSの問題ですよね?その場合、paddingやmarginの事を考えて指定しなければいけないですよね?雑ですみませんが、画像でまとめてみました。(~_~)他のサイトを色々見て、スマホを横にした時に表示範囲で画面に均等に画像が表示されるのも良いと思ったのですが、どうでしょうか?これだと、表示画像が小さくなりますよね?宜しくお願いします。kanedaさんのリクエストで、ショッピングサイト等でみかけるスライドパネルについてやりました。CSSで実装するパターンとjQueryで実装するパターンをやりました。タカハシ先生、ありがとうございました。CSSで実装するパターンを自分のサイトにアップしたので、興味のある方はご覧下さい。2013/10/23」をクリックして下さい。jQueryバージョンは、近日中にアップ予定。yourselfみなさん議事録を書くのをいやがる傾向にありますが、書く事により確実に理解度は増すのでとても自分の為になります。議事録を書いている時に分からなくなってしまっても先生がサポートしてくれる(多分)ので心配ありません。WAVE時代にPALを見ながら勉強していて実際に課題制作になったら何も出来なかったという事が多々ありましたよね。そのことからも分かるように、勉強会に出たからといって教わった技術が絶対身に付くとは限りません。タカハシ先生は、私たちの質問に常に答えてくれます。質問内容が先生の知らない事であれば調べたり調査したりして答えてくれています。先生はよくこんな事を言っています。「パソコン倶楽部りんごが始まって一番勉強になってるのは私だと思う。」メンバーの質問に答えたり、議事録を書いたりすることは、もちろん他の人の為でもありますが、実は自分の為に一番なるのですよー。真中のぶ英語のページで文字があふれた時、単語の途中で改行させる方法コメントをどうぞ日本語と英語の2ヶ国語のホームページの更新をしていたら、日本語は問題なく表示されるのに、英語のページで文字があふれてしまいました。日本語の文章は句読点や中点によって、語や文章の区切りを識別しますが、英語などの西洋語は語の区切りに空白を挟んで記述されるので、単語が羅列され空白がないときに文字があふれてしまうことがあります。行の改行方法を指定する(値:break-all)word-breakプロパティで指定できる値には、normal・keep-all・loose・break-strict・break-allがあります。キーワードによってCJK(ハングル、日本語のカナ、および、CJK表意文字)と非CJKにおける改行制限の厳格さの程度を指定することができます。ちなみに、CJKとは、中国語(Chinese)、日本語(Japanese)、韓国語(Korean)の頭文字をとったものです。word-break-CSS3リファレンス初期値はnormalでCJKは厳格に改行制限されるため、日本語はあふれることがありません。単語の途中で改行するかどうかを指定する(値:break-word)改行しない文字列が長すぎて行ボックスに収まらないとき、通常は文字列がボックスからはみ出して表示されます。このような場合、word-wrapプロパティの値にbreak-wordを指定すると、単語内で改行してボックスからのオーバーフロー(はみ出し)を防ぐことができます。word-wrap-CSS3リファレンスワープロソフトなどで、行末に長い単語が来るなどして単語を2行に分ける必要が生じたときに行われる、単語の前半と後半をハイフンで繋ぐ機能。欧文で使われる機能である。どこで切ってもよいわけではなく、単語中の音節の区切りでハイフネーションを行うことになっている。ハイフネーションを続けて行うと読みにくくなるため、3行以上連続してハイフネーションを行うのは望ましくないとされている。正しい位置で改行するためには、改行したい位置に<br/>タグを入れた方がよいかもしれません。animation)コメントをどうぞcss3でパラパラアニメを作る方法をご紹介します。}サイトのメニューのホバーをふわ~っとさせて、かわいくするにあたってのの注意点。(2013-09-06勉強会・制作中のサイトを先生に見てもらったらアドバイスを頂いたのでメモしておきます。)上の3つと下の3つの違いわかりますか?上3つはホバーした時の「ほわ~」が遅いのでユーザーが少々いらいらするかも。下3つはちょっと速くしたのでいらいらしない。カーソルを外した時に上段は「ぱっ」ともとに戻るのでかわいくない。下段は「ほわ~」っと戻るのでかわいい。戻るのはゆっくりでもいらいらしない。(と思う)醤油ラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしないでしょ。かつ丼を注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。みそラーメンを注文して出てくるのが遅いといらいらするけど、食べ終わってどんぶり下げるのが遅くてもいらいらしない。真中のぶCSS3でロングシャドーデザインのアイコンを作る4件の返信8/23日の勉強会でのicomoonの続きです。今回は自分で作った画像をicomoonを使ってアイコンフォントにしてみます。目次イラストレーターでアイコンを作るアイコン画像をSVGファイル形式で書き出すicomoonに画像をupするサイトに実装してみる更に!アイコンをCSS3で流行りのロングシャドーデザインに変えてみる1.イラストレーターでアイコンを作る形はなるべく単純に、隙間などは広めにとります。時々縮小してみてバランスを確認します。私は300px×300pxでこんなのを作ってみました。画像や文字を半透明にするには、今まではpngで書き出してましたが、それらはcss3で出来るようになりました。</section>1234<section><h1>見出し</h1><p>テキスト</p></section>sectionに背景#fffでopacity:0.4にするとこうなる。sectionの中にあるhlとか画像とか全部が半透明。勉強会コメントをどうぞ勉強会の概要です。フラットデザインって何?フラットデザインに有効利用したいcssを行いました。平面的:ドロップシャドウなどの3次元的な処理はしないミニマルな表現。構成され、角丸もグラデーションもほとんど使わない。カラフルな色使いタイポグラフィーを重視ということ。見た目だけなら、似たデザインはありました。タカハシ先生css3で簡単横並びレスポンシヴデザイン1件のフィードバック2013-06-14の勉強会で、やりました。width:calcとsizing:border-boxという新しいものであります。100%を3で割って10px引くという意味。*(かける)も使える。演算子の前後は、必ず半角あける。borderの幅、paddingの幅もwidthのうちに入れてくれる。--------100%を3で割って10px引くという意味。*(かける)も使える。演算子の前後は、必ず半角あける。--------borderの幅、paddingの幅もwidthのうちに入れてくれる。*/僕のサイトにサンプルと説明をアップしました。DESIGNERの集まりです。ヘッダー画像をトップページにだけ表示させたい。