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
票
css 命名の質問
CSSクラス名に困る時点で、適切なスタイル・文書構造でない可能性があります。 …
6
票
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?
::beforeや::afterは対象となる要素のコンテンツの先頭および末尾に疑似的に要素を追加するものです。
<style>
div::before{
content: 'abc';
}
</style>
<div>def</div>
は
<div><div::before />def</div>
であり
<div>abcdef</div>
と …
4
票
「position: static」は相対位置指定ではない?
そもそも「相対位置」というからには基準となる位置が存在します。つまりposition: relativeはposition: staticの位置からの相対位置です。
7
票
承認済み
::before,::after擬似要素の親要素は?
5.12.3 The :before and :after pseudo-elementsより
The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content.
つまり、::before及び::afterはite …
4
票
承認済み
CSSセレクタでアスタリスクを使う場合 *[foo="bar"] と省略した場合 [foo="bar"] は等価ですか?
Selectors Level 3 - 6.2. Universal selectorに説明がありますが、同じです。
*[hreflang|=en] and [hreflang|=en] are equivalent,
*.warning and .warning are equivalent,
*#myid and #myid are equivalent.
なお
N …
9
票
承認済み
CSSのposition:relativeで、left%だけが効いて、top%が効かないのはなぜ? topをpx指定にすると効きます
HTML / CSSでは子要素のサイズが確定しないことには親要素のサイズを決定できません。そのため親要素をheight: 0pxと仮定してレイアウトされたために子要素のtop: 50%も0pxとして扱われたのでしょう。
body { height: 300px; }
のように明示的な指定があれば、子要素のtop: 50%も効きます。 …
2
票
承認済み
position:absolute;でtop及びleft未指定時の挙動について(初期値は?)
position: absolute;が指定されるとその要素が存在しなかったものとして以降の要素が配置されます。結果としてThreeとFourは重なります。しかし、Fourはmargin相殺により20px上に配置されるため、Threeが下にずれたような印象を受けます。padding: 20pxと比較したり、margin-topとmargin-bottomを異なる値にするとわかりやすいかと思います。 …
0
票
承認済み
pタグ間の空白を0にしたい
margin: 1rem auto;}
}
不正な閉じ括弧のせいでCSSが解釈されていません。 …
1
票
承認済み
display:flexにおける子要素の動き
align-content: flex-start;(既定値はstretch)でしょうか。
2
票
承認済み
Flexboxで、1行に並ぶボックスの数を指定したい。
まずflexboxの設定として上下両端に合わせと左右両端に合わせにより四隅に配置されるように準備します。
.container {
align-content: space-between;
justify-content: space-between;
}
次に幅100%のダミー要素を用意することで、いつでも溢れて改行されるように準備します。
.container::after …
1
票
承認済み
Flexboxで、flexプロパティとwidthでの%指定の違いは?
widthは要素単独で決定される幅です。一方、指定された幅でレイアウトした後に余白部分をどう分け合うかを指定するのがflex-growです。
たまにフォントなどの都合で指定通りのwidthにならず、縦に積み重なるように崩れてしまっているWebサイトを見かけたりしますが、Flexbox及びflex-growを使用したレイアウトをしていれば意図しない折り返しを防ぐことができるかと思います。
1
票
absoluteでは回り込みができない?
position: absolute は
absolute
要素のためのスペースが確保されません。
とあるように、他の要素は当該要素が存在しなかったものとしてレイアウトが行われます。当然回り込むことはありません。
記載されている質問文だけではどのようなレイアウトを検討されているか第三者にはわかりませんので、上記動作を念頭にスタイルを検討してください。
2
票
web用画像の解像度は72ppiと教えられましたが最近は…?
なお、現在はCSSメディアクエリを用いることによってデバイスのサイズや解像度に応じてスタイルを切り替えることができます。
複数の解像度で画像を用意しておき、デバイスに応じて選択されることをお勧めします。 …
0
票
CSS の background-image で指定した画像が反映されない
D:\~とはじまるものですが、あっていますか?
D:\~ という形式はセキュリティ上、表示できません。仮にbackgroud-imageとして表示されたとしても、このファイルは質問者さんのパソコンにしか存在しないため、第三者の環境では表示されることはないわけですが、HTMLの作成目的を見失っていませんか?
4
票
承認済み
JavaScriptでIDやClassではない要素の取得
CSSセレクターで表現できる内容であれば要素を取得できます。
// 最初のみ
document.querySelector('[hoge="C"]');
// 該当するすべて
document.querySelectorAll('[hoge="C"]'); …