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
票
Accepted
特定の1行(HTML)に紐づいているJSを特定する方法はありますでしょうか?
Chromeブラウザの検証機能で確認できると思います。
検証したいDOMに対し右クリックして「検証」をクリック
HTMLパースペクティブで対象のDOMを右クリックして、「Break on > attribute modification」を選択
ページを再読込(F5等)
するとブレークが起きる
あとはStepOverやStep intoなどでJavascriptを追いかける。
今回は「...
10
票
Accepted
IE 11では思ったように星の色が変わりません。
※私は原因を明確に説明出来るほど今回の IE11 の動作を理解していないので、問題を解決するまでに行った作業の手順を示します。
まずは、 background-image プロパティへ設定している値を png ファイルへと替えたものを、 IE11 で動作させました。すると無事に動作したことから、インライン SVG を背景画像として使用している状況に原因があると推測出来ます。
....
9
票
Accepted
WAI-ARIAは最近のWebサイトでは必要なのでしょうか?
仕様上、必須とされているものではありません。しかし、心遣いとして利用したほうが良いと考えられます。ただしそれはモバイルファーストだけが理由ではありません。
例として aria-hidden で説明します。
目の不自由な方達は、スクリーンリーダー(読み上げソフト)を通じて Web コンテンツを利用しています。これらの読み上げソフトはかなり細かく HTML の内容を読み上げてしまうので、...
9
票
Accepted
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の設定ファイルを見れば答えが載っているかと思います。
...
8
票
Accepted
flexboxの孫要素にheight:100%が効かない理由はなぜですか
TL;DR
Chrome系 (Blink) とSafari (Webkit) のバグです。
Chromeでは16年5月に公開された Chrome 51で修正されました。
SafariではSafari 11で修正されたので17年7月現在はまだプレビュー段階ですし、Safari 10 以下を対象にする場合はやはり孫要素もflexboxでgrow/stretchさせる必要があるかと思います。
...
7
票
Accepted
Webフォントで複数文字の文字列が、一文字分の字形で表示される仕組み
合字です。
live_helpという文字がアイコン1文字に見えるのは、live_helpの文字列の流れで1つの合字として表示させているからだと思います。
CSS3で-webkit-font-feature-settingsにligaを指定しているのは、合字の機能を有効にするためです。(参考: フォントの機能を使えるCSS3のFont feature settingsとは)
試しに-webkit-...
7
票
Accepted
::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
票
Accepted
font-sizeは%またはpxの何れで指定する方が良い? 100%=16pxは何に基づくのでしょうか?
デフォルトのフォントサイズが16pxというのは、「現在の多くのブラウザのデフォルト設定がそうなっている」というだけです。例えばChromeでは普通に設定項目として存在します。
% em rem といった相対値のわかりやすい利点は、祖先要素(ルート要素など)のfont-sizeを変えることでまとめてフォントサイズを変更することができる、というものです。...
7
票
Accepted
:before, :after 疑似要素をコピーさせることができるか?
なぜ before, after 擬似要素のテキストがコピー出来ないのか
before, after 擬似要素のテキストがコピー出来ない理由は、端的にいえば、ドキュメントツリーにそれらの内容が存在しないからです。以下でもう少し詳細に説明します。
まず、 Cascading Style Sheets Level 2 Revision 2 の 12 章によれば、コンテンツは 2 ...
7
票
Accepted
文章の一部を黒く塗りつぶしたい
テキストの任意の箇所を選択するセレクタは、 CSS に用意されていません。そのため、装飾を適用したい箇所へ適当な要素へ入れておく必要があります。
文字色が黒の場合、単純に background プロパティと user-select プロパティを指定することで実現出来ます。
.marker {
user-select: none;
background: #000;
}
&...
6
票
input[type=checkbox] に対して :before, :after 疑似要素が使えるのはChromeだけ?
::beforeや::afterは対象となる要素のコンテンツの先頭および末尾に疑似的に要素を追加するものです。
<style>
div::before{
content: 'abc';
}
</style>
<div>def</div>
は
<div><div::before />def&...
6
票
Accepted
背景にCSSのfilterを使用すると,前面の文字が表示されない
z-index を指定する際には position に static 以外を指定する必要がありますが、あなたのコードでは #background #content のどちらにもこれが指定されていません。
これがなくても動くのは Firefox のバグのような気がします。
以下解説。
画像編集ソフトでいうところのレイヤーのように、...
6
票
Accepted
「position: static」は相対位置指定ではない?
通常フロー、つまり基本のルール通りにレイアウトを行い、位置指定をしないのが position: static です。それに反して位置指定を行うのが position: relative やその他の設定値です。
そのMDN記事の冒頭に以下の記述がありますが、staticはここに含まれていないですよね。
位置指定された要素 (positioned element) とは、計算された ...
6
票
Accepted
position: absolute;した親要素の高さがなくなるのを解消する一般的な(clearfixのような)方法はありませんか?
ないです。
position: absolute や position: fixed が指定された要素は、通常のレイアウト処理から除外されるため、あたかも要素が存在していないかのように後続要素や親要素がレイアウトされます。float 等とは異なり、親要素の枠の外にでも配置できますから、その高さを親要素に考慮させるというのは無理な話です。
要素を横に並べる用途で使いたい場合、親要素に ...
6
票
Accepted
内部CSSは(htmlへ記述するから)キャッシュされないが、外部CSSはキャッシュされる?
<style> 要素に直接CSSを記述した場合、それもHTMLファイルの一部ですから、HTMLファイルの一部としてキャッシュされる可能性があります。キャッシュされないわけではありません。キャッシュの挙動を制御する方法として Cache-Control ヘッダなどがありますが、これはHTMLファイルに対してもCSSファイルに対しても有効です。
...
6
票
Accepted
DOMが書き換わった後ブラウザはどのように再描画していますか?
基本的には、DOM, HTML, CSS の仕様に準拠する範囲で不要な処理をしない、の積み重ねです。
大まかには「DOM変更→スタイル計算→レイアウト→ペイント→コンポジション」というステップがあります。以下のような処理はどのブラウザエンジンもやっているのではないかと思います。
DOM変更が、表示されているDocumentのツリーに接続していない部分で起きたら、何もしない
...
6
票
Accepted
CSSだけでdisplay: noneをかけた要素の大きさを保持したい
端的に言えば、不可能だと思います。
なぜならば、 display プロパティに none を指定した場合、ボックスは生成されないからです。また、 offsetWidth, offsetHeight 属性などは、要素に関連付けられた CSS レイアウトボックスがない場合に、 0 を返します[1]。
9.2.4 The 'display' property[2]
This value ...
5
票
Accepted
<ul>のlist-styleのスペースを除去するには
ul にpadding があります。
.ul_left { ... } (必要なら.ul_list も)に padding : 0; を追加すればいいと思います。
5
票
Accepted
PCサイトをスマートフォンで見るときの設定について
生成される HTML 中に
<meta name="viewport" content="user-scalable=no">
を埋め込めばできそうな気がします(いやオイラはガラケの人なので確認してません)
ですが、「できる」ことと「やっていい」ことは違います。
http://2ndidea.com/accessibility/pros-cons-of-user-scalable-...
5
票
特定の要素だけ残してページ遷移をする方法
HTML5 History APIを使用することで、履歴及びアドレスバーの表示を操作することができます。これにより、ページ遷移したかのように見せかけつつ表示するコンテンツを切り替えることができます。
例えばGoogleの検索・検索結果ページなんかもページ遷移は発生していません。
参考: ブラウザの履歴を操作する
5
票
Accepted
PC版Safariにおいて背景画像が表示されない
url(に対応する)閉じ括弧がありません。同じコードをコピペすると見る気が失せてミスを見逃しがちです。
var prj = $(this).parent().parent().parent().attr('class').split(' ')[1];
switch(prj)
{
case 'hyld':
case 'arg':
case 'ppl':
case '...
5
票
Accepted
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
票
Accepted
liの高さが中身のimgの高さより大きくなる。
その縦幅のズレはpaddingやmarginによるものではありません。
フォントのベースラインから下端にかけて含まれるスペースによるものです。
フォントに依存するのでliタグのfont-familyを変えると縦幅のズレも変化します。
この隙間を無くす簡単な方法は2通りあります。
imgタグをブロック要素にする
imgタグのvertical-alignを行ボックスを基準にした属性(top, ...
5
票
ブロック要素とインライン要素について質問があります
短い回答
インライン要素をブロック要素にするとインライン要素にもブロック要素が入りますか?
いいえ。
長い回答
HTML4 では、要素の主要な分類 (カテゴリ) として、ブロックレベルとインラインがあります。基本的には、HTML4 Strict において body 要素の子要素として許可される要素のほとんどがブロックレベルに、それ以外がインラインに分類されています。ここで、...
5
票
Accepted
異なる色の関係性を数値化したい
「色相・彩度・明度」の差分値、と書かれているのが RGB 色空間から HSV 色空間に変換して要素ごとの差をとりたい、という意味だとすると、これは素直に変換して差をとってやれば良いです。雑な変換で良ければこれで OK そうです。細かい計算が面倒であればオンラインに色々変換ツールが転がっているのでそれを利用できるでしょう(ユーザーの入力に合わせて計算したい訳じゃなくて、自分が 1 回計算できれば良い、...
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
css × 684html × 385
javascript × 195
jquery × 85
html5 × 63
php × 24
sass × 19
bootstrap × 18
ruby-on-rails × 17
wordpress × 17
monaca × 14
twitter-bootstrap × 12
font × 11
ios × 9
safari × 8
onsen-ui × 7
vscode × 7
google-chrome × 7
internet-explorer × 7
svg × 7
python × 6
ruby × 6
android × 5
vue.js × 5
reactjs × 5