異なるサイズの画像でRetina対応をする方法
個人的にRetina対応をする場合、imgタグのwidth/heightに実サイズの半分を指定するか、画像サイズに応じて...
HTML・CSSの記事一覧
ページ内リンクが日本語だとIEでリンクが効かない
ページ内リンクのハッシュ部分にエンコードした文字列を指定していたのですが、IEでだけページ内リンクが効かないようだったの...
Pugとgulp-dataを使ってmetaの内容をjsonで管理する
gulp-dataを使って、Pugで使うmetaの内容をjsonで管理するようにしてみます。...
tabindex属性でフォーカスを当てられるようにする
tabindex属性を使って、aタグ以外の要素でもフォーカスを当てられるようにしてみます。...
keyframesのアニメーションを一時停止する
keyframesのアニメーションで一時停止する方法をメモ。...
Pugでコメントアウトをする
PugでHTMLにレンダリングされないコメントアウトを記述しようとして迷ったのでメモ。...
Pugで条件分岐やループを使ってみる
Pugのテンプレート内でfor文やeach文、if文、switch文などを使ってみます。...
重なり順が下の要素をクリックできるようにする
動画の上に装飾の要素を重ねる実装をする機会があったので、装飾の要素の上からでも動画をクリックできるようにする方法を調べま...
keyframesの中でeasingを設定する
CSSのkeyframesでイージングを個別に設定できることを知らなかったので、方法をメモしておきます。...
Pugの基本的な記述方法
Pug設定後の、基本的な記述方法についてまとめてみます。...
Pugで変数を使う
Pugのコード内で変数を使う方法をメモ。...
Pugのextendsとblockを使ってテンプレートを継承する
Pugのextendsとblockを使って、テンプレートの継承を試してみます。...
Pugのincludeでルートパスを使用する
Pugのincludeを使用する際に、ルートパスで記述しようとして少し迷ったので、ルートパスでの記述方法をメモ。...
カードが回転するような動きを実装する
CSSのtransitionとtransform rotate()を使って、カードが回転するような動きを実装してみます。...
Pugのincludeを使ってみる
Pugのincludeを使って、ファイルのインクルードをしてみます。...
text-indent -9999pxを使わないでテキストを画像に置換する
imgではなく背景画像として画像を表示したい場面がたまにあるので、text-indent:-9999px;を使わないでテ...
疑似要素の:first-letterが2文字目にも適用される
:first-letterのスタイルが2文字目にも適用される不具合？に遭遇したのでメモしておきます。...
JavaScriptとCSSで揺れながら落下する処理を実装する
雪が降っているような表現をしてみたかったので、JavaScriptとCSSを使って揺れながら落下する動きを実装してみまし...
gulpでPugを使ってみる
Pug(元Jade)のテンプレートエンジンをgulp使てみます。...
2列のリンクリストで最後が1つの場合は幅100%にする
スマートフォンサイトでよくある2列のリンクリストで、最後が1つの場合は自動で幅100%にする方法が少し悩んだので実装方法...