Pugのmixinの引数をオブジェクト形式で設定する
Pugのmixinを作成する際、複数設定した引数の一部だけ使いたいということがあったので、オブジェクト形式で設定する方法...
HTML・CSSの記事一覧
Storybookで参照するディレクトリとビルドするディレクトリを変更する
Storybookで使用するストーリーの読み込み元と、ビルド時の出力先を変更する方法をメモ。...
CSSでテキスト選択をできないようにする
要素をドラッグ＆ドロップで動かせるようにしたい場合など、一部のテキストを選択できないようにしたいことがたまにあるので、設...
object-fitを使ってみる
imgやvideoなどの要素を、コンテナにどう配置するかを指定できるCSSプロパティ「object-fit」を試してみま...
Dart Sassの@useでファイルをまとめて読み込む
以前にgulp-sassでDart Sassを使用する記事を投稿しましたが、この環境の@useで複数のSassファイルを...
Storybookを使ってみる
UIコンポーネント集を構築できるツールのStorybookを簡単に使ってみます。 今回はStorybook for HT...
webpack環境のPugで変数を別ファイルでも使用できるようにする
Gulpからwebpackに環境を移した際、別ファイルで定義した変数を使用できないということがあったので、その際の対応方...
横方向に流れ続けるスライドを実装する
横方向に要素をスクロールし続けるという実装をすることがたまにあるので、CSSを使った実装方法をメモしておきます。...
CSSアニメーションのイベントを試してみる
transitionやanimationを使ったアニメーションで、開始時や終了時をJavaScriptで取得する方法を試...
tableで横スクロールバーを追加する
以前にtableで横スクロールできるようにするという記事で、tableにラッパー要素を追加して横スクロールの設定を追加す...
縦並びで複数列のリストを作成する
リストを縦方向に並べて、一定位置で折り返して次の列に並べるという実装をしたいことがあったので、実装方法を考えてみました。...
gulp-sassでDart Sassを使用する
新しい環境でgulp-sassを設定する機会があったので、Dart Sassを使用する方法をメモ。 今回はgulpが4....
Tailwind CSSを使ってみる
Tailwind CSSを簡単に触ってみます。...
Animate.cssを使ってみる
簡易に要素のアニメーションを設定できるCSSのライブラリ「Animate.css」を試してみます。 使用するバージョンは...
CSSでスマホ時のみ電話番号にリンクを設定する
スマホでの閲覧時のみ電話番号にリンクを張りたいということがあったので、CSSのメディアクエリで判別して一定の画面幅以下の...
CSSで変数を使ってみる
CSSで変数を定義できるカスタムプロパティを使ってみます。...
CSSのmin()・max()・clamp()を使ってみる
CSS関数のmin()・max()・clamp()を使ってみます。...
CSSプロパティのaspect-ratioを使ってみる
要素のアスペクト比を設定できるaspect-ratioを使ってみます。...
Sassで数値から単位を除去する
Sassで単位のついた数値から単位を除去する方法をメモ。...
フォントサイズを画面幅に合わせて変更する
スマートフォンのサイト実装時にフォントサイズを画面幅に合わせて拡大・縮小したいという要望がたまにあるので、vwを使った実...