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

CSS(Cascading Style Sheets)は、HTML(HyperText Markup Language)、XML(Extensible Markup Language)ドキュメント、および色、レイアウト、フォントを含む(これらに限定されない)SVG要素の外観とフォーマットを記述するために使用される表現スタイルシート言語です。とアニメーション。また、画面、紙、音声、またはその他のメディアで要素をレンダリングする方法についても説明します。

4
Twitterブートストラップ:高さ100%のコンテナー内のdiv
twitterブートストラップ(2)を使用して、ナビゲーションバーのある単純なページを作成し、内部にcontainer高さ100%のdiv(画面の下部)を追加したいと思います。私のcss-fuは錆びており、これを解決することはできません。 シンプルなHTML: <body> <div class="navbar navbar-fixed-top"> <!-- Rest of nav bar chopped from here --> </div> <div class="container fill"> <div id="map"></div> <!-- This one wants to be 100% height --> </div> </body> 現在のCSS: #map { width: 100%; height: 100%; min-height: 100%; } html, body { height: 100%; } .fill { …

9
<body>を画面全体に表示しますか?
次のように、放射状グラデーションをWebページの背景として使用しています。 background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000)); 動作しますが、コンテンツがページ全体に満たない場合、グラデーションは切り取られます。&lt;body&gt;要素を常にページ全体に埋め込むにはどうすればよいですか?

8
グリッド/タイルビューを作成する方法
たとえば、いくつかのクラス.articleがあり、このクラスをグリッドビューとして表示したいとします。だから私はこのスタイルを適用しました: .article{ width:100px; height:100px; background:#333; float:left; margin:5px; } そのスタイルは、.articleをタイル/グリッドのように見せます。高さを固定しても問題ありません。しかし、高さを自動に設定したい場合(その中のデータに応じて自動的に拡大する)、グリッドは見苦しく見えます。 そして、私はこのようなビューを作りたいです:

6
CSSまたはJavaScriptを使用してWebページのカーソルを非表示にすることはできますか?
建物のホールに情報を表示するためのWebページを表示するときにカーソルを非表示にしたい。インタラクティブである必要はまったくありません。カーソルプロパティと透明なカーソルイメージを試しましたが、機能しませんでした。 これができるかどうか誰かが知っていますか?これは、ユーザーがどこをクリックしているのかわからないセキュリティ上の脅威と考えられるため、あまり楽観的ではありません...ありがとうございます。
129 javascript  html  css 

8
Bootstrap 4の「.well」に相当するクラスとは
bootstrap-3にはあります .well、灰色の背景色といくつかのパディングを持つ要素の周りに丸い境界線を追加するクラスがあります。 &lt;div class="well"&gt;Basic Well&lt;/div&gt; しかし、.wellbootstrap-4にはクラスが見つかりませんでした。.wellbootstrap-4に相当するタグはありますか?

10
選択ボックスオプションの背景色を変更する
私が持っているselect箱を、私は時にオプションの背景色を変更しようとしているselectボックスは、すべてのオプションをクリックし、ショーされています。 フィドルを参照 HTML: &lt;select&gt; &lt;option val=""&gt;Please choose&lt;/option&gt; &lt;option val="1"&gt;Option 1&lt;/option&gt; &lt;option val="2"&gt;Option 2&lt;/option&gt; &lt;option val="3"&gt;Option 3&lt;/option&gt; &lt;option val="4"&gt;Option 4&lt;/option&gt; &lt;/select&gt; CSS: select{ margin:40px; background: rgba(0,0,0,0.3); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.4); }

8
Twitter Bootstrapでスタイリングを上書きする方法
Twitter Bootstrapのスタイリングを上書きするにはどうすればよいですか?たとえば、私は現在、CSSルール「float:left;」を含む.sidebarクラスを使用しています。代わりに右に行くようにこれを変更するにはどうすればよいですか?私はHAMLとSASSを使用していますが、Web開発は比較的新しいです。


1
IllustratorからWeb用のSVGをエクスポートするための最適な設定は?
すべてのデバイスのレスポンシブデザインで見栄えを良くするために、ウェブサイトにSVGロゴを使用したいと考えています。 ただし、問題があるため、できるだけ多くのデバイスとブラウザをサポートしたいと考えています。ロード速度も重要な考慮事項です。Adobe Illustratorのエクスポート設定は、これらすべてにどのように適合しますか? Illustratorには、SVGエクスポートのオプションがいくつかあります。まず、どのSVGプロファイルが最適ですか? SVG Tinyの方がファイルサイズが小さいと思いますか?多くのデバイスがSVG Tinyをサポートしていますか?最も重要な違いは何ですか?(このW3モンスターを読む必要はありません。) 次に、画像の場所の最適なオプションは「リンク」だと思いますか?(感嘆符の後の説明を参照してください。) または、ブラウザは「埋め込み」オプションをどのようにサポートしていますか? ありがとうございました! PSフォールバックalpha-PNGオプションがありますが、SVGを可能な限りサポートする必要があります。(考えてみてください。JPGのようなフォールバックオプションは、alpha-PNG自体が古いIEのソリューションを必要とするため、おそらくこの場合に最適です。) 更新:構成可能なオプションがさらにあります。私はテキストを扱っていないので、私が見る唯一の関連するものは小数点以下です。ロゴの場合、最大200x200px(Retinaディスプレイでは400x400px)として表示されるものは、「3」が最適な設定ですか?または「2」でファイルサイズを最小化しますか?

25
ASP.NET MVCのHtml.ActionLinkに「アクティブ」クラスを追加する方法
MVCのブートストラップnavbarに「アクティブ」クラスを追加しようとしていますが、次のように記述すると、アクティブクラスが表示されません。 &lt;ul class="nav navbar-nav"&gt; &lt;li&gt;@Html.ActionLink("Home", "Index", "Home", null, new {@class="active"})&lt;/li&gt; &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt; &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt; &lt;/ul&gt; これは、正しくフォーマットされたクラスのように見えますが、機能しません。 &lt;a class="active" href="/"&gt;Home&lt;/a&gt; Bootstrapのドキュメントには、ナビゲーションバーで「a」タグを使用しないように記載されていますが、上記はHtml.ActionLinkにクラスを追加する正しい方法であると私が考える方法です。これを行うことができる別の(きちんとした)方法はありますか?

4
CSSで表のセルを右揃えにします
私はこのような古い古典的なコードを持っています &lt;td align="right"&gt; セルの内容を正しく揃えます。したがって、このセルに2つのボタンを配置すると、ボタンはセルの適切なサイトに表示されます。 しかし、私はこれをCSSにリファクタリングしていましたが、正しい整列などはありませんか?text-alignが表示されますが、同じですか?
128 css 



18
1ピクセルの境界線がdivに追加されると、divのサイズが増加します。
クリックすると、1pxの境界線がdivに追加されるため、Divのサイズは2px X 2px増加します。divサイズを大きくしたくありません。そうするための簡単な方法はありますか? 乱雑な詳細説明実際には、コンテナーのdivにfloat:left(アイコンと同じサイズ)のDIVを追加しているため、すべてが次々に積み上げられ、(container-divの幅は300px)幅の左側にスペースがないため、子DIVは次の行にあるため、カタログと同様ですが、境界線のため、選択されたDIVサイズのみが増加するため、選択されたDIVの下のDIVは右に移動し、選択されたDIVの下に空のスペースを作成します。 編集: 選択時に高さ/幅を減らしますが、元に戻す方法。サードパーティのフレームワークを使用しているため、DIVが選択を失ったときにイベントは発生しません。
128 css  html  border 

11
JavaScriptでデバイスの幅を取得する
JavaScriptを使用して、ビューポートの幅ではなく、ユーザーのデバイスの幅を取得する方法はありますか? CSSメディアクエリはこれを提供します。 @media screen and (max-width:640px) { /* ... */ } そして @media screen and (max-device-width:960px) { /* ... */ } これは、スマートフォンを横向きでターゲットにしている場合に役立ちます。たとえば、iOSでは、宣言は max-width:640pxiPhone 4でも横向きと縦向きの両方をターゲットにします。Androidの場合、私が知る限り、これは当てはまりません。したがって、このインスタンスでdevice-widthを使用すると、両方の向きを正しくターゲットにできます。デスクトップデバイスを対象としない。 ただし、デバイスの幅に基づいてjavascriptバインディングを呼び出す場合、ビューポートの幅のテストに制限されているようです。これは、次のような追加のテストを意味します。 if ($(window).width() &lt;= 960 &amp;&amp; $(window).height &lt;= 640) { /* ... */ } デバイスの幅がcssで利用可能であるというヒントを考えると、これは私にはエレガントに思えません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.