PostCSSでレスポンシブに対応したCSSフレームワークを作ってみました

PostCSSでレスポンシブに対応したCSSフレームワークを作ってみました

今までがっつりPostCSSを触ったことがなかったので勉強の意味も込めてNimbusというCSSフレームワークを作ってみました。Nimbus(筋斗雲)にしたかというとレスポンシブに大きさを変えるという意味で命名しました。というかtable周りとレイアウト系はレスポンシブにこだわって作りたかったのでこれがいいなと。あとは僕がドラゴンボールの大ファンだからです(笑)ということでNimbusの概要や設計、あとはPostCssを使って困ったとこなどをご紹介します。

WebStormでstylelintができるようにする手順の紹介

WebStormでstylelintができるようにする手順の紹介

WebStormの最新バージョンだとstylelintが使えるようになっています!webpackやgulpなどを使ってlintする方法もあるんですが、処理が重くなってくるとどうしてもビルドするのに時間がかかってしまいますが、エディター上でlintしてくれるのでその辺の心配もないですしいいですね。今回はWebStormでstylelintが使えるようにする手順をご紹介します。

[2016年]WEBサイトのアイコンには画像じゃなくてアイコンフォントを使おう

WEBサイトのアイコンには画像じゃなくてアイコンフォントを使おう

もはや必須スキル?なアイコンフォントのお話です。やっぱ楽なのがいいですよね。例えば検索の虫眼鏡アイコンとかいちいち画像で書き出すのは大変です。だからこそアイコンフォントが使えると作業効率がだいぶ変わりますね。サポートしているブラウザも数年前とは比べものにならないくらい増えていますし使わない手はないです!!

これからHTMLとCSSを学ぶのにオススメの書籍 10冊

これからHTMLとCSSを学ぶのにオススメの書籍 10冊

WEBの仕事していますが、実はモニターで読むよりも本の方が好きな僕です。そんな僕がオススメするHTMLとCSSの書籍をご紹介します。初めてHTML・CSSに触れる初心者の方からステップアップしたい方にもオススメのものがあります。ぜひ読んでみてください!!

MaintainableCSSを読んでみてシングルクラスとマルチクラスの自分なりの考察

MaintainableCSSを読んでみてシングルクラスとマルチクラスの自分なりの考察

MaintainableCSSを読んでからずっと考えてました。特に再利用性というところでかなり意見が分かれるんじゃないかなと。要はシングルクラスなのかマルチクラスなのかってとこかと思うんですが、どっちが正解なのかっていうのはなかなか難しいですねー。なので、自分なりに周りに意見を聞いたり考えたことをまとめてみました!

React.jsの勉強会に参加してデザインのコンポーネント化できないWEBデザイナーはやばいかもっていう話

React.jsの勉強会に参加してデザインのコンポーネント化できないWEBデザイナーはやばいかもっていう話

先日、友人の会社主催のReact.js勉強会に参加しました。といっても知り合いのエンジニアが集まる勉強会なので、ほぼ身内。だいたいのハンズオンが終わったあとに議題に挙がったのが、デザインのコンポーネント化についてでした。
結論、WEBデザイナーにコンポーネント化の理解がないときびしいよねって話です。

CSSでハンバーガーメニューをアニメーションさせるときに参考になるサイト7選

CSSでハンバーガーメニューをアニメーションさせるときに参考になるサイト7選

主にスマートフォンサイトを制作するときに使われる、開閉ボタンの三本選ですね。そこの開閉のアニメーションをCSSと簡単なjQueryでできます。その際作り方や動きの参考にいくつかサイトを紹介しますね。

ページの先頭へ