HTML/CSS

HTML/CSS

inputのフォーカス時、キーボードの出現を抑止する(html)

入力補助やプルダウン等を自力で実装している場合など、フォーカス時にバーチャルキーボードを出現させたくない時があります。(主にスマホ) そういう場合はこのinputmode="none"を使いましょう。フォーカス時にキーボードが表示さ...
HTML/CSS

CSSで斜め線を引く

画像に斜線を被せて表示したいケースがあったので備忘録。backgroundを透過を組み合わせてlinear-gradientで表現することで斜線にする。 .diagonalLine::before { conten...
HTML/CSS

IEだと游ゴシックで文字がやや上よりに表示される。

こんな時代でもIEに悩まされるのかよ、という感じです。お仕事でふと配置の乱れが気になる箇所があったので、詳細を調べてみるとフォントが原因だった。vertical alignとかを疑ったけど、フォントは完全に盲点。 こんな感じ...
HTML/CSS

after/before疑似要素を親の相対サイズで表示する。

CSSでafter要素を親要素に対して相対サイズで正方形で表示したい、と思う事ってありますよね? 親要素が最初から正方形であれば普通にwidthとheightを%指定すれば問題なく表示されます。 #hoge::after{ ...
HTML/CSS

IEでcssのunset / initialが機能しない

そもそもIEでは非対応でした。状況に応じて自力で設定しましょう。 今回はoverflow: unset;が効きませんでした。なのでvisibleへ変更でようやくIE対応完了です。なんで2020年にもなってIE対応やってんだか...
HTML/CSS

bootstrap(rails)

bootstrap インストール jqueryも必要らしい。 gem 'bootstrap', '~> 4.1.1' gem 'jquery-rails' application.scss @import "bo...
HTML/CSS

SASS

.sassと.scssがある。scssを用いる。 総論 リンク先が未定の場合はpathの仮置として#を置く application.scss では基本的にimportのみをする。 cssを読み込む順 @imp...
HTML/CSS

CSS

位置指定 display display inline-block inline-blockにして並べると微妙な隙間ができる。 => display; flex:やfloat推奨 Float 親要素に含...
HTML/CSS

HTML

ul unorderd list Xpath XML文章中の要素、属性値などを指定するための言語。mechanizeのsearchメソッド内でそのまま使える。同一属性の指定が非常に楽。特にテーブルで。htmlの検証画面か...
スポンサーリンク