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

これはCSSです： div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } 下の円はどのように生成されますか？ 長方形の幅が180ピクセルで高さが180ピクセルの場合、次のように表示されます。 ボーダー半径30ピクセルを適用すると、次のようになります。 長方形は小さくなり、半径のサイズが大きくなるとほとんど見えなくなります。 では、180ピクセルの境界線はどのようにしheight/width-> 0pxて半径180ピクセルの円になるのでしょうか。

206 html  css  css-shapes 

style=display:"block"jQueryの要素に追加する方法は？

206 javascript  jquery  html  css 

margin: 0 auto;要素の設定がそれを中央に配置するために使用されることを知っています（左右）。ただし、自動マージンが機能するためには、要素とその親が特定の基準を満たしている必要があることを知っており、魔法を正しく使うことができないようです。 だから私の質問は単純です：margin: 0 auto;子を左右中央に配置するために要素とその親に設定する必要があるCSSプロパティは何ですか？

206 css 

現在、ブラウザーの幅が768pxを下回ると、ナビゲーションバーは折りたたみモードに変わります。この幅を1000pxに変更したいので、ブラウザーが1000px未満になると、ナビゲーションバーが折りたたみモードに変わります。LESSを使用せずにこれを実行したいのですが、LESSではなくスタイラスを使用しています。 私の問題はこの質問と同じです：Bootstrap 3 Navbar Collapse しかし、その質問のすべての回答は、LESS変数を変更してそれを行う方法を説明しています。私はLESSを扱っていません。スタイラスを使用しているので、スタイラスまたは別の方法を使用してこれを行う方法を知りたいです。 ありがとう！

205 css  twitter-bootstrap  responsive-design  navbar  collapse 

「大きなお尻が好きで嘘をつくことができない」という文字列があり、でカットしたとするとoverflow:hidden、次のように表示されます。 私は大きなお尻が好きで、私はできません テキストを切り取ります。これを次のように表示することは可能ですか？ 私は大きなお尻が好きで、私はできません... CSSを使用していますか？

205 html  css 

私のページには、ellipsisスタイル付きの動的データのスパンがあります。 .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; この要素のツールチップに同じコンテンツを追加したいのですが、コンテンツが長く、省略記号が画面に表示されている場合にのみ表示されます。 それを行う方法はありますか？がアクティブ になるellipsisと、ブラウザはイベントをスローしますか？ *ブラウザ：Internet Explorer

205 javascript  html  css  tooltip  ellipsis 

私はインターネットのアクセシビリティに対する意識を高める財団のために働いています。プレゼンテーションのために、人々にさまざまな障害/障害をシミュレートする小さなワークショップを提供したいと思います。これは、このプレゼンテーションのために特別に作成されたWebサイトを介して行われます。 示されている障害の1つは、震えです。つまり、揺れがあり、制御が難しい手の動きを経験します。この障害により、マウスカーソルを正確に移動し、マウスがリンク上にあるときにマウスボタンを押すことは非常に困難です。一部の高齢者とパーキンソン病などの病気の人の両方が振戦に苦しむ可能性があります。 では、どういうわけか、マウスカーソルを予測できない方法で動かして、小さなボタンをクリックするのが非常に難しいようにしたいと思います。JavaScriptではマウスカーソルを直接移動できないため、これを実現する他の方法を探しています。私は次のアイデアを思いつきました： マウスの揺れをシミュレートするマウスドライバー/ユーティリティの使用。 CSSを介してマウスカーソルを非表示にし、シェイクマウスカーソルのGIFアニメーションを（JavaScriptを使用して）元のカーソルの場所に配置してから、ターゲットリンクを数秒おきにのみクリック可能にします。これは、少なくとも間違った瞬間にクリックするような感覚を少なくとも与えます。 最初のアイデアはかなりクールですが、Mac用でもWindows用でも、このようなツールは見つかりませんでした。そして、私はそのようなものを自分でプログラミングするスキルがありません。 2番目のアイデアは少し不格好に見えますが、望ましい効果が得られると思います。 誰か他のアイデアがありますか？

204 javascript  html  css  accessibility  simulation 

Twitterブートストラップフレームワークをかなり長い間使用していますが、最近バージョン3に更新されました！ スティッキーフッターを下に貼り付けるのに問題があります。TwitterブートストラップWebサイトから提供されているスターターテンプレートを使用しましたが、まだうまくいきません。

204 html  css  twitter-bootstrap  twitter-bootstrap-3 

以下のCSSでわかるように、自分child2自身をの前に配置したいと思いchild1ます。これは、私が現在開発しているサイトがモバイルデバイスでも機能する必要があるためです。child2、モバイルデバイスのコンテンツの下に必要なナビゲーションが含まれているため、下部必要がです。-なぜ2つのマスターページではないのですか？これはdivsHTML全体で再配置される唯一の2つであるため、この小さな変更の2つのマスターページはやりすぎです。 HTML： <div id="parent"> <div class="child1"></div> <div class="child2"></div> </div> CSS： parent { position: relative; width: 100%; } child1 { width: auto; margin-left: 160px; } child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; } child2 さまざまなサブサイトでナビゲーションアイテムの数が増減する可能性があるため、高さは動的です。 絶対配置された要素がフローから削除され、他の要素によって無視されることを知っています。親divに 設定しようとしoverflow:hidden;ましたが、それも役に立ちませんでしたclearfix。 私の最後の手段は、JavaScriptを2つにdivs応じて再配置することですが、ここでは、JavaScript以外の方法でこれを実行する方法があるかどうかを確認します。

204 html  css  position  master-pages  parent-child 

次のように、受信トレイに使用する簡単なテーブルを持っています。 <table border="1"> <tr> <th>From</th> <th>Subject</th> <th>Date</th> </tr> 開始日と日付がページ幅の15％、件名が70％になるように幅を設定するにはどうすればよいですか。また、テーブルがページ幅全体を占めるようにします。

204 html  css  html-table 

HTMLリストとCSSを使用して水平メニューを作成しました。リンクの上にカーソルを置くと、すべてが正常に機能します。ご覧のとおり、リンクに太字のホバー状態を作成しましたが、太字のサイズの違いによりメニューリンクがシフトします。 このSitePointの投稿と同じ問題が発生します。ただし、投稿には適切な解決策がありません。私はどこでも解決策を探しましたが、解決策が見つかりません。きっと私だけがそうすることはできません。 誰かアイデアはありますか？ PS：メニュー項目のテキストの幅がわからないので、li項目の幅を設定することはできません。 .nav { margin: 0; padding: 0; } .nav li { list-style: none; display: inline; border-left: #ffffff 1px solid; } .nav li a:link, .nav li a:visited { text-decoration: none; color: #000; margin-left: 8px; margin-right: 5px; } .nav li a:hover{ text-decoration: none; font-weight: bold; } .nav li.first { …

204 html  css  hover  text-size 

フレックスボックスに2つのdivが並んでいます。右手は常に同じ幅である必要があり、左手は残りのスペースをつかむだけです。しかし、特に幅を設定しない限り、効果はありません。 したがって、現時点では96％に設定されており、実際に画面を押しつぶすまで問題ありません。その後、右側のdivに必要なスペースが不足します。 私はそれをそのままにしておくことができると思いますが、それは間違っていると感じています-言う方法があるように： 正しいものは常に同じです。あなたは左側にいます-あなたは残っているすべてを手に入れます .ar-course-nav { cursor: pointer; padding: 8px 12px 8px 12px; border-radius: 8px; } .ar-course-nav:hover { background-color: rgba(0, 0, 0, 0.1); } <br/> <br/> <div class="ar-course-nav" style="display:flex; justify-content:space-between;"> <div style="width:96%;"> <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"> <strong title="Course Name Which is Really Quite Long And Does Go On a Bit …

204 html  css  flexbox 

私は主にモバイルユーザー向けのサイトを持っていますが、デスクトップ向けのサイトもあります。 Mobile Safariでは、<input type="number">数字のみを入力する必要がある入力フィールドに数字キーボードが表示されるため、を使用するとうまく機能します。 ただし、ChromeとSafariでは、数値入力を使用すると、フィールドの右側にスピンボタンが表示されます。これは、私のデザインではがらくたのように見えます。とにかく6桁の数字のようなものを書く必要があるときは、ボタンは役に立たないので、私は本当にボタンを必要としません。 -webkit-appearanceまたは他のCSSトリックでこれを無効にすることは可能ですか？運が悪いので試してみました。

203 css  html  webkit 

私は、各li内にハイパーリンクを含む複数のリストアイテムを含む順不同リストのモバイルWebアプリケーションを持っています。 ...私の質問は、iPhoneで表示したときにハイパーリンクのサイズが変更されず、加速度計が縦向きから横向きに切り替わるようにハイパーリンクをフォーマットするにはどうすればよいですか？現在、ハイパーリンクのフォントサイズの仕様は14pxになっていますが、横長に切り替えると、20px程度まで吹き飛ばされます。font-sizeを変更しないでください。これがコードです： ul li a { font-size:14px; text-decoration: none; color: #cc9999; } <ul> <li id="home" class="active"> <a href="home.html">HOME</a> </li> <li id="home" class="active"> <a href="test.html">TEST</a> </li> </ul> コードスニペットを実行する結果を非表示スニペットを展開

203 iphone  html  css 

要素のCSSスタイルを定義することは可能ですか？これは、一致する要素に特定の要素が（直接の子アイテムとして）含まれている場合にのみ適用されますか？ これは、例を使用して説明するのが最適だと思います。 注：含まれている子要素に応じて、親要素をスタイル設定しようとしています。 <style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div should have a red border …

203 html  css