18
票
body に overflow:hidden; をあてるとなぜスクロールしなくなるのでしょうか?
overflowプロパティがbody要素に対して設定された場合、そのoverflowプロパティの値は、html要素 (ルート要素) に適用されます。そして、ルート要素に設定されたoverflowプロパティの値は、ビューポートへと適用されます1。
11.1.1 Overflow: the 'overflow' property
UAs must apply the 'overflow'...
14
票
Chromeで日本語の禁則処理が効かない
Chrome58以降、lang="ja" 属性と line-break: strict を付けることで、長音や拗音の前での行分割を抑制することができるようです。
現在CSSで禁則処理などを規定しているのは CSS Text Module Level 3 という文章なので、これを調べてみました。なお2017年12月現在も Working Draft なので最終稿ではありません。
長音(ー U+...
11
票
承認済み
特定の1行(HTML)に紐づいているJSを特定する方法はありますでしょうか?
Chromeブラウザの検証機能で確認できると思います。
検証したいDOMに対し右クリックして「検証」をクリック
HTMLパースペクティブで対象のDOMを右クリックして、「Break on > attribute modification」を選択
ページを再読込(F5等)
するとブレークが起きる
あとはStepOverやStep intoなどでJavascriptを追いかける。
今回は「...
11
票
承認済み
IE 11では思ったように星の色が変わりません。
※私は原因を明確に説明出来るほど今回の IE11 の動作を理解していないので、問題を解決するまでに行った作業の手順を示します。
まずは、 background-image プロパティへ設定している値を png ファイルへと替えたものを、 IE11 で動作させました。すると無事に動作したことから、インライン SVG を背景画像として使用している状況に原因があると推測出来ます。
....
9
票
承認済み
WAI-ARIAは最近のWebサイトでは必要なのでしょうか?
仕様上、必須とされているものではありません。しかし、心遣いとして利用したほうが良いと考えられます。ただしそれはモバイルファーストだけが理由ではありません。
例として aria-hidden で説明します。
目の不自由な方達は、スクリーンリーダー(読み上げソフト)を通じて Web コンテンツを利用しています。これらの読み上げソフトはかなり細かく HTML の内容を読み上げてしまうので、...
9
票
承認済み
CSSのposition:relativeで、left%だけが効いて、top%が効かないのはなぜ? topをpx指定にすると効きます
HTML / CSSでは子要素のサイズが確定しないことには親要素のサイズを決定できません。そのため親要素をheight: 0pxと仮定してレイアウトされたために子要素のtop: 50%も0pxとして扱われたのでしょう。
body { height: 300px; }
のように明示的な指定があれば、子要素のtop: 50%も効きます。
left: 50%が効く理由も同様に親要素がwidth: ...
9
票
A4用紙に印刷可能なピクセル数は?
pxは視野角を基準として決められていますが、プリンターの場合は標準の1px = 1/96th of 1inが適用されます(W3C CSS3)。A4の横幅が8.27インチなので、8.27 x 96 = 794pxです。
それでは1024px程度の幅でページを作成すれば、ブラウザの印刷機能の方でA4縦の幅に収まるかというと、FireFox、IE11、Edgeでは「縮小して全体を印刷する」...
9
票
@importするときの@の意味
質問者さんのおっしゃる通り、そのファイルでは
@import '@/assets/styles/mixin.scss';
は
@import '../assets/styles/mixin.scss';
と同じ意味だと思われます。この@が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。
...
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及び::...
7
票
承認済み
position: absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか?
ないです。
position: absolute や position: fixed が指定された要素は、通常のレイアウト処理から除外されるため、あたかも要素が存在していないかのように後続要素や親要素がレイアウトされます。float 等とは異なり、親要素の枠の外にでも配置できますから、その高さを親要素に考慮させるというのは無理な話です。
要素を横に並べる用途で使いたい場合、親要素に ...
7
票
承認済み
font-sizeは%またはpxの何れで指定する方が良い? 100%=16pxは何に基づくのでしょうか?
デフォルトのフォントサイズが16pxというのは、「現在の多くのブラウザのデフォルト設定がそうなっている」というだけです。例えばChromeでは普通に設定項目として存在します。
% em rem といった相対値のわかりやすい利点は、祖先要素(ルート要素など)のfont-sizeを変えることでまとめてフォントサイズを変更することができる、というものです。...
7
票
承認済み
DOMが書き換わった後ブラウザはどのように再描画していますか?
基本的には、DOM, HTML, CSS の仕様に準拠する範囲で不要な処理をしない、の積み重ねです。
大まかには「DOM変更→スタイル計算→レイアウト→ペイント→コンポジション」というステップがあります。以下のような処理はどのブラウザエンジンもやっているのではないかと思います。
DOM変更が、表示されているDocumentのツリーに接続していない部分で起きたら、何もしない
...
7
票
承認済み
:before, :after 疑似要素をコピーさせることができるか?
なぜ before, after 擬似要素のテキストがコピー出来ないのか
before, after 擬似要素のテキストがコピー出来ない理由は、端的にいえば、ドキュメントツリーにそれらの内容が存在しないからです。以下でもう少し詳細に説明します。
まず、 Cascading Style Sheets Level 2 Revision 2 の 12 章によれば、コンテンツは 2 ...
7
票
承認済み
文章の一部を黒く塗りつぶしたい
テキストの任意の箇所を選択するセレクタは、 CSS に用意されていません。そのため、装飾を適用したい箇所へ適当な要素へ入れておく必要があります。
文字色が黒の場合、単純に background プロパティと user-select プロパティを指定することで実現出来ます。
.marker {
user-select: none;
background: #000;
}
&...
6
票
承認済み
内部CSSは(htmlへ記述するから)キャッシュされないが、外部CSSはキャッシュされる?
<style> 要素に直接CSSを記述した場合、それもHTMLファイルの一部ですから、HTMLファイルの一部としてキャッシュされる可能性があります。キャッシュされないわけではありません。キャッシュの挙動を制御する方法として Cache-Control ヘッダなどがありますが、これはHTMLファイルに対してもCSSファイルに対しても有効です。
...
6
票
承認済み
CSSだけでdisplay: noneをかけた要素の大きさを保持したい
端的に言えば、不可能だと思います。
なぜならば、 display プロパティに none を指定した場合、ボックスは生成されないからです。また、 offsetWidth, offsetHeight 属性などは、要素に関連付けられた CSS レイアウトボックスがない場合に、 0 を返します[1]。
9.2.4 The 'display' property[2]
This value ...
5
票
承認済み
PCサイトをスマートフォンで見るときの設定について
生成される HTML 中に
<meta name="viewport" content="user-scalable=no">
を埋め込めばできそうな気がします(いやオイラはガラケの人なので確認してません)
ですが、「できる」ことと「やっていい」ことは違います。
http://2ndidea.com/accessibility/pros-cons-of-user-scalable-...
5
票
承認済み
<ul>のlist-styleのスペースを除去するには
ul にpadding があります。
.ul_left { ... } (必要なら.ul_list も)に padding : 0; を追加すればいいと思います。
5
票
特定の要素だけ残してページ遷移をする方法
HTML5 History APIを使用することで、履歴及びアドレスバーの表示を操作することができます。これにより、ページ遷移したかのように見せかけつつ表示するコンテンツを切り替えることができます。
例えばGoogleの検索・検索結果ページなんかもページ遷移は発生していません。
参考: ブラウザの履歴を操作する
5
票
承認済み
PC版Safariにおいて背景画像が表示されない
url(に対応する)閉じ括弧がありません。同じコードをコピペすると見る気が失せてミスを見逃しがちです。
var prj = $(this).parent().parent().parent().attr('class').split(' ')[1];
switch(prj)
{
case 'hyld':
case 'arg':
case 'ppl':
case '...
5
票
承認済み
HTMLで画像と文字が重なってしまう。
開発者ツールで見るとわかりますが、span に指定した padding が親要素 #study_001 の高さに反映されていません。もちろん、上下 margin も反映されていません。
インライン要素の上下位置や間隔は行の高さ、つまり line-height を基準に計算されます。ですから padding や border を指定した場合、その部分が親要素からはみ出したり、...
5
票
htmlのテキストボックスでtext-align:rightにすると入力した文字が左右に動く
Google Chrome 96.0.4664.110 において、当該現象が解消されていることを確認しました。
さらに、 menew さんがコメントにて参照されているバグチケットも同様に fixed となり、クローズされています[1]。
Issue 625631: Text field with text-align:right can scroll horizontally[1]
...
5
票
承認済み
liの高さが中身のimgの高さより大きくなる。
その縦幅のズレはpaddingやmarginによるものではありません。
フォントのベースラインから下端にかけて含まれるスペースによるものです。
フォントに依存するのでliタグのfont-familyを変えると縦幅のズレも変化します。
この隙間を無くす簡単な方法は2通りあります。
imgタグをブロック要素にする
imgタグのvertical-alignを行ボックスを基準にした属性(top, ...
5
票
ブロック要素とインライン要素について質問があります
短い回答
インライン要素をブロック要素にするとインライン要素にもブロック要素が入りますか?
いいえ。
長い回答
HTML4 では、要素の主要な分類 (カテゴリ) として、ブロックレベルとインラインがあります。基本的には、HTML4 Strict において body 要素の子要素として許可される要素のほとんどがブロックレベルに、それ以外がインラインに分類されています。ここで、...
5
票
承認済み
異なる色の関係性を数値化したい
「色相・彩度・明度」の差分値、と書かれているのが RGB 色空間から HSV 色空間に変換して要素ごとの差をとりたい、という意味だとすると、これは素直に変換して差をとってやれば良いです。雑な変換で良ければこれで OK そうです。細かい計算が面倒であればオンラインに色々変換ツールが転がっているのでそれを利用できるでしょう(ユーザーの入力に合わせて計算したい訳じゃなくて、自分が 1 回計算できれば良い、...
5
票
承認済み
CSSセレクタのh1 + *[rel=up]の意味が分かりません
ユニバーサルセレクターですね。あらゆる HTML 要素がマッチします。
The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree.
つまり、例の
h1 + *[rel=up]
は h1 ...
5
票
承認済み
h1のfont-sizeは親要素を継承しないのでしょうか?
継承されていますが、ユーザーエージェントのスタイルシートによるh1要素へのスタイル指定で上書きされています。
その要素へのスタイル指定は、親から継承されたものよりもユーザーエージェントのスタイルシートによるものが優先されるからです。
なお
h1 {
font: inherit;
}
をCSSに加えると継承しました。
これはh1要素へ親から継承するように指定しているので、...
5
票
承認済み
クラス名にコロン(:)は許可されているのでしょうか?
: 使えます。セレクタ中に書く場合は .foo\:bar のようにエスケープします。
仕様書は下記4つでしょうか。
https://drafts.csswg.org/selectors/
https://drafts.csswg.org/css-syntax-3/
https://html.spec.whatwg.org/multipage/
https://dom.spec.whatwg.org/...
5
票
承認済み
CSSで日本語の文字のみ別のフォントにしたい
全く英数字を含まないフォントの需要が無いのか、見当たりませんでした。たぶん、既存のフォントを自分でカスタマイズする以外は存在しないと思います。
では、CSSでやりたいことはできないかというとできましたので、下記にサンプルを置いておきます。
@font-face {
font-family: "MS PGothic JP";
src: local("MS PGothic");
...
4
票
承認済み
このサイトの下矢印の文字はどのようにすれば出てくるのでしょうか?
Font Awesomeというアイコンに特化したCSSツールキットを使用しています。使い方はFont AwesomeのGet StartedやExampleを参考にしてください。
無効化に投票
関連するタグ
css × 723html × 476
javascript × 205
jquery × 87
twitter-bootstrap × 35
php × 24
ruby-on-rails × 18
sass × 18
wordpress × 17
monaca × 14
font × 11
ios × 10
google-chrome × 9
safari × 9
onsen-ui × 7
vscode × 7
internet-explorer × 7
svg × 7
python × 6
android × 6
ruby × 6
vue.js × 6
reactjs × 5
github-pages × 5
visual-studio × 4