みっちぇのWebデザイン研究所

はてなブログのカスタマイズを中心に、ウェブデザインについて研究するブログ

SCSS

追従するグローバルメニュー【CSSのみ】

グローバルメニューっていうのは、当ブログにあるようなこれ↓ グローバルメニュー とか、これ↓ グローバルメニュー2 グローバルメニュー3 のようなメニューのこと。 Check! ハンバーガーメニューの作り方はこちら micche-labo.hatenablog.com こんな感じの…

CSSのみでアコーディオンパネル

javascriptでクラス付け外しする方が楽だとおもいますが、cssだけでもできると聞き、実行。 :chekedという擬似要素を使用します。:focusや:activeでできないっけ?と思ってたら:chekedでした。 MDNのサイトで詳細のってます developer.mozilla.org 当ブログ…

メニュー横並びのいろいろ【float、table、flex】

横並びの方法はいろいろありますが、わたしはいつもdisplay:flex;を使用しています。 まあ手軽だし使い慣れてきたし…と思ってたんですが、そろそろ他のやり方も研究しようと思って、floatとtableパターンを作ってみました。

擬似要素でアーチの上に画像を載せたフッターを作る

CSSで作る、フッターデザインの覚書き。アーチの上に画像をのせたようなデザインにしてみます。擬似要素を使います。はてなブログでも再現可能。他のブログやホームページでもできると思います。是非参考にしてみてください。

cssで新窓表示_blankの時だけアイコンをつける

よくある、「リンクを新しい窓(タブ)で開く」の横にある、 のようなアイコンをcssで表示させる方法。 Font Awesome 5 使用。(フリー版) 覚書きシリーズ。

ハンバーガーメニューのアニメーション

覚書。

SCSSで変数を定義すると便利で時短に繋がる!

はてなブログテーマ制作に、「Boilerplate」を使用した場合、変数用のファイルとして、「_variable.scss」というファイルが存在します。このファイルの中身を参考に、自分なりに色々と変数を作っていきます。 テーマ制作を二つ、三つとする場合も、変数を作…