CSS

メディアクエリやコンテナクエリを使わずにレスポンシブ的な動きになる書き方が紹介されていたので試してみる。 参考ソース HTML 説明 ポイントは以下の部分 なお、上記は省略した書き方であり、省略せずに書くと以下のようにな […]

コンテナクエリは現時点でまだ使えない（caniuse）が、Googleからポリフィルが公開されたのでメモ。 ポリフィルだとFOUCと呼ばれる現象が起こるため、実用上はまだ使わないほうがいいという段階らしい。 正式な公開を […]

以下の記事において、CSS Grid Layoutはまずグリッドを定義して、それに基づいて各コンテンツをグリッドにはめ込んでいく形での指定方法を書いた。 上記はgrid-templateというプロパティを用いるとかなり省 […]

以下の記事を参考にCSS Grid Layoutを触ってみた HTMLサンプル CSS グリッドラインの定義 CSS Gridではまず基準となるグリッドを定義する。 グリッドを幅で定義して、その境目を線と見立てて後の定義 […]

生成されるソース ジェネレータで適当に設定して、吐き出したソースは以下。 テスト 吐き出されたソースは透けるブロックの箇所のみなので、背景画像を設定したブロックの中に吐き出されたHTMLを配置し、吐き出されたCSSを当て […]

基本の使い方 定義 呼び出し スコープ 基本はセレクタ内。 :root擬似クラスに指定してグローバルに使用することも可能。 入れ子可能 親子間での継承 変数値も通常のプロパティと同じような継承が行われる。 後に書いた強い […]

SVGで線をアニメーションさせる方法の簡単な覚え書き。 本ブログのロゴをサンプルとして。 まずはSVGを用意 今回はイラレでパスを書いてSVG書き出ししてSVGファイルを作成しました。 書きだしたSVGファイルをimgタ […]

今更こんなこと、知らない人のほうが珍しいという世の風潮に流されてなんとなく知ってるようなふりをしている方（主に自分）のために拙い理解で改めて書いておくと、Bootstrapとは有名なCSSフレームワークのうちのひとつです […]

wordpressにformを追加するプラグインといえばContactForm7が有名ですが、こちら、確認画面がついていないことも同じくらい有名ですね。このプラグイン、使い勝手は最高なので、確認画面をつける方法は無いのかしらとネットをふらふらしていたら、jQueryで擬似的に確認画面（というより確認フェーズ）を間に挟むスクリプトを書いてくださっている方がいらっしゃいました。

基本的にIEはCSS3に対応していませんが、スクリプトを追加することで角丸やボックスシャドウなどのCSS3のプロパティをいくつか使用することができるようになります。案件で、画像ではなくフォームのボタン等で角丸を実装したい場面がありまして、今回そういったスクリプトの一つであるCSS3 PIEを使用してみました。