タグ付けされた質問 「css」

中心的な単語が1つあるWebページが欲しい。 この単語をアニメーションで描画して、ページが同じように単語を「書き出す」ようにします。つまり、ある時点から始まり、最終的な結果がグリフになるように時間とともに線と曲線を描画します。 これが<canvas>DOMで行われるかどうかは気にせず、JavaScriptとCSSのどちらで行われるかは気にしません。jQueryがないことは良いことですが、必須ではありません。 これどうやってするの？私は運が悪くて徹底的に検索しました。

229 javascript  css  canvas  html5-canvas  css-shapes 

親よりも広い親コンテナーDIV内に子DIVを配置する方法はありますか？子DIVはブラウザのビューポートと同じ幅である必要があります。 以下の例をご覧ください。 子DIV は親divの子としてとどまる必要があります。子divに任意の負のマージンを設定してそれを広くすることができることはわかっていますが、本質的にブラウザの100％の幅にする方法を見つけることができません。 私はこれができることを知っています： .child-div{ margin-left: -100px; margin-right: -100px; } しかし、私は子が動的であるブラウザと同じ幅である必要があります。 更新 あなたの答えをありがとう、これまでのところ最も近い答えは、子のDIV位置を絶対にして、leftプロパティとrightプロパティを0に設定することです。 次の問題は、親に位置：相対があることです。これは、左と右のプロパティが依然としてブラウザーではなく親divに相対的であることを意味します。ここの例を参照してください：jsfiddle.net/v2Tja/2 他のすべてを台無しにしない限り、親からの相対位置を削除することはできません。

229 css  html 

CSSは大文字と小文字を区別しないということを随時読み続けますが、このセレクターがあります。 .holiday-type.Selfcatering これを私のHTMLで使用すると、このようにピックアップされます <div class="holiday-type Selfcatering"> 上記のセレクターをこのように変更すると .holiday-type.SelfCatering その後、スタイルはピックアップされません。 誰かが嘘をついている。

229 html  css  css-selectors 

そのコードを見て、私のGmailに入ったメーラーを複製しようとしています。複数のソースビューアでこれが多く見られます。 <td style=3D"border-bottom: 1px dotted rgb(153,157, 147); border-top: 1px solid rgb(28, 140, 78);" width=3D"90">=A0</td> <td style=3D"border-bottom: 1px dotted rgb(153,157, 147); border-top: 1px solid rgb(28, 140, 78);" align=3D"right" width=3D"110"> 3Dは私が知らないメールレンダリングのようなものですか？

229 html  css  html-email 

.cssファイルを.lessファイルにインポートできますか？ lessにはかなり慣れているので、すべての開発に使用しています。私は次のような構造を定期的に使用しています。 @import "normalize"; //styles here @import "mixins"; @import "media-queries"; @import "print"; すべてのインポートは他の.lessファイルであり、すべて正常に機能します。 私の現在の問題は次のとおりです。次のように、.cssファイルで使用されるスタイルを参照する.lessに.cssファイルをインポートします。 @import "../style.css"; .small { font-size:60%; .type; } // other styles here .cssファイルには呼び出されるクラス.typeが含まれていますが、.lessファイルをコンパイルしようとするとエラーが発生しますNameError: .type is undefined .lessファイルは.cssファイルをインポートせず、他の.lessファイルのみをインポートしますか？それとも私はそれを間違って参照していますか...？！

228 css  import  less 

新しいTwitter Bootstrapを使用してサイトを作成しています。サイトは正常に見え、IE8を除くすべての必要なブラウザーで動作します。 IE8では、モバイルバージョンの要素が表示されているようですが、デスクトップの全画面に表示されます。私が抱えている問題は、Twitterブートストラップが最初にモバイルであることだと思います。そのため、何らかの理由でIE8がこのオプションを採用しています。 また、containerクラスが意図したとおりに最大幅のCSSプロパティを取得していないようです。誰かが私が間違ったことを見ることができますか？ <!-- Favicon --> <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <!-- Bootstrap --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <script src="/SiteFiles/js/modernizr.js"></script> <!-- CSS --> <link href="/SiteFiles/css/main.css" rel="stylesheet"> <header> <div class="topArea clearfix"> <div class="container"> <div class="topLinks"> <div class="btn-group"> <span class="flag" data-toggle="dropdown"> </span> <ul class="dropdown-menu"> <li><a href="#">Country 1</a></li> <li><a …

228 html  css  twitter-bootstrap  internet-explorer-8  twitter-bootstrap-3 

visibility:hidden特定の要素を非表示にするために使用していますが、非表示になっている間もページ上のスペースを占有します。 それらがまったくDOMにないかのように（ただし、実際にDOMから削除せずに）、それらを視覚的に完全に非表示にするにはどうすればよいですか？

228 html  css 

DIVsでサイトを作成しています。DIVを作成するときを除いて、すべてがうまくいきます。私はこれらを次のように作成します（例）： newdiv { width: 200px; height: 60px; padding-left: 20px; text-align: left; } padding-leftプロパティを追加すると、幅がDIV220pxに変わり、200pxのままにしておきます。 DIVとanotherdivまったく同じ名前の別の名前を作成しnewdiv、その中に配置しnewdivたnewdivが、パディングがなく、anotherdivがあるとしますpadding-left: 20px。同じことを取得しnewdivます。幅は220pxになります。 この問題を解決するにはどうすればよいですか？

227 html  css  padding 

私はjQueryとjQuery-uiを使用しており、さまざまなオブジェクトのさまざまな属性をアニメーション化したいと考えています。 ここで問題を説明するために、ユーザーがマウスを重ねると青から赤に変わる1つのdivに簡略化しました。 を使用するときに必要な動作を取得できますがanimate()、その場合、アニメーション化するスタイルはアニメーションコード内にある必要があり、スタイルシートとは別のものにする必要があります。（見る例1を） 別の方法を使用addClass()しremoveClass()ていますが、で取得できる正確な動作を再現できませんでしたanimate()。（例2を参照）） 例1 私が持っているコードを見てみましょうanimate()： $('#someDiv') .mouseover(function(){ $(this).stop().animate( {backgroundColor:'blue'}, {duration:500}); }) .mouseout(function(){ $(this).stop().animate( {backgroundColor:'red'}, {duration:500}); }); それは私が探しているすべての行動を表示します： 赤と青の間をスムーズにアニメーション化します。 ユーザーがマウスをdivの内外にすばやく移動しても、アニメーションは「オーバーキュー」しません。 アニメーションの再生中にユーザーがマウスを出し入れすると、現在の「途中」状態と新しい「目標」状態の間で正しく緩和されます。 ただし、スタイルの変更はで定義されanimate()ているので、そこでスタイル値を変更する必要があり、スタイルシートをポイントすることはできません。スタイルが定義されている場所のこの「断片化」は、本当に私を悩ませるものです。 例2 addClass()and を使用した私の現在の最善の試みはremoveClass次のとおりです（アニメーションを機能させるには、jQuery-uiが必要です）。 //assume classes 'red' and 'blue' are defined $('#someDiv') .addClass('blue') .mouseover(function(){ $(this).stop(true,false).removeAttr('style').addClass('red', {duration:500}); }) .mouseout(function(){ $(this).stop(true,false).removeAttr('style').removeClass('red', {duration:500}); }); これは、元の要件のプロパティ1と2の両方を示していますが、3は機能しません。 私はこれの理由を理解しています： アニメーション化するときaddClass()、removeClass()jQueryは一時的なスタイルを要素に追加し、提供されたクラスの値に達するまで適切な値をインクリメントします。その後、実際にクラスを追加/削除します。 このため、スタイル属性を削除する必要があります。そうしないと、アニメーションが途中で停止した場合、スタイル属性が残り、タグのスタイル属性がクラススタイルよりも重要であるため、クラス値が永久に上書きされます。 ただし、アニメーションの途中で新しいクラスが追加されていないため、このソリューションでは、アニメーションが完了する前にユーザーがマウスを動かすと、色が前の色にジャンプします。 私が理想的に望んでいるのは、次のようなことができるようになることです。 $('#someDiv') .mouseover(function(){ …

226 javascript  jquery  css  jquery-ui  jquery-animate 

ボタンをクリックすると、すべてのボタンがハイライト表示されます。これはChromeにあります。 <button class="btn btn-primary btn-block"> <span class="icon-plus"></span> Add Page </button> 私はテーマでBootstrapを使用していますが、そうではないと確信しています。以前、別のプロジェクトでこれに気づいていました。 の<a>代わりにタグを使用すると、問題が解決し<button>ます。どうして？使用<button>したい場合、どうすればそれを解消できますか？

225 html  css  twitter-bootstrap 

テキスト入力のプレースホルダーを次のようにスタイルすることができます： -webkit-input-placeholder { color: red; } オンラインのウェブサイトを見ていて、同じプレースホルダー色を使用したいのですが。彼らがどの色を使用したかを知ることは可能ですか？アルファ値を含めたいので、イメージエディタで色をサンプリングすることはできません。 Chrome Dev Toolsで要素を検査すると、次のように表示されます： 開発ツールは、入力要素を検査するときにプレースホルダー要素に関する情報を提供しません。別の方法はありますか？

225 html  css 

CSSのデザインをしている間、私がしばらく疑問に思っていた何か。 CSS幅の小数点以下の桁数は尊重されますか？それとも丸みがありますか？ .percentage { width: 49.5%; } または .pixel { width: 122.5px; }

225 html  css 

このコードを使用して、ボタンを右揃えにします。 <p align="right"> <input type="button" value="Click Me" /> </p> コードスニペットを実行するHide resultsスニペットを展開 ただし、<p>タグを使用するとスペースが無駄になるため、<span>またはで同じことを行うことを検討します<div>。

225 html  css 

私はこの@media設定をしています： HTML： <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS： @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ } この設定では、iPhoneでは機能しますが、ブラウザでは機能しません。 それは私がすでにdeviceメタに持っているからで、多分max-width:480px代わりに持っているからでしょうか？

225 css  mobile  media-queries 

CSSを使用して背景画像を反転するには？出来ますか？ 私はこの矢印画像を使用していcurrenty background-imageのliCSSに オン：visitedこの矢印を水平に反転する必要があります。矢印の別の画像を作成するためにこれを行うことができますが、CSSで画像を反転できることを知りたくてたまらない:visited

224 css  mobile-webkit