CSS3を使用する必要性
- CSS3を使用することで、カルーセルなどの時間設定などが可能になる可能性があります。
- CSS3の機能を使うことで、より洗練されたデザインやアニメーション効果が実現できます。
- CSS3はモダンなウェブデザインに必要不可欠な要素であり、積極的に活用するべきです。
- ベストアンサー
ｃｓｓ3にしないといけないのでしょうか
<!-- $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ color:"#00ffff" }, 1500 ); }); }); --> </script> </head> <body> <div id="s1"> <p>あいうえお</p> </div> </body> プログラムはできているんですが、例えば カルーセルなどの時間設定はもしかするとcss3でないとできないのではないでしょうか？
- yonbakukan
- お礼率7% (11/148)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
javascriptでも良いですが、javascriptが無効にしている場合は当然動作しません。CSS3だとCSS3に対応していないブラウザでは無効です。 スタイルシートではidはあまり使わなくてできるので簡単・・
関連するQ&A
- jquaryについて質問2
<script type="text/javascript"> <!-- $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ color:"#00ffff" }, 1500 ); }); }); --> </script> </head> <body> <div id="s1"> <p>あいうえお</p> </div> </body> うまくいきませんでした。 あといくつか疑問に思う事がありました。 $(function(){ $("#s1 p").on("click",function(){ $(this).animate({ marginLeft:"100px" }, 1500,"swing" ); }); }); 質問1 本ではmarginをつけないで作動するそうです。 しかし自分のはできなったのでmarginをつけました。 つけないタイプは、ｃｓｓでいうところのposition absoluteを事前にしないと この記述になりません。書き方としてはmarginをつけるべきだと思うんですが。。。 質問2 もうひとつopacityのときの数値はコーテーションをいれませんでした。 ですがmarginなどの数値を入れるときにはいれます。 あえてpxという文字が関わっているとしたらparseIntなどの 関数が必要なんではないでしょうか？ 毎度すみませんがお願いします
- ベストアンサー
- JavaScript
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 htmlのソースは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- cssで<div>にpaddingを指定したとき
下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>
- ベストアンサー
- HTML
- jQueryで追加した要素がマウスホバーに反応しない
jQueryを使って、ボタンを押すと要素を追加しています。 後から追加された要素はマウスホバーなどが有効にならないのですが、 対象方法などあるでしょうか。 下記のようなソースで質問の状態になります。 よろしくお願いします。 <html> <head> <title>test</title> <script type="text/javascript" src="system/jquery-1.3.2.min.js"></script> <script type="text/javascript"> <!-- jQuery(document).ready(function($){ jQuery(".edit").hover( function () { jQuery(this).css("background","yellow"); }, function () { jQuery(this).css("background","none"); } ); jQuery(".insert").click(function () { var html = "<div class='edit'><p>add-text</p></div>"; jQuery("#sortable .edit:first").before(html); }); }); // --> </script> </head> <body> <div><INPUT class="insert" type="button" value=INSERT></DIV> <div id="sortable" style="width:200px;"> <div class="edit"> <p>text1</p> </div> <div class="edit"> <p>text2</p> </div> <div class="edit"> <p>text3</p> </div> </div><!-- id="sortable" --> </body> </html>
- ベストアンサー
- JavaScript
- cssとhtml内のdiv要素だけで画像を表示するには
こんばんは。昨日からcssを始めてみたのですが、 早速壁にぶつかってしまいました。 くだらない質問と思われるかもしれませんが、お暇なかた よろしければご回答ください。 ほとんどのブログでは、htmlをいじることはできず、 css編集のみとなっています。 cssのみで画像を表示させたく、div要素を定義して、 それにcssを設定しようとしたのですが、うまくいきません。 以下失敗したままのサンプルを提示しますので、 間違っている箇所がありましたら、ご指摘ください。 /*cssだお*/ body.imiji { background-image:url(画像のurl); } .image { background-image:url(画像のurl); ←問題の箇所 } p.color { color:blue; font-family:"メイリオ" !important; } <!--html--> <html> <head> <title>ふぁぶ </title> <link rel=stylesheet type="text/css" href="fab.css"> </head> <body class="imiji"> <div class="image"></div>←←問題の箇所 <p class="color"> もうホントに勘弁して </p> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
- css javascriptについて教えて下さい。
下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。 そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #w{ width:500px; height:50px; border : solid 1px; overflow: hidden; } p{ display:inline-block; width:50px; height:50px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript" language="javascript"> var count = 0; var box; window.onload = function() { box = document.getElementById("w"); } function btnClick(){ var pNode = document.createElement("p"); pNode.innerHTML = count; box.appendChild(pNode); count ++; } </script> </head> <body> <div id="w"></div> <button onClick="btnClick()">Ｐタグを生成</button> </body> </html>
- ベストアンサー
- HTML
- 条件式にcssの値を使う方法。
条件式にcssの値を使う方法。 下記の部分が謎なのですが、プロパティ ＝＝ 値という形でなぜプロパティの値がnoneだった時となるのでしょうか？ if( toolTip.css("display") == "none" ) $(function() { $(".tooltip").each(function(){ var toolTip = $('<div class="tooltip-body">'); var toolTipText = $(this).attr("data-tooltip"); toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide(); $("body").append(toolTip); $(this).hover(function(){ if( toolTip.css("display") == "none" ){ var targetPostion = $(this).offset(); var toolTipHeight = toolTip.height(); toolTip.css({ "position": "absolute", "top": targetPostion.top - toolTipHeight -3 + "px", "left": targetPostion.left + "px", "display":"block", "opacity": "0", "z-index": "9999" }) .stop().animate({ "top" : "-=10px", "opacity": "1" }, 250); } }); }); });
- ベストアンサー
- JavaScript
- html cssで困っています
基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto"> <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか？教えていただければありがたいです。
- ベストアンサー
- HTML
- cssが読み込まれません。
VScodeでhtmlの練習を始めましたが、どうやってもcssが読み込まれません。同じフォルダ内に保存してます。名前間違いもないです。 HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>方法1</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>方法1:外部のCSSファイルを読み込む</p> </body> </html> CSS @charset "UTF-8"; p { color: blue; }
- ベストアンサー
- HTML
- CSSでのブロック要素に囲み線
下記、記述では#lineと#headerがぴったり重なると思うのですが、ブロック要素（#lineの部分）にborderを設定するとマージンができてしまうのですが、なぜでしょうか？border部分を削除するとぴったり重なります。 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style type="text/css" media="screen"><!-- #line { background-color:yellow;border:1px solid #808080;} #header { background-color:#23819e;text-align:center;} --></style> </head> <body> <div id="line"> <div id="header"> <p>aaa</p> </div> </div> </body> </html>
- ベストアンサー
- HTML
補足
そのほかのjquaryは動作してます。 そもそもcss3は拡張子はcssでもいいんでしょうか？ まあでも今回関係ないですね。 画像を傾かせたり、今回のプログラムが上手くいかない理由がよく解りません。 本どおりやってるのですが