【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう

JavaScriptが時の人になって暫く経ちましたが、まだまだ喧々諤々やっているよう(に見える)ので、なるべく近づかないで済ませる方法を模索しています。
その方が軽いはずだしゆーざーふれんどりーだと思っています。(JS自体は好きです。いつもお世話になっております。ハンバーガーメニューがゆーざーふれんどりーかどうかとか難しい話は振らないでください。)

この数年、Sassを導入して、命名規則を変えてから、とうとう、ようやく、ねんがんの、CSSのモジュール化が出来るようになってきたので、ちまちま書き溜めて行こうかと思っています。
ヒトサマに使ってもらえるようなソースでは全然無いのですが、人目に晒してブラッシュアップしていくのが良いかなと思うので。

今日は良くあるハンバーガーメニューをCSSだけで作るというのを書いておこうと思います。
方法は色々とあって、たくさんソースも落ちていますが、アテクシ流の書き方をメモしておきたいと思います。
(タイトルのライブラリ化とは別になんかnpmとかで呼び出せるとかそんなんじゃなくて、コピペで済むぐらいのフワッとした意味なので怒らないでください。)

大体の仕組みとしてはcheckboxでオンオフの判別をして、transformtransitionでアニメーションを作ります。
~(チルダ)で要素を紐付けられるようにするのが肝
iOSでは動作確認済み。Chrome系も大丈夫なはず。

CSSと言っていますが、SASSで書いています。
PostCSSとかnextcssとか試したいけれどまだ手を出せていません。

あと命名規則は最近SMACSSとBEMをベースに、

prefix-block__element–modifier(ex. l-global__header)

みたいな書き方するようにしてて気持ち悪かったらごめんなさい。
m-はモジュール、l-はレイアウトです。

で、もいっこのポイントとしては、ハンバーガーメニューではほぼ無いと思うんですが、後々やっぱりJS使うかーとかにもなりがちなので、動きの部分を別に書くようにしています。これオススメ。

“【CSS(SASS)のライブラリ化?計画】ハンバーガーメニューをCSSだけで作ろう” の続きを読む

インラインSVGを出してくれるショートコード

SVGをインライン化出来たので、記事内とかでも使いやすいようにショートコード化してみました。

ひねりも何もありませんが、これでlogo.svgていうファイル名なら、

[svg]logo[/svg]

と書くと出力してくれます。

phpの中なら

echo do_shortcode( '[svg]logo[/svg]' );

で。

適切なwidthとheightをCSSで指定するのを忘れずに。

※ 記事内でSVGを使うケースがあるのか?という人には必要ないコードです。
SVGスプライトをnpm-scriptsで作ってみるを前提にしています。

【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた

GWに私は何をしているのでしょうか。

前回に引き続き、SVGについて。

前回のやり方ではCSSに読み込むスプライト画像が出来ないのでどうしようかなあと調べていたら、またまた良いものを発見しました。

TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax

postcss-inline-svg というライブラリです。

CSSそのものにSVGをインライン化するのを自動化してくれるライブラリ。神発見したと思った。って言っても、css inline svg npm で検索すれば直ぐ出てくるんだけども。

問題はPostCSSで作られているということです。Sassに慣れきってるのでPostCSS環境に合わせるの面倒・・・と思ったけれど、そこはnpm-scriptsの良いところ。これまでも、node-sassでcssに変換した後にautoprefixerを通していたので、さらにpostcss-inline-svg すれば良いだけでは・・・!?

と思って、package.jsonに

"svginline": "npx postcss *.css --use postcss-inline-svg -d ../ --no-map",

としたら出来ちゃった。IE11でも動作しちゃった、のでご報告したいと思います。npm-scriptsを使ってる前提です。

“【postcss-inline-svg】Sassを使いつつPostCSSでSVGをCSSでもインライン化してみた” の続きを読む

SVGスプライトをnpm-scriptsで作ってみる

GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。

ターゲットはSVG。

ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。

結果、凄い分かりやすいページを発見!これをいわゆるSVGスプライトと言っていいかは謎ですが。

Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium

で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。 “SVGスプライトをnpm-scriptsで作ってみる” の続きを読む

シェルコマンドが通らなかったときにやること

こんにちは、みみです。

日頃iMacでひっそり作業をしているのですが、お外でも作業できるように、お下がりのMBPの開発環境を整えていたら、シェルスクリプトで躓いたのでメモしておこうと思います。

前のやり方でやろうとしたらportコマンドが通らなかったのでした。

まずはecho $PATH

あれ、コマンドが通らないなーと思ったら、まず

echo $PATH

と入力すれば、PATHという変数に何が設定されてるか分かります。 “シェルコマンドが通らなかったときにやること” の続きを読む

WordBench三鷹@ミタカフェにて所感

WordBench三鷹@ミタカフェに参加してきました。土曜日開催の勉強会、しかも近所ってほんと有難い!隔月で開催されるそうで、早速次回も参加表明してきました。LT枠で(!)。

会った人たちにPHPカンファレンス2009とWordCampがーって言いまくってたけれど、WordPressのブースがあっただけかもしれない。10年弱前の事ってことでお許しください。

ブロガーになりたい人が結構いることとか、10年でWordPressの認知度がこんなに変わっていて、ブログって何?美味しいの?っていう時代からやってる身としては何とも感慨深い集まりでした。

私的には、グーテンベルグとGoogleの動向が知りたかったんだけれど、そんな事より一般ユーザーとブロガーに会えて、彼らのニーズが全然違う事を知れて凄く面白かった。

仕事としてWordPressを使う時には、要らないものを剥ぎ取ってコアだけ残した自作テーマから構築していくし、なるべくプラグイン使わないようにするし、サイズダウンとスピードアップに注力して作ります。最早必要としているのはWordPressを使っているというお題目だけだったり、管理UIの見慣れ感だけだったりするわけです。なんでこれをWordPressで?っていう案件も増えてきました。

だから、WordPressが外側だけどんどんリッチになっていくのを少し面倒くさいように思っていたのです。

でも、世間のニーズとしてはグーテンベルグが正しいのかもなあ。と。同時に開発者としてはWordPressからの脱却を考えるべきなのかなあ、とかも。まあしばらくは無理でしょうけれど。

次回のLTで、CSSのいろはを話すべきか、npm-scriptsを使ったSASSの導入を話すべきか、迷っています。それとも、オススメのテーマ、とかの方が良いのかな。個人的には最新公式テーマのTwenty Seventeen最強説を唱えたいのだけれども。

まあ、医者の不養生で、このサイトもロクに手入れをしていないので、こんな人がアレコレ言っても信じてもらえないかも知れませんが。ぎゅんぎゅん動きまくるように改築しようかな。

それと、ミタカフェの、気取らなくってお菓子が沢山あって落ち着く感じも気に入りました。MBPの環境整えたからリモートも可能になったし、今度またお邪魔してみたいと思います。

あと、名刺入れちゃんとしたの探そう。

【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。

こんにちは、みみです。

そういえばそろそろTwenty Eighteenまだ出ないのかなーとか思ってたら、Twenty Seventeenの1.5がリリースされていました。

Twenty Seventeen Theme Changelog « WordPress Codex
https://codex.wordpress.org/Twenty_Seventeen_Theme_Changelog#Version_1.5

Various code improvements for formatting. (#41057)
Use consistent wording when referring to the front page in inline docs. (#42666)
Correct the number of recent posts in a comment in template-parts/page/content-front-page-panels.php. (#42621)
Remove unnecessary comment in front-page.php. (#42820)Underline links in comments. (#43317)

ということで大した変更はなさそうですが、そもそも1.3と1.4のリリース見逃してたよね・・・。特に大事がなくてほんとに良かった・・・。

“【Twenty Seventeenのちょこっと解説】バージョン1.5がリリースされてた。” の続きを読む