アニメーションの設定ができるCSS『Magic』を使ってみる
要素にclassを付与するだけで、手軽にアニメーションを追加できるCSS「Magic」を使ってみたので、使い方をメモして...
HTML・CSSの記事一覧
AOSを使ってみる
スクロールで要素をアニメーション表示させるプラグイン「AOS」を使ってみます。 jQueryなどは使用していないので、単...
formのデフォルトのバリデーションを無効にする
formで使用するinputのtypeによっては、デフォルトでバリデーションのチェックが行われます。 JavaScrip...
:nth-childの使い方
:nth-childの指定パターンをいくつか試してみます。...
グリッドレイアウトを実装してみる
自分の勉強用にグリッドレイアウトを実装してみます。 実装方法はいくつかあると思いますが、今回はdisplay: inli...
font-familyの指定方法
font-familyの指定を古い案件から使いまわしたりすることが多いので、自分用に調べてみたことをメモ。...
1行に横並びにした要素の幅を、個数に関係なく均等にする
display: table;で横並びにした要素を、個数に関係なく幅を均等にしてみます。...
横並びにした要素の高さが異なる場合にレイアウトが崩れるのを防ぐ
floatで横並びにした要素が複数行になる場合に、高さの異なる要素が含まれているとレイアウトが崩れるときがあります。 今...
videoにcontrolsとonclick=”this.play();”を合わせて付けるとFirefoxで再生できない
タイトルの通りですが、videoタグにcontrolsとonclick=”this.play();̶...
ハンバーガーボタンのアニメーションを実装する
スマートフォンサイトでハンバーガーボタンを実装することがたまにあるので、アニメーション付きで実装する方法をメモしておきま...
CSS3のアニメーションで、タイミングをJavaScriptで管理する
JavaScriptでスクロール位置を管理して、対象要素が画面上に表示されたらclassを追加して、CSS3のアニメーシ...
要素を上下中央に配置する
要素を親要素の上下中央位置に配置する方法のメモ。...
transition-timing-functionのcubic-bezierを使ってみる
transition-timing-functionのcubic-bezierを使ってイージングを設定してみます。...
Sassの配列で複数の色を管理する
カテゴリ毎にカラーが決まっていて、そのカラーをSassの配列で管理しようとしたときに結構詰まったので方法をメモしておきま...
レスポンシブサイトを印刷するときにレイアウトが崩れる
レスポンシブサイトで印刷時にレイアウトが崩れることがあったので、その対応方法を調べてみました。...
フォームの入力エリアを中央揃えにする
フォームの入力エリアを中央揃えにできることを知らなかったので、備忘録としてメモしておきます。...
CSSのvwやvhを使ってみる
vwやvh,vmin,vmaxといった単位を使ってみます。...
flexboxを使ってみる
レイアウトを組むのに便利なflexboxを使ってみます。...
CSSセレクタの種類まとめ
CSSセレクタについて色々調べてみたのでメモ。...
Bootstrapを使ってサイト制作したときに、IEでスクロールバーがコンテンツに重なってしまう
Bootstrapを使って画面右端にボタン固定のページを作っていたのですが、IEでボタンの上にスクロールバーが重なってし...