Category : Making

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

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

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

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

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

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

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

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

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

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

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

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

テキストリンクの色を一括で設定しちゃうmixinを作ってみた話 #mixin

そんな大した代物でも何でもないんですが、scssの練習がてらに作ってみたテキストリンクの色を一括で設定しちゃうmixinです。 リンクカラーを設定するmixi...

画像の回り込みとテキスト寄せを一気に設定してみた話 #wordpress #scss

wordpressで生成されるclassの「textleft, textright, textcenter, alignleft, alignright, al...

テーブル化しちゃうと便利なこともある #mixin #scss

どんどん進化するweb界隈のものごとですが、テーブル表示にしたほうがわかりやすいことも多々あります。昔からやってる人にはそっちのほうが馴染みがあるということもあ...

あらかじめブレイクポイントごとのmixinがあると便利なはず! #mixin #scss

media queryをつかって、画面サイズごとのブレイクポイントを考えるとき、毎回毎回 [crayon-5a17e0702dfa6934440682/] ...