CSSプロパティのaspect-ratioを使ってみる
要素のアスペクト比を設定できるaspect-ratioを使ってみます。...
HTML・CSSの記事一覧
Sassで数値から単位を除去する
Sassで単位のついた数値から単位を除去する方法をメモ。...
フォントサイズを画面幅に合わせて変更する
スマートフォンのサイト実装時にフォントサイズを画面幅に合わせて拡大・縮小したいという要望がたまにあるので、vwを使った実...
text-align: justifyを使ってみる
テキストを両端揃えにできるtext-align: justifyを使ってみます。...
pugでpictureタグのmixinを作成する
PCとSPでの画像の出しわけやwebpの対応でpugのmixinを作成する機会が度々あったので、作成方法をメモしておきま...
Sassでネストした親class名とタグを連結する
Sassでclassの指定をする際、特定のタグの場合のみ別のスタイルを指定したいということがあったので、調べた内容をメモ...
背景画像を中央や右、下からずらして配置する
以前に背景画像を右や下の位置から指定する方法や中央からずらして配置する方法を試しましたが、これらを複合して使おうとした際...
Photoshopのトラッキングの設定をコーディングに反映する
テキストのトラッキングの設定をPhotoshopのデータ通りに指定する方法をメモ。...
IEでinput textに表示される削除アイコンを非表示にする
inputの入力削除をjsで実装した際、IEで表示される削除アイコンを非表示にして挙動を合わせたいということがあったので...
inputのtypeがdateやtimeの場合に表示されるアイコンを非表示にする
input dateやtimeで表示されるアイコンを非表示にしたいことがあったので、設定方法をメモ。...
pugでstyleタグを直接記述する
サイト内のページURLリストをHTMLで作る場合など、サイト構築とは別でそのページのみCSSを使いたいということがあった...
flexboxの子要素に指定したz-indexが効いてしまう現象
flexboxの子要素に指定したz-indexがpositionがなくても効いてしまうということがあったので、調べた内容...
formaction属性でボタン毎に送信先を変更する
以前にJavaScriptでformのボタン毎に送信先を変更する記事を掲載しましたが、HTML5で追加された属性でもでき...
pattern属性を使ってみる
input要素にpattern属性を設定して、ブラウザに標準で用意されているバリデーションを試してみます。...
WebPを使ってみる
iOS Safariの14.0からWebP形式の画像をサポートしているそうなので、WebP形式の画像の作成方法とサイトで...
min-heightとalign-items centerの組み合わせがIE11で効かない
flexboxのalign-items: centerとmin-heightを組み合わせて設定した際、IE11でだけ上下...
detailsタグとsummaryタグを使ってみる
アコーディオンのようにコンテンツの開閉ができるようになるdetailsタグとsummaryタグを使ってみます。...
chromeのinputで本来の高さより小さくなる
以前に書いたinputに入力したテキストの上下が切れるの記事を調べている際に遭遇したのですが、inputに指定するlin...
inputに入力したテキストの上下が切れる
フォームのコーディングをした際、入力したテキストの下部が切れてしまう現象に遭遇したので、原因と対応方法をメモ。...
フォームのオートコンプリート使用時に背景色を変更しないようにする
chromeでフォームのオートコンプリートを使用した際に背景色が水色に変更されますが、色を変更しないようにしたいというこ...