html
Gulp 4でテンプレートエンジンのPug(Jade)を使う
Gulpのタスクにテンプレートエンジンのpugを使えるようにします。
Pug
今更ですが、PugはもとはJadeという名称でHTMLのJavaScript Templatesの1つとされる。
Node.
【備忘録】アニメーション系js(lib)のまとめ
アニメーション系JS 7種 + α
CSS Transition、WebGL、Canvas、SVG... jsで実装するアニメーションライブラリをさらっと見てみる。
紙媒体ライクなテキストコンテンツのレイアウト実装をスタイルで実装してみる
Webブラウザ上のテキストコンテンツのレイアウトでは、横書きや四角いブロック要素で考えることが長い間一般的とされていると思います。
そこで紙媒体のようなテキスト要素のレイアウトを、現段階で実装可能な機能を紹介します。
ブラウザによって制限がある機能を幾つか取り上げますが、環境によっては現実的に運用も可能な機能もありますので、参考にしていただければと思います。
縦書き（+おまけ）
雑誌・新聞、書籍など日本では馴染みのある表記方法。
既に現実的にサイト運用できるレベルのであり、ブラウザも最新
カラムレイアウト（段組み）で便利なスタイル
BootstrapやFoundation等のCSSフレームワークでスタイルまかせてWeb開発するのは確かに楽なんですが、オリジナルスタイルを作成する場合、今時はデバイスごとの横幅に関しては（決まりごともありますが）ちょっと意識して考えないといけない事柄だと思います。
スクリーンがいくらワイドになってきても
ちょっと使えるテキスト装飾 css小技
テキストコンテンツで、覚えておくと便利なスタイルを集めました、覚書。 掲載時から対応ブラウザに変更がある可能性があるので、使用時には随時確認が必要。
オーバーフロー制限
長いタイトルを一行に収めたい時など、自動で省略（…）をつける。
コンテナ要素からはみ出たコンテンツをtext-overflow: clip;で符号を付けずに省略、text-overflow: ellipsis;で符号(…)に付けて省略。
Firefoxだけtable内の画像スタイル max-widthが効かない現象
RWDサイト制作で、意外にもFirefoxだけスタイルが効かない現象の対策です。
tableタグ内のセル、tdタグを親要素とした画像（imgタグ）のリキッドデザイン、レスポンシブデザインで欠かせないスタイル要素、[max-width:100%]がFirefoxだけ無視されます。
そこで、親要素のtableタグのスタイルtable-layoutプロパティにfixedの値を与えてやります（デフォはauto）。
tableを画像が入る列幅（tdタグ[table-cell]）を固定レイアウトにすることで、孫要素のimgタグが可変の振る舞いをするようになります。
※必ず親要素のtableの横幅は可変でなくてはなりません。(width:100%等)
videoタグを使いBasic認証をかけてスマホで起こる不具合を回避
videoタグを使ったページでBasic認証をかけるとAndroidやiOSで再生できない症状の回避方法。
.htaccessに以下を追記。
（.mp4、.webmファイルを掲載時。）
Satisfy any Allow from all </Files>