Search type | Search syntax |
---|---|
タグ | [タグ] |
完全一致 | "ここの単語" |
作成者 |
user:1234 user:me (あなたの) |
スコア |
score:3 (3+) score:0 (なし) |
回答 |
answers:3 (3+) answers:0 (なし) isaccepted:yes hasaccepted:no inquestion:1234 |
閲覧数 | views:250 |
コード | code:"if (foo != bar)" |
セクション |
title:リンゴ body:"リンゴ オレンジ" |
URL | url:"*.example.com" |
セーブ | in:saves |
状態 |
closed:yes duplicate:no migrated:no wiki:no |
種類 |
is:question is:answer |
除外 |
-[タグ] -リンゴ |
高度な検索の詳細については、ヘルプ ページをご覧ください。 |
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
3
票
BEM(CSS)を取り入れたサイトを教えて下さい
Material Design LiteはBEMに沿ったクラス名を使用しています。
4
票
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?
inputには中身が無いので挿入のしようも無い、というのが Firefox の仕様の解釈なのだと思います。
隣に中身を持てる要素を用意し、隣接セレクタで設定するとよいです。
input + span:before {
content: 'not checked';
}
input:checked + span:before {
content: 'checked';
} …
3
票
承認済み
親要素の「transform: translate3d」設定値を変更した場合でも、子要素の位置を position: fixed で固定したい
この場合position: fixed; は、
祖先要素の transform プロパティが none 以外に設定されている場合、その祖先要素がビューポートの代わりにこの要素の包含ブロックとして使用されます
https://developer.mozilla.org/ja/docs/Web/CSS/position
との理由で、画面に対する固定にはなっていません。 …
4
票
承認済み
CSSのmin-widthとmax-widthに同じ値を指定する利点
(こういった配慮が必要になるかは、CSS の設計によると思います)
下記スニペットの例ですと、CSS側では.xxへの指定としてwidth: 5em;を指定しています。
しかし、HTML側で.xxが付いているのはp要素ですから、pへのスタイル指定のmin-width: 10em;も有効です。
この場合min-widthに制約され、widthは10emより小くならないという事になります。 …
2
票
承認済み
CSSのtransform、translateを取得するには?
Chrome ではgetComputedStyleで "none" が返るようですね。なぜでしょうか。
rect = document.querySelector("#rect1");
transform = getComputedStyle(react).transform;
// firefox -> "matrix(1, 0, 0, 1, 50, 50)"
// chrome -> " …
1
票
承認済み
Flexboxの要素の大きさを画面サイズによらず固定したい
flex-grow: 0;
flex-shrink: 0;
とすると画面幅によらず、widthに従います。(高さに関しては未検証です。)
widthでなくflex-basisを使うのならばflexショートハンドを使って、
flex: 0 0 10em;
の様に指定する事も出来ます。
div{
border-style: solid;
}
.box{
di …
1
票
style属性のみを使い、一定のウィンドウ幅を超えたら2段組みになるようにしたい
display: flexの要素を作り、段組みしたい要素をその子要素にするというのはどうでしょうか。
両方の子要素にflex: 1 1 390pxと指定すると、390px(とりあえず 780/2 で適当に決めました)をベースとして必要に応じて同じ比率で伸縮するようになります。
親要素にflex-wrap: wrapとしているので、ベースの390pxが保てない幅になったら自動で折り返され縦組になりま …
1
票
承認済み
HTML: ふりがな(ruby)を追加するときに行間拡大を少なくする
テキストの行間が、ルビの高さより大きければ、ルビのある行間だけ大きくなる事はありません。
地の文のline-heightとルビの文字のfont-sizeを適切なバランスで設定すればよいです。
質問の画像のテキストは、line-heightが1.8emくらいはありそうです。
行間は1.8em - 1emで0.8em程度になります。
ルビの文字(<rt>)のfont-sizeは0.5em(日本語組版 …
2
票
承認済み
固定widthの親要素内の子要素でmin-width指定
div 要素の標準は display: block なので、何も指定しないと幅は親要素一杯に広がります。display プロパティを inline-block や table などにすると、中身に応じて幅が伸縮します。
.parent {
width: 500px;
background-color: darkblue;
}
.child {
dis …
0
票
ボタンの中に斜めの線を入れたい
1色目と3色目: 同じ色であり、背景となる
2色目: 描きたい線
CSSでストライプを実現するため、linear-gradient を使います。 …
1
票
複数行のテキスト:positionで場所固定すると、全行にあった下線が消えてしまう
position: absolute を指定すると、 display には inline を指定していても block として計算されます。
仕様
最新ではないかも知れませんが、下記の仕様が該当すると思います。(追記: int32_tさんの回答にある仕様の方が新しいと思いますので、そちらを参照した方が良いかも知れません)
原文: 『9.7 Relationships between 'displ …
0
票
承認済み
input rangeのつまみを画像にしたい
input要素自体にも-webkit-appearance: none;を指定する必要があるようです。
#filter input[type=range]{ -webkit-appearance: none; }
こうすると、スライダーの横線もデフォルトのスタイルが消えるので、::-webkit-slider-runnable-trackも設定します。
#filter input …
1
票
承認済み
marqueeをCSSに代替するには。
その場合、要素の最初の位置が不自然と感じるでしょうからCSSでtransform: translateX(-100%);として見えない場所へ移動させています。
(当初のコードでは手動で移動させる事は考慮していなかったので、判定がいいかげんで移動させられる位置が制限されていました。少しだけ堅牢なコードに直してあります。) …
0
票
CSS/Javascriptでテキストにマウスカーソルが乗っているかの判定
下のスニペットはcanvas要素を使った例です。
しかし、おそらく質問者さんは通常のHTML要素で描画されている字形に対して、判定を行ないたいのだと思います。
それもcanvasを使った方法の応用で出来るかもしれませんが、少し考えてみないと分かりません。
function text_shape(elm){
"use strict";
var ctx = elm.getContex …
1
票
承認済み
cssnext から rem に自動で px を加える機能をなくしたい
gulp-postcss');
const cssnext = require('postcss-cssnext');
const cssnextWithoutRem = cssnext({
features: {
rem: false,
},
});
const cssPlugins = [
cssnextWithoutRem,
];
gulp.task("css … /src/**/*.css')
.pipe(postcss(cssPlugins))
.pipe(gulp.dest('./dest/'));
});
gulp.task("default", ["css"]); …