object-fitを使ってみる
imgやvideoなどの要素を、コンテナにどう配置するかを指定できるCSSプロパティ「object-fit」を試してみま...
HTML・CSSの記事一覧
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を使った実...
text-align: justifyを使ってみる
テキストを両端揃えにできるtext-align: justifyを使ってみます。...
pugでpictureタグのmixinを作成する
PCとSPでの画像の出しわけやwebpの対応でpugのmixinを作成する機会が度々あったので、作成方法をメモしておきま...
Sassでネストした親class名とタグを連結する
Sassでclassの指定をする際、特定のタグの場合のみ別のスタイルを指定したいということがあったので、調べた内容をメモ...