複数の画像を横にスクロールさせる方法について
こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるのはどのようにすればいいのでしょうか。できれば、CSSとhtmlのタグを教えていただければうれしく思います。
また、横についているボタンだけにするとか、下のスクロール部分だけにするとかも教えて下さい。
よろしくお願いいたします。

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

A 回答 (2件)

NO.1番の回答者です。

 追記。

NO.1では画像がで落ちるのでわかんないですね・・・

<div style="overflow:auto; width: 600px; height: 200px;">
<div style="width: 2000px;">
<img><img><img><img><img><img><img><img><img>
</div>
</div>

これを表示したら理解出来ると思いますが。
<img>は実際の画像を利用してね。

この回答への補足

ご回答ありがとうございます。ちゃんと理解できました。ちなみに、ボタンのJavascriptはどのようにすればできるのでしょうか。扱ったことがないので、わかりやすく教えていただければ助かります。よろしくお願いします。

補足日時:2010/08/13 18:21
    • good
    • 1

簡単に言えば、



<div style="overflow:auto; width: 600px; height: 200px;">
<img><img><img><img><img><img><img><img><img>
</div>

こんな感じ。

ボタンは、javascript

そのサイトは、そのdiv内にテーブルとリストで画像枠を組んでるけどね。
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

Q複数の画像を横にスクロールさせるボタンについて

複数の画像を横にスクロールさせるボタンについて

こちらのサイト(www.japanican.com/index.aspx)の下のほうのFeaturesにあるような複数の画像を横にスクロールさせるボタンはどのようにすればできますか。Javascriptは扱ったことがないのでわかりやすく教えていただければ助かります。よろしくお願いいたします。

Aベストアンサー

複数の画像を横にスクロールさせる方法は様々なパターンがありますが、
ご提示のサイトでは、スクロールさせたい<DIV>にidを付けて、その<div>内に
(一部略)
<div id="tSContScroll">
<table><tbody><tr><td>画像</td><td>画像</td><td>画像</td>...</tr></tbody></table>
</div>

のように<table>を配置し、<td>にサブネール画像<img>とリンク<a>を配置してますね。

ボタンは、画像で付くって、onclickイベントで、スクロールする対象と、スクロール量
を関数に渡すようにして、CSSで<div>の左右に回り込ませているようです。
(一部略)
<ul>
<li class="left">
<a onclick="pictureScrollLeft('tSContScroll', 169);return false;" ....>
<img src="slider_arr_l.gif" ....></a>
</li>
<li class="right">
<a onclick="pictureScrollRight('tSContScroll', 169);return false;" ....>
<img src="slider_arr_r.gif" ....></a>
</li>
</ul>

javascriptのスクロールさせる関数部分は、

<script tye="text/javascript">
function pictureScrollLeft(idname, size) {
var nowX = document.getElementById(idname).scrollLeft;
if (nowX <= size) {
document.getElementById(idname).scrollLeft = 0;
} else {
document.getElementById(idname).scrollLeft = nowX - size;
}
}

function pictureScrollRight(idname, size) {
var nowX = document.getElementById(idname).scrollLeft;

if (nowX > document.getElementById(idname).width - (size * 2)) {
document.getElementById(idname).scrollLeft = document.getElementById(idname).width - size;
} else {
document.getElementById(idname).scrollLeft = nowX + size;
}
}
</script>
となってますね。

後は、CSSで見栄えを調整しているといったところです。

他にも画像スクロールのjavascriptライブラリーは、たくさんあります。

例えば、jQueryベースですが、

「jCarousel Lite」
http://gmarwaha.com/jquery/jcarousellite/index.php#demo

「jCarousel」
http://sorgalla.com/jcarousel/

等など...

複数の画像を横にスクロールさせる方法は様々なパターンがありますが、
ご提示のサイトでは、スクロールさせたい<DIV>にidを付けて、その<div>内に
(一部略)
<div id="tSContScroll">
<table><tbody><tr><td>画像</td><td>画像</td><td>画像</td>...</tr></tbody></table>
</div>

のように<table>を配置し、<td>にサブネール画像<img>とリンク<a>を配置してますね。

ボタンは、画像で付くって、onclickイベントで、スクロールする対象と、スクロール量
を関数に渡すようにして、CSSで<div>の左右に回り込ませ...続きを読む

Qホームページで画像を横に並べるには?

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

Q横スクロールのWebページを作りたい

http://tympanus.net/Tutorials/WebsiteScrolling/

こちらのような、横にスライドするWebページを作ろうと思っています。
超横長な1ページを作って、スクロールで見える範囲を設定するという想像は出来ます。
このように、超横長な1ページはどのように作ればいいのでしょうか?
普通でしたら、Photoshop等でモックアップを作り、スライスしていくのが一般的ですが
仮にこのサイトの大きさが8000pxだとすると、とんでもなくデザインしにくそうです…

それと、仮にこのようなページを作る場合、慣れた人ならどのような手順で作っていきますか?


回答よろしくお願いします。
※スクロールのアニメーション自体はjQueryでできることは知っているので大丈夫です。

Aベストアンサー

floatを使う場合は
それを囲む外側の要素に、内包するfloatさせたい要素全部が横並びするだけのwidthを指定しておかないと、ウインドウの端で折り返されます。

body{width:12000px;}

QHTMLで画像のスライドショーを行うには?

いつもお世話になっております。
今HPを作成しております。TOPページのある部分に画像をスライドさせて表示させたいと考えております。
今からFlashを勉強するには時間がありません。
Javaサーブレット、Javaスクリプトで可能でしょうか?またそういったHTMLを書き出すツールはございますでしょうか?

ただし、Javaアプレットは除きます。
(なぜなら、契約している専用サーバが未対応のため)

よろしくお願い致します。

Aベストアンサー

JavaScriptで可能です。

参考URLは、よく利用させていただいてるHPです。
画面右の枠「Samples」の【2】ブラウザ属性に制御方法のサンプルがあります。

参考URL:http://www.usagi-js.com/index.htm

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像を縦に4つ並べたい場合

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。(brは使いたくありません)

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

Aベストアンサー

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="画像ファイル.jpg" /></p>
>↑これを4つ書いています。

 とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】____________ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )]より

 前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★4項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
 結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
 すなわち
<div class="section"><!-- 本文を示すclass名 -->
 <div class="section" id="section1">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section2">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section3">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section4">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div id="contentTable">
  <ol>
   <li><a href="section1">セクション1</a></li>
   <li><a href="section2">セクション2</a></li>
   <li><a href="section3">セクション3</a></li>
   <li><a href="section4">セクション4</a></li>
  </ol>
 </div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

 1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="...続きを読む

Q横スクロールバーを表示したい

スクロールバーの色を変更するために下記のタグを埋め込んだ所、
今まで表示されていた横スクロールバーが消えてしまいました。
横スクロールさせないと見えない部分があるので、ぜひ表示させたいです。
どうか教えてください!

Win98se・IE6
HPビルダーでどこでも配置モードを利用しています。

<STYLE type="text/css"><!--body {scrollbar-face-color:#ffffff;
scrollbar-track-color:#ffffff; scrollbar-arrow-color:#C0C0C0;
scrollbar-highlight-color:#808080; scrollbar-shadow-color:#C0C0C0;
scrollbar-3dlight-color:#ffffff;
scrollbar-darkshadow-color:#ffffff;
overflow-x : hidden ;} -->
</STYLE>

Aベストアンサー

overflow-x : hidden ;

横スク出しちゃいやん、の印(笑)

overflow-x : auto;
横スク出るなら出てしまえ。

overflow-x : scroll ;
横スク必ず出してやる!

この行がない場合はoverflow-x : auto;と同じ意味です。
・・・言うてもIE互換モードだけだけどー。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報