MicrosoftのHPでスライドするflashとスライドバーナーの違いと設定方法
- MicrosoftのHPでスライドするflashとスライドバーナーの違いとは何でしょうか？また、スライドバーナーの滑らかできれいな動きを実現するための設定方法を教えてください。
- MicrosoftのHPにはスライドするflashがありますが、別のサイトのスライドバーナーはどのような方法で動いているのでしょうか？特に、スライドバーナーの滑らかな動きを実現するためのCSSの設定方法について教えてください。
- MicrosoftのHPでスライドするflashとスライドバーナーの違いを教えてください。また、スライドバーナーの滑らかな動きを実現するためのCSSの設定方法について教えてください。
- ベストアンサー
Microsoftよりきれいにみえる
Microsoftよりきれいにみえる 最近、↓MicrosoftのHP http://www.microsoft.com/ja/jp/default.aspx にもある、スライドするflashを時々別のサイトでもみかけます。 しかし、次のＨＰ http://kk-online.jp/ にある、スライドバーナーというのでしょうか、flashとはまた別の方法で、 ものすごく滑らかで、きれいに動きます。 失礼ながら、ソースとＣＳＳをのぞいてみても、あまりＣＳＳを詳しくないので理解できませんでした。 ＣＳＳの .sm {list-style:none; width:595px; height:200px; display:block; overflow:hidden} この部分だと思うのですが・・・ どのように設定しているのか、ご存知の方がいましたら詳しく教えてください。 特に、「どのようにすれば左、右に動くのか」、「overflowだけでできるのか」という点です。
- kazumanabu
- お礼率25% (1/4)
- Flash
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Flash板なんで板違いですが 例えばTween.jsなんかググってみるといいかもです Tween.jsはFlashのTweenクラスを模倣したjavascriptで FlashのTweenクラスを使い慣れてるととっつきやすいです 基本はjavascriptでstyleをいじくる形で動かす感じですね 上げられてるページでも外部のjavascript使ってるみたいです もしかしたらslidemenu.jsを調べると配布のjavascriptが 出てきちゃったりするかもしれませんよ
関連するQ&A
- ブログを３カラム右右から左右両サイドにしたい。
現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }
- ベストアンサー
- HTML
- text フォームに背景を設定した時の挙動
<input type="text"> に、CSS による背景をつけました（ただの段差が付いた白い領域、というのを変更したかった）。CSS は次の通り。 .myinputtext { height: 15px; width: 57px; background-image: url(/Resource/inputtext.png); background-repeat: no-repeat; font-size: 9px; margin: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 2px; overflow: hidden; } 外観は望みどおりのものが出来たのですが、背景画像以上に幅を取る文字数を入力すると、その入力欄（背景の画像）を超えて文字が入力されてしまいます。overflow をhidden にしても回避できません。 幅を超える文字数入力があったときに、なんとかデフォルトの text input と同様に文字だけをスクロールさせたいのですが、何かうまい方法はあるでしょうか。
- ベストアンサー
- CSS
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- CSSでa要素全体をリンク出来るようにしたいのですが
CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。（文字の上にマウスを当てると全体の色は変わったりするのですが。） 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。
- ベストアンサー
- HTML
- swfをoverflow: hiddenできない
HTMLカテゴリに登録しましたが、CSSの質問です。 divタグの大きさをCSSでwidthとheightで指定し、overflow: hiddenの設定をしました。 ここでdivタグ内に文書を書き、それがCSSで指定したdivタグのサイズ（範囲）を超えてしまった場合、はみ出た部分はoverflow: hiddenにより見えなくなります。 画像でも同様だったのですが、何故かFlash（swfデータ）はIE以外のブラウザ（NN、Firefox、Operaなど）で見たところ、overflowが効いていません。隠したい部分も見えてしまいます。なぜなのでしょうか？ ソースは以下になります。 <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/xhtml1/xhtml1-transitional/"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- #clip { border: 1px solid blue; width: 500px; height: 100px; overflow: hidden; } //--> </style> <title></title> </head> <body> <div id="clip"> <embed src="flash.swf" width="500" height="250" /> </div> </body> </html> お分かりのように、本来はheight=250pxのswfをheight=100px分だけ表示したいのです。
- ベストアンサー
- HTML
- CSSでインラインフレームを非表示にしたい
初心者です。 いろいろ試したのですがうまくいかないので教えてください。 複数のインラインフレームのレイアウトを、スタイルシートで一括管理したいのですが、 たとえば、 <iframe class="free" src="http://www.***" scrolling="no" frameborder="no"></iframe> <iframe class="only" src="http://www.***" scrolling="no" frameborder="no"></iframe> <iframe class="link" src="http://www.***" scrolling="no" frameborder="no"></iframe> と縦に並んでいるインラインフレームをｈｔｍｌは変更せずに、 真ん中の「only」だけ隠すことはできませんか？ スペースが空かずにfreeとlinkだけが並んでいる状態にしたいです。 宜しくお願いします。 .free { width:450; height:760; border:none; margin: 0px; overflow: hidden; } .only { width:450; height:680; border:none; margin: 0px; overflow: hidden; } .link { width:450; height:680; border:none; margin: 0px; overflow: hidden; }
- ベストアンサー
- CSS
- ワードプレスのwelcartカートボタン
こんにちは ワードプレスにwelcartを設置しています。 カートボタンをカスタマイズしたいと考えています。 CSSに @charset "utf-8"; /* CSS Document */ .skubutton{ background-image:"http:/画像" background-repeat: no-repeat; width: 443px; height: 108px; padding: 0px; margin: 0px; border:none; cursor:pointer; overflow:hidden; display: block; } を記述しました。 画像のようなカートの状態になっています。 カートのサイズは変更されましたが、画像が表示されません。 画像を表示するにはどのように記述を変更すればよいでしょうか？
- 締切済み
- CSS
- コンテンツの高さに合わせた縦線を引きたい
コンテンツ部分の高さに合わせた縦線を引きたいのですが、どうも上手く実現する 方法が思い浮かびません。 コンテンツは表示するページによって高さが異なります。 CSSを利用することは何ら問題ありませんが、JavaScriptでwindow.load()イベントなどで 記述するのはちょっと避けたいです。 あくまでレイアウトということで・・・。 今縦線はこんな感じで作られてます。 #splitter {width:0px; height:485px; border:solid 2px #e5ecf9;overflow:hidden; border-top:none; border-bottom:none; background:#e5ecf9; float:left; margin-right:10px} <div id="splitter"></div> divだと無理なんでしょうか・・・？ ご教示下さい。
- 締切済み
- HTML
- css IE7でスクロールすると背景が消えてしまう・・
IE7でスクロールすると背景が消えてしまうのですが、何か解決法はありませんでしょうか？IE6とFirefoxでは問題ありません。検索して、いろいろ試してみたのですが、ダメでした。 該当のCSSはこんな感じです。 #MVP { display:table; overflow:none; z-index:4; line-height:19px; height:100%; text-align:left; padding:0px 20px 0px 20px; margin-top:0px; margin-bottom:0px; margin-left:auto; margin-right:auto; width:500px; background:url(http://hime-blog.jp/img/backtable.png); } * html #MVP { width:540px; background-image:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://hime-blog.jp/img/backtable.png',sizingMethod='scale'); } *:first-child+html #MVP { } 設置ページは http://hime-blog.jp/MVP/ になります。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- スライドショー画像がズレて表示されてしまいます…
jQuery とcssなどを使用し、TOPページでスライドショーを 表示させたいと考えています。 必要なccsファイル、jsファイル、htmlファイルや画像ファイルは サーバーにアップ済で、TOPページの他部分は予定通りに 表示できていますが、参照画像のようにスライドショーの画像が 右半分のみスペースにズレて表示されてしまい、左半分は何も 表示されていない状態となってしまいます。 ただ、PCによって表示状態が異なるようで、問題なくスライドショーが 表示されているＰＣもあります。 上記スライドショーのcss部分は、以下の通りです。 -------------------------------------------------------- /* .viewer ------------------------- */ .viewer { margin-top: 10px; margin-bottom: 0px; margin-left: 20px; width: 790px; height: 500px; position: absolute; overflow: hidden; } .viewer ul { width: 100%; overflow: hidden; position: absolute; } .viewer ul li { top: 0; left: 0; width: 100%; height: 500px; position: absolute; } .viewer ul li img { width: 750px; height: 500px; } /* sideNavi ------------------------- */ .viewer .btnPrev, .viewer .btnNext { margin-top: -25px; top: 50%; width: 50px; height: 50px; position: absolute; z-index: 100; } .viewer .btnPrev { left: 10px; background: #ccc url(../images/top-page/btnPrev.jpg) no-repeat center center; } .viewer .btnNext { right: 10px; background: #ccc url(../images/top-page/btnNext.jpg) no-repeat center center; } /* ======================================= ClearFixElements ======================================= */ .viewer ul:after { content: "."; height: 0; clear: both; display: block; visibility: hidden; } .viewer ul { display: inline-block; overflow: hidden; } -------------------------------------------------------- ズレた状態をなくし、どのＰＣで閲覧しても 正常に表示されるようにするには、どこを修正すれば良いか どなたか教えて下さい！ よろしくお願い致します。
- 締切済み
- CSS
