CSSのresizeを使ってみる
ユーザーが要素のリサイズを行えるようにするCSSのプロパティ「resize」を使ってみます。...
HTML・CSSの記事一覧
背景色の付いた要素をflexboxで高さ揃え+内容を上下中央揃えにする
flexboxでタイトルのような実装をするときにいつも迷うので、実装方法をメモしておきます。...
Sassでカテゴリーの色を管理する
Sassの配列を使ってカテゴリーの色を管理する方法を試してみます。...
フォーム要素のスタイルをリセットする
フォーム要素のスタイルをリセットしたい場面がよくあるので、それぞれのスタイルのリセットを試してみます。...
Sassで関数を作成する
Sassで自作の関数を作ってみます...
flexboxで要素を両端揃えにする
flexboxで複数の要素を横並びにする際、要素を両端揃えにする(親要素に左端と右端を合わせる)方法を試してみます。...
PugでSVGを使用する
PugでSVGを使う時に少し迷ったのでメモ。...
Sassで小数点以下の値を扱う
Sassで小数点の切り上げ・切り下げや四捨五入をする方法をメモ。...
imgタグで埋め込んだSVGが表示されない
imgタグを使ってSVGを埋め込んだ時にうまく表示されないことがあったので、その際の対応方法をメモしておきます。...
keyframesのアニメーションで完了時の状態で停止する
keyframesのアニメーション完了後に、完了時(100%)の状態で停止させる方法をメモ。...
Pugでコンパイル後の内容をコメントアウトする
PugをコンパイルしたHTMLで、一部コードをコメントアウトしたい時に少し迷ったのでメモ。...
iPadやAndroid Tabletでheight: 100%;が効かない
PCだとheight:100%;が意図した形で効いているのに、iPadやAndroid Tabletでは効かない現象に遭...
メガドロップダウンメニューでメニューがうまく切り替えられない不具合の対応
文章では説明しにくいのですが、メガドロップダウンメニューでナビBからナビAに切り替えた際に、ナビBのメニューがフェードア...
CSSでフェードのアニメーションを実装する
CSSでフェードのアニメーションを実装する方法をメモ。...
Pugでタグの外にテキストを出力する
Pugでチェックボックスとテキストを並べて出力しようとしたときに少し迷ったのでメモ。...
異なるサイズの画像でRetina対応をする方法
個人的にRetina対応をする場合、imgタグのwidth/heightに実サイズの半分を指定するか、画像サイズに応じて...
ページ内リンクが日本語だとIEでリンクが効かない
ページ内リンクのハッシュ部分にエンコードした文字列を指定していたのですが、IEでだけページ内リンクが効かないようだったの...
Pugとgulp-dataを使ってmetaの内容をjsonで管理する
gulp-dataを使って、Pugで使うmetaの内容をjsonで管理するようにしてみます。...
tabindex属性でフォーカスを当てられるようにする
tabindex属性を使って、aタグ以外の要素でもフォーカスを当てられるようにしてみます。...
keyframesのアニメーションを一時停止する
keyframesのアニメーションで一時停止する方法をメモ。...