プログラミング css

29

私はFont Awesomeを使用していますが、HTTPでCSSを追加したくありません。Font Awesomeをダウンロードしてコードに含めましたが、Font Awesomeはアイコンではなく境界線の付いた四角いボックスを表示しています。これが私のコードです： <html> <head> <link rel="stylesheet" href="../css/font-awesome.css"> <link rel="stylesheet" href="../css/font-awesome.min.css"> </head> <body> <div style="font-size: 44px;"> <i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x </div> </body> </html> 四角い枠の代わりにアイコンを表示する方法を教えてください。

99 html css font-awesome

6

<div>を<td>の高さに合わせる方法

StackOverflowでいくつかの投稿を調べましたが、このかなり単純な質問に対する答えを見つけることができませんでした。次のようなHTML構成があります。 <table> <tr> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> <td class="thatSetsABackground"> <div class="thatSetsABackgroundWithAnIcon"> <dl> <dt>yada </dt> <dd>yada </dd> </dl> <div> </td> </tr> </table> がdivの高さを満たすために必要なのはtd、divの背景（アイコン）をの右下隅に配置できるようにするためtdです。どのように私はそれについて行くことを提案しますか？

99 html css html-table

14

ReactJSでどのようにホバーしますか？-onMouseLeaveが高速ホバーオーバー中に登録されない

インラインスタイリングを行うときに、ReactJSでホバーイベントまたはアクティブイベントをどのように達成できますか？ onMouseEnter、onMouseLeaveのアプローチにはバグがあることがわかったので、別の方法があることを期待しています。具体的には、コンポーネントにすばやくマウスを合わせると、onMouseEnterイベントのみが登録されます。onMouseLeaveは起動しないため、状態を更新できません...コンポーネントがまだホバーされているように見えます。「：active」css疑似クラスを模倣した場合も、同じことに気づきました。本当に速くクリックすると、onMouseDownイベントだけが登録されます。onMouseUpイベントは無視されます...コンポーネントはアクティブなままです。これが問題を示すJSFiddleです：https ://jsfiddle.net/y9swecyu/5/ 問題のあるJSFiddleのビデオ：https ://vid.me/ZJEO コード： var Hover = React.createClass({ getInitialState: function() { return { hover: false }; }, onMouseEnterHandler: function() { this.setState({ hover: true }); console.log('enter'); }, onMouseLeaveHandler: function() { this.setState({ hover: false }); console.log('leave'); }, render: function() { var inner = normal; if(this.state.hover) { inner = …

99 javascript css reactjs mouseevent dom-events

12

CSSルールのパーセンテージ値をjQueryで取得します

ルールが次のとおりだとします。 .largeField { width: 65%; } ピクセル値ではなく、どういうわけか「65％」を取り戻す方法はありますか？ありがとう。編集：残念ながら、他のスタイルシートをインポートするスタイルシートがあり、結果としてcssRulesパラメータがnullまたは未定義の値で終わるため、DOMメソッドの使用は私の場合は信頼できません。このアプローチは、しかし、最も簡単な例（1つのスタイルシート、内部に複数の独立したスタイルシート宣言でうまくいくヘッド文書のタグを）。

98 jquery css

3

style =“ clear：both”の用途は何ですか？

たまたまdivスタイルのあるものを見ましたclear:both！clearin の用途は何styleですか？ <div style="clear:both">

98 html css

4

CSSプロパティ：表示と可視性

DisplayプロパティとVisibilityプロパティの違いは何ですか？

98 css

6

CSS z-indexパラドックスフラワー

を介して逆説的な効果を作成したいと思います z-index CSSプロパティをます。私のコードでは、下の画像のように5つの円があり、それらはすべて定義されていない絶対的な位置にあります z-index。したがって、デフォルトでは、すべての円が前の円と重なっています。現在、円5は円1とオーバーラップしています（左の画像）。私が達成したいパラドックスは、同時に、サークル1をサークル2の下に、サークル5の上に（右の画像のように）持つことです。（ソース：schramek.cz）これが私のコードですマークアップ： <div class="item i1">1</div> <div class="item i2">2</div> <div class="item i3">3</div> <div class="item i4">4</div> <div class="item i5">5</div> CSS .item { width: 50px; height: 50px; line-height: 50px; border: 1px solid red; background: silver; border-radius: 50%; text-align: center; } .i1 { position: absolute; top: 30px; …

98 css z-index

5

CSSセレクターでアスタリスク（*）は何をしますか？

私はこのCSSコードを見つけて実行し、ページのすべての要素の概要を示しました。誰かがCSSでアスタリスク*が何をしているのか説明できますか？ <style> * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * …

98 css css-selectors

7

webkit変換translate3dの後にcss z-indexが失われる

2つの絶対位置に配置されたdiv要素が重複しています。どちらもcssを介してz-index値を設定しています。私はtranslate3dwebkit変換を使用して、これらの要素を画面からアニメーション化し、画面に戻します。変換後、要素は設定z-index値を尊重しなくなります。誰かがdiv要素のz-index / stack-orderにWebkit変換を実行するとどうなるかを説明できますか？そして、div要素のスタック順を維持するために何ができるかを説明しますか？ここでは、私がどのように変換を行っているかについてのいくつかの詳細情報を示します。変換前に、各要素はcssを介して設定されたこれらの2つのWebkitトランジション値を取得します（私は.css()関数呼び出しにjQueryを使用しています： element.css({ '-webkit-transition-duration': duration + 's' }); element.css({ '-webkit-transition-property': '-webkit-transform' }); 次に、要素はtranslate3d -webkit-transformを使用してアニメーション化されます。 element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' }); ところで、3番目のパラメーターtranslate3dをいくつかの異なる値に設定して、3Dスペースでスタック順序を複製しようとしましたが、うまくいきませんでした。また、iPhone / iPadおよびAndroidブラウザーは、このコードを実行する必要があるターゲットブラウザーです。どちらもWebkitの移行をサポートしています。

98 css webkit transform

1

Bootstrap 3がボックスサイズ：ボーダーボックスに切り替わったのはなぜですか？

Bootstrapテーマをv2.3.2からv3.0.0に移行していますが、bootstrap.cssの次のスタイルにより、多くのディメンションが異なる方法で計算されることに気付きました。 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Bootstrapがすべての要素のボックスサイズを境界ボックスに切り替える理由を誰かが説明できますか？新しいグリッドシステムがパーセントベースであることに関係していると思いますが、上のセレクターはグリッド要素にのみ適用されるわけではありません。少し過激な私見:-) 誰か洞察を与えたいと思う人はいますか？

98 css twitter-bootstrap twitter-bootstrap-3 boxsizer

15

トグルボタンはどのように作成しますか？

CSSを使用してHTMLでトグルボタンを作成したいと思います。クリックすると押し込まれたままになり、もう一度クリックすると飛び出るようにします。 CSSを使用するだけの方法がない場合。jQueryを使用してそれを行う方法はありますか？

98 jquery html css

6

Webフォントまたはローカルに読み込まれたフォント？

Cufonを使用してトラブルが発生して以来、外部のフォントリソースを使用することはしませんでしたが、最近では、フォントをロードする別の方法を探して、より良い方法があるかどうかを確認しています。優れたメソッドには、突然に現れる方法があります。多くの新しいメソッドがあり、メソッドごとにバリエーションがあるようです。タイプキットを使用する必要がありますか？またはgoogle webfonts（jsまたはcssを使用）？ローカルでロードするフォント（fontsquirrel.comで生成されたメソッドなど）を引き続き使用する必要がありますか？いくつかのテストを行い、最もよく受け入れられていると思われるメソッドを以下にリストしますが、Webフォントに移行する価値はありますか？リソースの負荷（http要求）が多く、ファイル形式の種類が少ない（互換性が低い）などのようですが、ほとんどの場合、ファイルは非同期で効率的に読み込まれるように見えます。それは単に状況と必要性の問題ですか？もしそうなら、それらは何ですか？これらの方法には大きな違いがありますか？私がリストしていないより良い方法はありますか？パフォーマンスのプロ/コンは何ですか？見て？依存関係？互換性？私はここでベストプラクティスを本当に探しています。パフォーマンスは重要ですが、スケーラビリティと使いやすさも重要です。言うまでもなく、ルックアンドフィール。 Google CSS 外部スタイルシートのみを使用互換性のある最小のファイルタイプのみを使用は、styleshee（）のコンテンツを使用@importまたは<link>取得@font-faceして、独自のスタイルシートに直接配置できます。試験結果 78ms load of html 36ms load of css Google JSメソッド webfont.jsスタイルセットの読み込みに使用します互換性のある最小のファイルタイプのみを使用 :rootクラスに要素を追加します頭にスクリプトを追加します。試験結果 171ms load of html 176ms load of js 32ms load of css Typekitメソッド :root要素をクラスに追加します。 *.jsスニペットまたは外部から読み込まれたファイル*.jsfileを使用できます data:font/opentypeフォントファイルの代わりに使用します。頭にスクリプトを追加埋め込みcssをヘッドに追加します外部スタイルシートをヘッドに追加します typekit.comからフォントとターゲットセレクタを簡単に追加/削除/調整できます …

98 javascript css fonts webfonts

5

HTML / CSS：divをクリックに対して「非表示」にしますか？

さまざまな理由から、<div>一部のテキストを（ほとんど）透明にする必要があります。ただし、これはテキストがクリックできない（リンクをクリックする、または選択するなど）ことを意味します。このdivをクリックや他のマウスイベントに対して単に「非表示」にすることは可能でしょうか？たとえば、overlaydivはテキストをカバーしていますが、overlaydivを介してテキストをクリック/選択できるようにしたいと思います。 <div id="container"> <p>Some text</p> <div id="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height:100%"> ... some content ... </div> </div>

98 html css events

8

Google Chrome拡張機能-CSSでローカル画像を読み込めません

コンテンツスクリプト機能を使用してウェブサイトを変更するシンプルなChrome拡張機能があります。より具体的にはbackground-image、上記のウェブサイト。何らかの理由で、拡張機能にパックされていても、ローカル画像を使用できないようです。 body { background: #000 url('image.jpg') !important; background-repeat: repeat !important; } それだけです。最も単純なCSSですが、機能しません。ブラウザは画像をロードしません。

98 css google-chrome-extension background-image

9

divから流れ出るテキスト

テキストがある場合は、スペースなしとより200pxのdivのサイズよりも 200pxのように定義され、それが幅を流出だ私はここに私のコードを入れているhttp://jsfiddle.net/madhu131313/UJ6zG/ あなたは、写真の下に見ることができ、編集：私が欲しいです次の行に移動するテキスト

98 css border

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

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