Pugでコメントアウトをする
PugでHTMLにレンダリングされないコメントアウトを記述しようとして迷ったのでメモ。...
HTML・CSSの記事一覧
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%にする方法が少し悩んだので実装方法...
Frow CSSを使ってみる
display: flex;を使ったグリッドなどが特長のCSSフレームワーク「Frow CSS」を使ってみます。...
CSSフレームワークのMilligramを使ってみる
CSSフレームワークのMilligramを使ってみます。...
iframe内のリンクで親ページのURLを変更する
iframe内のリンクで親ページのURLを変更したい時にちょっと詰まったので、やり方をメモしておきます。...
CSSで指定した縦横比を維持する
要素をpositionで絶対配置にした場合、その要素は親要素の高さに含まれなくなります。 親要素の高さを固定値で指定して...
CSSで背景ループのアニメーションを実装する
背景画像を横方向にループで移動させたいという要望がたまにあるので、CSSのkeyframesで実装する方法をメモしておき...