グッドデザイン賞を受賞したウォーターサーバー >>

始めまして。
レスポンシブデザインのホームページショップを構築中です。
笑い話かも知れませんがホームページビルダー15での制作です。
メインカラムでflexsliderの導入をテストしています。
現在はうまくサムネイル画像横4個の3段の12個表示で動いています。

ですが3段12個表示ではサムネイル画像が大き過ぎてスマホでは使い辛いのが現状です。
そこで質問ですが、そのサムネイル画像をメイン画像の幅一杯のサイズで
サムネイル画像2段で12個の表示の改良は出来るのでしょうか。
また、横一列で6個、8個と表示するにはどうすれば良いのでしょうか。
ネット検索では解答が見つからないので申し訳ありませんが質問させて頂きました。

具体的な方が良いかと思いURLを表示させて頂きます。
素人ですがネット検索と勉強でレスポンシブショップを構築中です。

試験ページ
http://www.waterplanet.jp/zzzzzflexslider.html

flexslider.css スタイルシート
http://www.waterplanet.jp/style/flexslider.css

.js ファイルです。
http://www.waterplanet.jp/style/jquery.flexslide …

スライダーは今現在はサムネイル画像12枚3段で上手く動いています。
クローム、サファリ、IEにもレスポンシブ対応できています。
これを一段に6枚、2段で12枚のサムネイル画像にしたく思います。
また、一段だけで8枚のサムネイル表示をお教え頂ければ幸いです。
どうしても解決できずに悩み切っております。
ご教示頂けましたら幸いです。
どうか宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

2段6列にする場合、下記のCSSを追加することで変更できます。


.flex-control-thumbs li {
width: 16.66%;
width: -webkit-calc(100% / 6);
width: calc( 100% / 6);
}

calc()はCSSの中で計算ができるプロパティで、
IE9以降などのモダンブラウザであればだいたい対応しています。
ですので( 100% / ◆列数◆ )に書き換えてもらうと8枚や12枚なども対応できます。
もっとも、旧ブラウザ向けに計算結果(例では16.66%)を書いておく必要がありますが。
    • good
    • 1

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qリンク先のpdf をwebブラウザで開きたい

あるグループのWEBページを管理していて、リンク先に指定したpdfファイルをブラウザで表示したいと思っています。ところが、自分のパソコン上ではブラウザ上にpdfファイルが表示できるのですが、WEBサイトに上げると、「ダウンロード」になってしまいます。
ブラウザはIEとChromeを使っています。
状況をもう少し詳しく述べますと、
PC上では   IE Chrome 共にブラウザ上で開く
Web 上では  IE : ・ 開く(=アドビリーダーが起動しそこで開く) ・保存   の二択
       Chrome: “ダウンロード”フォルダーに保存される
なお、jpg ファイルはhtmlファイル同じくブラウザ上に開きます。
ソースはリンク先がhtmlファイルの場合と同様に、<a href="aaa.pdf">AAA</a>  としています。
Windows2007、 IE11、 Chrome33 です

念のため追記します。
私以外のwebページ閲覧者のwebブラウザ上でpdfファイルが開くようにしたいのです。そのためのソースの書方、あるいはwebブラウザの設定など教えてください。

あるグループのWEBページを管理していて、リンク先に指定したpdfファイルをブラウザで表示したいと思っています。ところが、自分のパソコン上ではブラウザ上にpdfファイルが表示できるのですが、WEBサイトに上げると、「ダウンロード」になってしまいます。
ブラウザはIEとChromeを使っています。
状況をもう少し詳しく述べますと、
PC上では   IE Chrome 共にブラウザ上で開く
Web 上では  IE : ・ 開く(=アドビリーダーが起動しそこで開く) ・保存   の二択
       Chrome: “ダウンロー...続きを読む

Aベストアンサー

おそらく、Webサーバーにおいて、 *.pdf に対する、mime type が設定されていないことによるものだと思います。
ブラウザの設定によるものでは無いでしょう。(一般の企業ページなどで、PDFファイルを直接開けますよね?)

とりあえず、メモ帳などで次の「.htaccess」ファイルを作って、pdfファイルと同じフォルダに、置いてみてください。

.htaccess
--------
AddType application/pdf .pdf
--------

これが設定されていると、Webサーバから*.pdfファイルを送信する際に、

Content-type: application/pdf

という行が追加され、「これから送るデータはPDFファイルだ」とブラウザに明示することになります。
この行を見て、ブラウザは、pdfプラグイン等を起動し、ブラウザ内でPDFの直接表示ができます。

上記のmime type 設定がなされていないと、httpヘッダには以下のような行が入ります。

Content-type: application/octet-stream

すなわち、PDFではなくただのバイナリデータ列だ、というような記述がなされてしまい、ダウンロードや、外部プログラムの起動というパターンになってしまいます。

本当は、Webサーバのどこに置いてもmime type が有効になるように、httpd.conf の方を修正したいところなんですが、それは大本のWebサーバ設定ファイルですので、サーバ管理者でないといじれないかもしれません。

また逆に、Webサーバ設定がGUIでできるようになっている場合、「mime typeの設定」というようなメニューで、「pdf」に対する「application/pdf」を追加してあげると良いでしょう。

おそらく、Webサーバーにおいて、 *.pdf に対する、mime type が設定されていないことによるものだと思います。
ブラウザの設定によるものでは無いでしょう。(一般の企業ページなどで、PDFファイルを直接開けますよね?)

とりあえず、メモ帳などで次の「.htaccess」ファイルを作って、pdfファイルと同じフォルダに、置いてみてください。

.htaccess
--------
AddType application/pdf .pdf
--------

これが設定されていると、Webサーバから*.pdfファイルを送信する際に、

Content-type: application/pdf

とい...続きを読む

Q「jQuery」アコーディオンメニューがうまく動きません

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodomo">
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
<li><a href="BB.html">リンクBB</a></li>
</ul>
</li>
</ul>


■希望する動き
普通のアコーディオンの動きで特殊なものでは無いと思うのですが、念のため。

・初期状態は<ul class="kodomo">が非表示。
・<li class="oya"><a href="A.html">リンクA</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
<li><a href="">リンクAA.html</a></li>
</ul>
・<li class="oya"><a href="B.html">リンクB</a>をクリックで以下を開閉。
<ul class="kodomo">
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
<li><a href="">リンクBB.html</a></li>
</ul>

.oyaである
<a href="A.html">リンクA</a><a href="B.html">リンクB</a>クリックの際の動きは下記のどちらでも構いません。
↓↓↓どちらでもいいです↓↓↓
「A.html、B.htmlに飛ぶ。同時にアコーディオンも開く」
「A.html、B.htmlには飛ばず、アコーディオンのみ開く」
※A.html、B.htmlにも同じアコーディオンナビゲーションを設置しています。

そもそもA.html、B.htmlリンクが邪魔なのかもしれませんが、CMSを使用しているため外すことができません。


【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});

※アコーディオンが開いた瞬間に閉じてしまいます。
ちなみに'li.oya a'→'li.oya'にすると.nextが効かなくなりアコーディオンが開かなくなります。


【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

※パターン1に「return false;」を追加しました。
アコーディオンを開閉できるようになりましたが、
ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>が効かなくなってしまいました。


[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});

※パターン3より「li.oya a」→「li.oya」
「.next」→「.find」に変更。
アコーディオンは開閉します。
ただ、ul.kodomo配下の<a href="">リンクAA.html</a><a href="">リンクBB.html</a>をクリックすると該当ページには飛ばず、アコーディオンが閉じてしまいます。

なんだか良くわからなくなってきてしまいました。
ちなみに他のJQuery記述はすべて削除の上、確認、
全体はjQuery(function(){ });で囲っています。

ごくごく初歩的な部分でつまづいているのだとは思いますが、
何卒賢者のお力を。

jQuery初心者です。
ホームページのサイドカラムにアコーディオンメニューを作ろうとしているのですが、
上手く動作しないためお力を貸していただけると助かります。


jQueryバージョン:2.1.3

■HTML
<ul>
<li class="oya"><a href="A.html">リンクA</a>
<ul class="kodomo">
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
<li><a href="AA.html">リンクAA</a></li>
</ul>
</li>
<li class="oya"><a href="B.html">リンクB</a>
<ul class="kodom...続きを読む

Aベストアンサー

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応にはタグの変更が必要(TARGET="_blank")を入れるなど。
※'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
next('ul.kodomo')が見つけられない

【失敗したパターン2】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});
'li.oya a'→'li.oya'にした場合は「li.oyaの子孫の全てのa」にクリックイベントが不可されるので
アコーディオンの子要素のaタグにもクリックイベントが付加されていため。
※'li.oya a'→'li.oya > a'にすると「li.oyaの子のa」に限定されるので希望している動きになります。

[失敗したパターン3]
$(function(){
$('ul.kodomo').hide();
$('li.oya').on("click", function() {
$(this).find('ul.kodomo').slideToggle();
return false;
});
});
これは'li.oya'のタグがクリックされた時(子孫の要素も含む)
'li.oya'の子孫から'ul.kodomo'を探し出し、slideToggleを行い、
return falseする(ページ移動をキャンセル)
という処理になっています。

パターン2に少し手を加えれば動きます。
'li.oya a'→'li.oya > a'

$(function(){
$('ul.kodomo').hide();
$('li.oya > a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
return false;
});
});

一つずつ解説します。

【失敗したパターン1】
$(function(){
$('ul.kodomo').hide();
$('li.oya a').on("click", function() {
$(this).next('ul.kodomo').slideToggle();
});
});
リンクが効いてしまうのでページ移動(=アコーディオンが開いた瞬間に閉じる)
対応...続きを読む


人気Q&Aランキング