[css] タグが付いた質問
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
654
質問
4
票
1
回答
119
閲覧数
使われていないCSS指定を自動で検出するには?
困りごと
php や html や css を書いて作業をしていたときのことです.
html の中で,レイアウトを変えようと思って,<div class="hoge"></div> を table に変更しました.
それに伴って CSS の中での
div.hoge {
text-align: center;
}
というような指定は不要になるわけです....
4
票
0
回答
159
閲覧数
Outlook2007/2010はHTMLメールのstyleブロック内のCSSを無視する?
HTMLメールのコーディングで困っており、質問させてください。
https://www.campaignmonitor.com/css/
こちらの情報によればoutlook2007/2010はhead内でのCSSの定義およびクラス名セレクタをサポートしているはずなのですが、以下のHTMLでは無視されてしまいます。
何か記述間違いなどありますでしょうか。よろしくお願いいたします。
<!...
3
票
5
回答
2万
閲覧数
Tableのヘッダ固定、列固定
Excelの「ウィンドウ枠の固定」のようにTableのヘッダ行や列を固定したいです。
colspanやrowspanを用いてセル結合しているTableでも適用可能な手法やライブラリはあるでしょうか?
3
票
1
回答
264
閲覧数
CSSセレクタの中にある「>」
jQueryのCSSセレクタの中にある「>」の存在理由がわかりません。
元のhtml
<div id="button1">
<button>aaa-btn<span class="big">
<span>aaa</span></span></button>
css
何かしら適当な色や形状
...
3
票
4
回答
3万
閲覧数
CSSで要素内のテキストを上下左右の中央揃えにしたい
下図のように、div要素内のテキストを上下左右の中央揃えにしたいです。
どのようなCSSを書けば良いのでしょうか?
width:200px; height:200px;と書いたのは一例です。
特にこの大きさ自体に意味があるわけではありませんが、要素の大きさはCSSで指定したいのです。
3
票
1
回答
109
閲覧数
文章の一部を黒く塗りつぶしたい
こちらの文章で文字の一部だけ黒く塗りつぶしておきたいのですが、何か方法はありますでしょうか。
jqueryをつかった方法はありましたが、できればcssだけでやりたいと思っています。
<p>アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈(たいくつ)しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。&...
3
票
1
回答
983
閲覧数
:before, :after 疑似要素をコピーさせることができるか?
CSSでスタイル付けをしている際にリストの先頭にそれぞれ共通するテキストがあるのでこれを擬似要素で作ろうと思いました
li::before
{
content: "共通テキスト";
}
<ul>
<li>項目A</li>
<li>項目B</li>
<li>項目C</li>
<...
3
票
1
回答
2,128
閲覧数
::before,::after擬似要素の親要素は?
下記HTMLで、itemクラスに「::before」「::after」を付与した時の、「各疑似要素」の「親要素」は、どこになるのでしょうか?
<div class="wrapper">
<div class='item'></div>";
</div>
3
票
3
回答
519
閲覧数
縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。
★前提・実現したいこと
縦横比が違う画像と同じ画像を縦横比をそろえて表示したいです。
例えば、幅×高さで以下の二つを同じ200px200pxで表示する場合です。
①2000×1333
②160×160
★発生している問題・エラーメッセージ
上記例の場合だと、幅はそろえることができるのですが、
高さが合いません…
【幅=高さ】
【幅≠高さ】
...
3
票
1
回答
112
閲覧数
CSSセレクタのh1 + *[rel=up]の意味が分かりません
CSSセレクタ h1 + *[rel=up] の意味が分かりません
W3C Recommendationの
6.4.3 Calculating a selector's specificity
で示されているサンプルコード内の記述なのですが、
h1 + *[rel=up]
の意味が分かりません。
h1はタイプセレクタ、
+記号は「その直後の」という意味であっていると思うのですが、...
3
票
1
回答
124
閲覧数
ブロック要素とインライン要素について質問があります
お世話になります。
CSSとHTMLでブロック要素インライン要素の違いを学習しています。
https://60pablog.com/html-block-inline/#CSS
http://www.htmq.com/htmlkihon/005.shtml
上二つのサイトを参考にしていますが、ブロック要素インライン要素をCSSで変えられるとかかれていました。
...
3
票
1
回答
128
閲覧数
PCサイトをスマートフォンで見るときの設定について
お世話になります。
初歩的な質問で恐縮ですが、
スマートフォンでPCサイトを見る時に指でサイズを拡大・縮小できます。それを固定にする(拡大・縮小をできなくする)にはどのような設定が必要になるかお教えいただけませんでしょうか。
3
票
1
回答
226
閲覧数
各国言語(日本語、英語、ドイツ語、・・・)のOS毎(win、mac)の標準ゴシックフォントを知りたい
各国言語(日本語、英語、ドイツ語、フランス語、イタリア語、スペイン語、ポルトガル語、韓国語、中国語、ロシア語など)のOS毎(win、mac)の標準ゴシックフォントを国毎に切り替えられるようにしたいのですが、国毎の標準ゴシックフォントはどのようになっているのでしょうか。フォント名を知りたいです。
3
票
1
回答
680
閲覧数
divだとfloat解除されるのに、spanだとされないのはなぜですか?
divにclear:leftを書くとfloat解除されるのに、
spanだとされないのはなぜですか?
[html]
<img src="images/001.png" alt="">
<!-- <div id="study_001"> -->
<span id="study_001">
<span id="...
3
票
1
回答
233
閲覧数
CSSセレクタでネームスペースを含むタグを選択する方法
以下のようなXMLがあるときにXPathを使えば問題なく取得できるのですが、CSSセレクタでも同様の取得はできますか?
doc = Nokogiri::XML(<<-EOF
<xbrli:xbrl xmlns:xbrli="http://www.xbrl.org/2003/instance">
<xbrli:context id="AsOf2016-09-30"&...
3
票
3
回答
5,680
閲覧数
大枠をコーディング不要で作成できる Webオーサリングツール
HTML/CSS を構築するにあたってできればコーディング不要、つまりグラフィカルなツールでの編集・プレビューを行いたいのですが、
何か良いツールはありませんでしょうか。
静的なページというよりは、何かしらのWebフレームワーク (Ruby on Rails, CakePHP, Django 等) と組み合わせるためのデザインを構築する際に使えるグラフィカルツールを必要に感じています。
過去(...
3
票
3
回答
2,109
閲覧数
jQuery / JavaScriptで、ページスクロール時にアクションを起こしたい
ページをスクロールした時に、スクロールした距離に応じて、オブジェクトの移動や透過をさせたい。パララックス効果についても簡潔な例を知りたい。
3
票
2
回答
214
閲覧数
Flexboxで中に二つのボックスがある場合、どちらのボックスに干渉せず真ん中に線を引きたい
flex-boxを使ってサイズがバラバラな二つの箱があった場合、中にあるboxにどちらも干渉せず、ちょうど真ん中にborderラインを引きたい場合どうしたら良いでしょうか?
html
<div class="flex-box">
<div class="red-box"></div>
<div class=&...
3
票
1
回答
1,745
閲覧数
border-spacingをtableの一部の範囲に適用しない
table.ex2
{
border-collapse:separate;
border-spacing:10px 50px;
}
<table class="ex2" border="1">
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
<tr&...
3
票
1
回答
683
閲覧数
インラインCSSで指定した文字色が適用されません。どこでオーバーライドしているか効率的に探す方法はないでしょうか?
以下のHTMLで、dlにclass属性が付いているせいなのか、 <dd style="color: #FF4500;"> と書いた部分のテキストがその色になりません。
<div id="content">
(略)
<section>
<h1>お知らせ</h1>
<dl class="dl-horizontal">
<...
3
票
1
回答
285
閲覧数
::first-letterで文字サイズを大きくすると、Safariでは後続の文字の位置が上にそろってしまう
::first-letterを使ったとき、下図のようにChromeに1行目と2行目の間に空間が普通より大きくなって、Safariには1行目の文字が上がりました:
line-heightの設定は変えませんでした。
こちらの例をSafariブラウザーで開いてください。
table{
font-family:"Century Gothic", Arial, "Hiragino ...
3
票
1
回答
2,240
閲覧数
Rendered Fontsに適用されるフォントについて
あるサイトでfont-familyがsans-serifが適用されているにも関わらずMeiryoで描画されていました。
cssの中を確認した所font-familyはsans-serifしか設定されていません。
sans-serifが無かった場合Meiryoで描画されるのかと思い、
同じように作ってみたのですが、MeiryoではなくMS PGothicで描画されてしまいました。
...
3
票
2
回答
2万
閲覧数
ページを最初から指定の位置にスクロールする
こちらのサイト(http://play-in-hell.com/)ではページが遷移すると一番下から表示されるようになっています。
このように指定した場所からトップページを表示させるにはどのようにしたらよいでしょうか?
私がやりたいのは、トップページに画像が貼ってありその画像の一番下の部分が必ず見えるようにしたいです。...
3
票
2
回答
1万
閲覧数
CSSのtransform、translateを取得するには?
cssのtransformプロパティについて質問があります。
transformプロパティに、translate(xpx, ypx)を指定した場合のデータを取得するには、どのようにしたらよいでしょうか?
この時、文字列以外の形式で取得したいです。
ウェブブラウザ:Google Chrome バージョン 45.0.2454.101 m
・試したこと
1.jqueryでcssを適用した場合
$(...
3
票
1
回答
149
閲覧数
PolymerとBootstrapの併用について
お世話になってます。
現在Bootstrapを使用してWebサイトを開発しています。
しかし、Polymerを利用して部品化してみようと思い、Polymerを導入したのですが、BootstrapのclassがComponentに反映されなかったりと何かと不具合が生じています。
Componentのhtmlには
polymer.htmlとbootstrap.min.cssをlinkしています。
...
3
票
1
回答
2,107
閲覧数
jQuery のアコーディオンに、それぞれのコンテンツ縦幅を設定したいです
アコーディオンを使ったウェブページをつくっておりまして、そのアコーディオン自体は正常に動いております。(動作は問題ないです)
アコーディオンは5つありまして、その一つ一つにそれぞれのコンテンツをいれたサイトを作りたいのですが、たとえばAのコンテンツを開くと縦幅が長すぎて、下のほうに空欄が出てしまいます。(B,C、D、Eも同様です)。
JavaScript で CSS ...
3
票
3
回答
2,153
閲覧数
Javascriptで特定のカラーを全て他の色に置き換えるには?
以下のHTMLとCSSがあるとき、Javascriptで #FF0000 を #0000FF に変更するには
すべての要素を繰り返し処理で回し、さらにcolorやborder-color、background-colorの
一つ一つの要素の中を覗いて書き換える方法しか思いつかないのですが、もうすこし
効率の良い方法はありますか?
また、:after や :before ...
3
票
1
回答
534
閲覧数
iPhone 6 Plus で `box-shadow` が transition 中に レンダリングしない
translate で 移動させている際に box-shadow の描画が消えてしまい
transition が終了されると再描画されるという現象に悩んでます。。
box-shadow 自体がレンダリングされないというバグの報告は幾つかあるのですが、
transition 中にだけ消えるので困っています
誰かご助力お願いします。
iOS は 8.0.2 です。
3
票
2
回答
7,391
閲覧数
selectフォームのborder-radiusをChromeでも変更するには?
目的はBootstrapベースのCSSをカスタマイズして、
フォーム関連のborder-radiusを変更したい(1px)のですが、
Bootstrapは、sassの変数で、
$border-radius-base: 1px;
$border-radius-large: 1px;
$border-radius-small: 1px;
で変更できました。
input:selectについては、...
3
票
1
回答
132
閲覧数
coverなのに画像の高さが無効化される
bootstrap4でサムネイルリストを作りましたが、そのCSSでobject-fitにcoverとしたにも関わらず、画像の高さがcoverになりません。どうすれば改善するのでしょうか?
HTML
<div class="container">
<div class="row">
<div class="col-6">
<...
3
票
1
回答
413
閲覧数
margin:0 auto;の中央揃えができません。
milkcocoaでチャットアプリを作成しておりますが、
チャットの文字が表示される箇所をブラウザ画面の左端ではなく中央揃えにしたいと考えています。
そこで、html、cssに以下のコードを記載していますが、左端に表示されたままになっております。
お知恵をお貸し頂けますでしょうか。
.center {
width:100px;
height:100px;
...
3
票
1
回答
2,076
閲覧数
button要素内の画像をCSSでグレースケール化したい
button要素内の画像をCSSでグレースケール化したい
下記のように、button要素にdisabled属性が付けられている場合だけ、内部のimg要素の画像をグレースケール化したいです。
<button disabled><img src="URL"/></button>
グレースケール化とその解除については、...
3
票
1
回答
418
閲覧数
cakephpでcss,javascriptを適応させる
app/MySample/index.ctp
上記のファイルにcssを適応する場合、どのようにするのが適切でしょうか?
app/MySampleにcssのフォルダを作り、その中にcssファイルを入れ、Controllerにecho $this->Html->css('sample');とすればいいのでしょうか?
同様に、JSの適応のさせ方も知りたいです。
詳しい方、ご教示ください。
3
票
3
回答
613
閲覧数
Galleriaで高さを指定しないと `Fatal error: Could not extract a stage height from the CSS.` が出てしまう
JavaScript ライブラリの Galleria で画像ギャラリーを実装しましたが、
Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.
というエラーが出てしまいます。
#galleria {
height: 500px;
}
のように height ...
3
票
2
回答
1,968
閲覧数
apache: メンテナンス画面(RewriteEngine)へCSSファイルを適用させたい
メンテナンス画面(RewriteEngine)へCSSファイルを適用させたいのですが、上手くいきません。
(メンテナンス時のhtmlは表示されています。)
また、直接メンテナンス用htmlファイルをダブルクリックし、立ち上げるとcssは適用されています。
適用させたいcssファイル名は import.css です。
階層
htdocs-maintenance.html
-css-...
3
票
0
回答
601
閲覧数
MonacaでボタンなどのコントロールのCSS変更
現在MonacaのボタンなどのコントロールのCSSを変更したいとおもっているのですが、反映されません。
jquery mobileをプロジェクトに追加前はCSSを変更できたのですが。
コードは以下のようになっています。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<...
3
票
1
回答
461
閲覧数
リキッドレイアウト × 幅の異なる画像 × 横並び の場合の高さの調整方法
リキッドレイアウトでHTMLを組んだ際に、画像サイズも自動的に縮小されて欲しいと思い、widthにパーセンテージを指定しました。
幅の異なる画像を隙間なく並べた場合に、縮尺の関係から縦幅がずれてしまい見栄えがよくありません。
この現象を解消したいのですが良い方法はありますでしょうか。
全体的にリキッドレイアウトにしたいので、heightに具体的なサイズを指定することはできません。
...
3
票
2
回答
1,497
閲覧数
リサイズした際、指定クラス名の(画面上の)横幅サイズを取得したい
前提
・レスポンシブサイト
<div class="hoge">
・hogeクラスは複数存在するが、全て同じサイズの動き(画面幅に応じた適切な幅で表示)
知りたいこと
・リサイズする度ごとに、画面上の「div hogeクラス」サイズを取得したい
※Chromeコンソール画面で、指定div要素にマウスオーバーした際に表示されるサイズ(オリジナルではなく画面上の表示サイズ)...
3
票
0
回答
252
閲覧数
Masonryを使って画像を一覧表示すると左右にスペースができてしまう
Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。
どのようにすればヘッダーにぴったり合わせることができるでしょうか
cssだけであればぴったり表示されるのですが、masonry.jsを入れるとスペースができます。
読み込みの瞬間は正しく表示されます。(0.1秒くらいですが。。)
css
* {...
3
票
0
回答
343
閲覧数
Rails アプリのCSSが効かなくなります。
Rails4で作成したアプリをHerokuにデプロイすると、CSSが効かなくなります。
デプロイした時はCSSが効いていても、数時間後あるいは翌日にアクセスするとCSSが効かなくなっています。これはどういうことなのでしょうか?ずっとこのような事態が続いています。
また効かないといっても完全に効かないというわけではなさそうです(99.5%のCSSは効いていませんが)。キャッシュの問題なのですかね?...
2
票
6
回答
8,914
閲覧数
JavaScriptやCSS内に記述するファイルへの絶対パス(フルパス)について教えてください。
CentOS(Linux)のお話になりますが、異なるディレクトリにあるHTMLファイルや
PHPファイルから参照できるように、JavaScriptやCSS内に記述されている
相対パスを絶対パスに変更したいです。
つまり、例えばJavaScriptだと、
$("#size_s img").attr("src","common/img/XXXXXXX.gif");
と記述されているのを、
$("...
2
票
3
回答
1,294
閲覧数
CSSで個数が不定のときに個々の長さが同じ横並びメニューを実装したい
CSSで、メニューの項目数が不定の時に一つ一つの項目の長さが統一されている横並びメニューをulとliを用いた方法で実装したいです。
メニューの項目数が固定ならば項目の長さを統一できるのですが、不定の時にどう実装すればいいかがわかりません。
HTMLは次のような形です。
<div class="menu">
<ul>
<li><a href="/...
2
票
2
回答
5,645
閲覧数
liの高さが中身のimgの高さより大きくなる。
liの高さが中身のimgの高さより大きくなりますが
なぜなのでしょうか?
インスペクターでも
高さが166になっています。
中身の画像の高さは160pxなのに、
liの高さは166pxになってしまいます。
*{
margin:0;
padding:0;
}
として、リセットしてもいるのですが。
liの高さ:166px
imgの高さ:160px
<...
2
票
1
回答
135
閲覧数
h1のfont-sizeは親要素を継承しないのでしょうか?
下記のコードを書いてみました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html {
font-size: 10px;
}
</style>
&...
2
票
1
回答
161
閲覧数
異なる色の関係性を数値化したい
やりたいこと
2つの色(16進数カラーコード)から、両者の関係性を数値化したい
例えば2色が「#ea4c89」「#e83e80」だった場合、「#ea4c89」から「#e83e80」を得るための「色相・彩度・明度」の差分値を求める方法を知りたいです。
上記で数値化した関係性(差分値)を、異なる色へ適用させることで新たな色を求めたい
上記結果を「#0000ff」...
2
票
2
回答
2,586
閲覧数
CSS のwidth定義(%指定)について、親要素・兄弟要素との関係をおさらいしたい
文面を改めました。
td要素にlabel要素を含む列で、当該td列の幅を超える文字数が格納されると、現況は幅が自動拡張されてしまいます。(文字が見切れた表示を期待していますが)
以下現況のHTMLであり
・上から3つ目のTDが問題の列で、divで囲み、Overflowの定義を追加したものの状況は変わりません。
⇒どういった対策が適策ですか?ちなみにtableにtable-layout: ...
2
票
2
回答
544
閲覧数
keyframeを用いて表示させる文字のアニメーション
keyframe animationをもちいてboxに表示させる文字を”A”→”B”→”C”→”D”->E""と変化させたいのですがcssのkeyframeからtext自体を変える方法がわかりません
<body>
<p>A->B->c->D</p>
<button onclick="start()">start</...
2
票
2
回答
292
閲覧数
ウェブコンテンツでよく見かけるこの山型マークは画像ですか?テキストですか?
赤で囲った部分ですが、テキストで出力するにはどうすればいいでしょうか?
論理和、論理積記号よりも横長なようですが。
2
票
1
回答
198
閲覧数
CSSセレクタでアスタリスクを使う場合 *[foo="bar"] と省略した場合 [foo="bar"] は等価ですか?
CSSセレクタを使う時にいつも
*[foo="bar"]
のようにアスタリスクで全てのタグにマッチすることを指定したのですが
[foo="bar"]
という記述をしているサイトがあり、全てにマッチしてるようなのですが
この二つの記述に何か動作の違いはありますか?
2
票
1
回答
371
閲覧数
jQuery mobileを使ってサムネイル画像が付いたリスト表示のズレ
jQuery mobileを使って、リストの左側にはサムネイル画像(jpg)、その右にはタイトルを表示させたいと思っています。
サムネイル画像は160(px)x90(px)で作成していますが、
(1) サムネイル画像の下に10pxくらいの隙間ができる。高さは90pxに指定しているのに?
(2) タイトル(テキスト)がサムネイルの下に潜り込む
(3) タイトルが長い場合に折り返したいが、最後に「......