wordpressでsvgを使うための備・・・

wordpressでは標準のままだとsvgを扱うことができません。メディアを追加しようとしても不正なファイルだと怒られるし、ビジュアルエディタを使ってもうまく表...

ラインマーカーで線を引いたような効果を与・・・

<strong>などで強調させたいときに使えそうな、ラインマーカーで線を引いたような効果を与えるmixinを作ってみたので紹介します。 ラインマー...

svgを使ってテキストにグラデーションを・・・

svgも徐々にメジャーになりつつあります。これをうまく駆使すると、今回紹介するようなテキストにグラデーションをかけるといったこともできるようになります。 ...

FontAwesomeを:beforeや・・・

scssやcssを作っているとき、FontAwesomeなどのwebアイコンフォントを使いたいときが多々あります。<i>~</i>のよう...

css3だけでアコーディオンメニューを作・・・

アコーディオンメニューといえば、なんとなくjavascriptを使わないと作れないイメージでした。が、今回ブログのテーマを一新する際に極力cssだけで表現できた...

cssとsvgを使って日本地図のイメージ・・・

svgことScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)は、web上でも扱える二次元ベクター画像です。今までは対応し...

CSS3で追加されたワイルドカードの使い・・・

CSSといえば、すべての要素に適用できるワイルドカードみたいな「*」があります。リセットCSSやノーマライズCSSを書くときなんかに重宝するアレです。 さ...

display:flexを使ってグリッド・・・

Bootstrapに代表されるようなフレームワークはいっぱいあります。web制作する人にとってフレームワークの有無は作業工程の短縮や作業効率のアップに関係すると...

今さらだけどcssのセレクタの親子関係の・・・

今さらだけど、CSS3で追加されたセレクタも合わせてCSSのセレクタの親子関係をまとめてみようと思います。 ここでは、便宜上、クラス名を親、子、孫といった...

compassに頼らないでflexbox・・・

フレキシブルにボックスを変化させるレスポンシブ時代の救世主(?)flexbox。いつまでもcompassに頼っているのもどうかなと思って少しは自分で@mixin...