【CSS】position: fixedが効かない場合の原因と対処法
「position: fixed;を使って画面に固定したいのになぜかできない…absoluteみたいな配置になってしまう」という現象でハマりました… というわけで、position: fixedが効かない原因と対処法を紹介します。 position: fixedが効かない原因親要素にtransformを指定していませんか？ 親要素にtransformを指定しているとposition: fixed;を指定しても背景画像が固定されず、表示が崩れます。こいつが原因ですね。 特に<body>にtransform: translate3d(0, 0, 0);を指定してる人（もしくはtransform: translateZ(0);）や、ハンバーガメニュー、モーダルなどを実装しようとしている人は注意しましょう。 jQueryで色々操作していると案外気づかなかったりしますからね。これ結構ハマりポイントで
Mobile Safariで最後の１文字が改行されてしまうバグ - くらげだらけ
スマートフォンブラウザ関係のバグは（Android browserを中心に）たくさんありますが、今回はかなりレアケースなバグの話と回避方法についてです。 タイトルどおり、iPhone/iPadのmobile safariやWebViewで日本語文字列の最後の１文字が不自然に改行されて表示されてしまうバグなのです。 どういうことかというと↓下のように表示されるということです。 くだくら げサンプルページも作りましたので、以下のページをiPhone, iPadで表示してみてください。 Sample: http://kudakurage.com/test/mobile_safari_line_break/ 発生条件 発生条件は少し複雑なため、そんなに遭遇することはありません。 （ただその分googleで検索しても、遭遇した例など出てきません） mobile safariで閲覧している PCブラウ
Flexbox からコンテンツはみ出る問題を完全に解決する - Qiita
* { overflow-wrap: break-word; word-wrap: break-word; } .d-flex:not(.flex-column)>* { min-width: 0; } .d-flex.flex-column>* { max-width: 100%; } <!DOCTYPE html> <meta charset="UTF-8"> <title>Flexbox overflow-wrap Test</title> <style> /* 体裁用 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } html, body, main { height: 100%; } main { width: 640px; background: ivory; marg
IE11 で disabled 属性の select 要素の color (文字色)を変える。 - Qiita
簡易メモ disabled 属性の select 要素は border や background-color と共に指定すると文字色が変わらない！ <select> <option>Normal</option> </select> <select disabled> <option>Disabled</option> </select> select { color: red; border: solid 1px black; background-color: orange; } select:disabled { color: blue; border: 1px solid black; background-color: orange; }
CSS Flexboxのレイアウトで起きる厄介な問題をJavaScriptを使用せずに、解決するテクニック
CSS Flexboxの利点は柔軟なレイアウトを行えることです。しかし、そのフレキシブルさがネックになってしまうことがあります。 ここ数ヵ月の間、あちこちのブログやコミュニティで議論されていたFlexboxのレイアウトで起きる厄介な問題が解決したようなので、紹介します。 The Flexbox Holy Albatross by Heydon Pickering 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSレイアウトの厄介な問題 Media Queryで実装する -ばかげてます JavaScriptで実装する CSSで解決 はじめに 私はこの6ヵ月の間、さまざまな活動に取り組んでいました。 ※これらに限定されるものではありません。 頭をかきむしる 窓の外をみつめる ベッドで天井をみつめる 枕に叫ぶ 呪文をつぶ
IE11でflexboxの縦幅がおかしい時はflexプロパティの書き方が原因かもしれない
公開2015.08.07 更新2017.12.03 仕事・技術 Windows10が発売されて新ブラウザのEdgeが使えるようになっても、まだまだInternetExplorerの呪縛からは逃れられません；； 今回はフロートを使ったレイアウトではなく今後主流になってくる「フレキシブルボックス」でのレイアウトで発生した問題です。 以下のようなコードがあるとします。 <div id="flexParent"> <header>ヘッダー</header> <main> <div class="flexChild left">左</div> <div class="flexChild right">右</div> </main> <footer>フッター</footer> </div> よくあるカタチで、縦並びにヘッダー、メインコンテンツ（左右に２カラムあるとします）、フッターがあります。 これら
flexboxのバグに立ち向かう（flexboxバグまとめ） - Qiita
注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f
positionとoverflow hiddenを併用する際の注意点
positionとoverflow hiddenを併用する際の注意点 2015.05.08 web css, html, overflow, position cssの positionとoverflow:hiddenを併用する場合。 上手く、overflow:hiddenが効かない時がある。 以下のような指定だと起こる <div style="overflow: hidden; width: 400px; height: 300px;"> <div style="position: absolute;top: 0px;left: 500px;"> <img src="sample.jpg"> </div> </div> 親要素にサイズ指定、overflow:hidden;をしても小要素のposition:absoluteが邪魔するらしく、 overflow:hidden;が効かなくなる。
CSS3 transition, transformを使用時に画像がぼやける | ふたえごのWEBテクニックブログ
馬刺し大好きな管理人がWeb制作で遭遇した バグや回避策などを記録していく日記です。 ご使用の際は自己責任で！！
WebPとLazyLoadを使って表示速度を向上させる 東京新宿のホームページ制作会社イッティ
売り上げ・アクセス数を伸ばしたい 月々の管理費を抑えたい リニューアルで失敗したくない 提案やサポートしてほしい ホームページに関することは お気軽にご相談ください
画像の下にできる隙間 - Webtech Walker
CSSでコーディングしているときに画像の下に謎の隙間ができることがあります。今回はその原因と対象方法について書きたいと思います。実際、以下のようになります。 ソースは以下です。 <div> <img src="/sample/image/sample.gif" alt="sample" />abcdefg </div> div{ background:#F00; width:200px; } この現象の原因はCSSのプロパティでインライン要素の垂直位置を指定する、vertical-alignにあります。このvertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているからです。vertical-alignの値の意味は下記サイトに載っていました。 vertical-align－スタイルシートリファレンス つまりgとかjとか下にはみ出るアルファベ
beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法
CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは文字化けが起こらないのですが、マルチブラウザをサポートしなくてはいけないような場合に備え、予防線を張っておく必要があります。 文字化けする要因CSSを外部ファイル定義している場合に起こるCSSファイルの文字コードが Shift_JIS でない (UTF-8 等)文字化け回避方法直接日本語を書くと文字化けする場合がある例えば下記のように直接contentプロパティに日本語で定義した場合、文字化けとなってしまう場合があります。 .test:after { content:"€ユーロ"; }前述の通り、ブラウザ依存による文字化けなので、ブラウザに依存しない方法で記述してあげましょう。 日本語の文字化けを回避する定義方法
imgとかinputなどの置換要素にはbefore, afterは使えないよ - しるてく
inputにbefore使おうとしてはまったのでメモ。 仕様読めばすぐ解決（できないという意味で）だったんだけど色々試して時間無駄にしてしまった。 12. Replaced content If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::af
上下（縦）の中央揃えでtable-cellのvertical-alignが効かない時 | ネッタン
先日、vertical-align：middleが効かずに軽くはまったので、その情報を共有したいと思います。 当初↑の図１のような配置。 修正で図２のように変更になりました。 上下（縦）の中央揃えですから、display:table-cellのvertical-alignを使って修正したのですが、これがなぜかうまく行きません。 ソースをよく確認してみると、floatを使っていることを思い出しました。 display:table-cellのvertical-alignで上下（縦）の中央揃えをする時には、floatは使ってはいけません。 今回、最初は縦の中央揃えの予定ではありませんでしたので、div Aにfloat:left、div Bにfloat:rightを使っていました。 後で修正が入った時にそのことを忘れていてdiv Bにそのままdisplay:table-cellのvertical-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
letter-spacingで字間を開けたときに最後の字の後ろまで開いてしまう問題への対処法 - Qiita
IEでposition指定の要素がズレる - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録