clearfixでfloatを解除する 2016年版
clearfixは過去の案件からそのまま流用することが多く、あまりきちんと調べたりすることもなかったのですが、少し調べる...
HTML・CSSの記事一覧
Edgeで電話番号にリンクが自動で追加される
スマートフォンで電話番号っぽい数字に自動で電話番号のリンクを貼る機能がありますが、Edgeにも同じ機能が実装されているよ...
background-attachment fixedで背景画像を固定して、パララックスっぽい動きを実装する
背景画像を固定させて、CSSのみでパララックスっぽい動きを実装してみます。...
背景画像を右や下の位置から指定する
CSSで背景画像を右や下の位置から指定する方法をメモ。...
calc()を使ってみる
CSSのプロパティの値を計算式で指定できるcalc()を使ってみます。...
viewportの使い方
viewportは今までコピペで流用することがほとんどだったので、勉強としてviewportのcontentに設定できる...
background-sizeをショートハンドで指定する
background-sizeをショートハンドで指定する方法で少し詰まったので、指定方法をメモ。...
HTML5のrubyタグを使ってみる
HTML5のrubyタグを使ったことがなかったので、試しに使ってみました。...
SVGの記述方法まとめ
SVGの記述方法を調べてみたのでまとめておきます。...
CSSでアコーディオンを実装する
JavaScriptを使わず、CSSのみでアコーディオンを実装してみます。...
アニメーションの設定ができるCSS『Magic』を使ってみる
要素にclassを付与するだけで、手軽にアニメーションを追加できるCSS「Magic」を使ってみたので、使い方をメモして...
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();̶...
ハンバーガーボタンのアニメーションを実装する
スマートフォンサイトでハンバーガーボタンを実装することがたまにあるので、アニメーション付きで実装する方法をメモしておきま...