Category : 作ったもの

【mixin】FontAwesomeを:beforeや:afterなどの擬似要素で使う時のmixin

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

【CSS】css3だけでアコーディオンメニューを作ってみた話

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

【SVG】cssとsvgを使って日本地図のイメージマップを作ってみた話【CSS】

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

【CSS】display:flexを使ってグリッドデザインのテンプレートを作ってみた話

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

【mixin】compassに頼らないでflexboxのmixinを作ってみた話

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

【CSS】CSSだけを使ってアプリによくあるフリックすると動くメニューを作ってみた話

アプリを使ってるとよく見るフリックすると、そこのブロックだけが動くメニューのUI。あれを再現してみることにしました。パッと見、javascriptも使ってそうな...

【CSS】外部サイトへの別タブリンクとPDFへのリンクに自動的にアイコンをつける

外部サイトへのリンクが別タブで開くように設定しているときやリンク先がPDFファイルだということを指定しといたとき、あらかじめアイコン表示がされていると便利ですよ...