テンプレートエンジン「Hugo」でScss記法のシンタックスハイライトを有効にする!

このブログは、HugoというGo言語製の静的テンプレートエンジンを使ってつくられています。

コードをよく載せるので、シンタックスハイライトを搭載したいなと思ったのですが、設定に右往左往したので手順のメモです。

公式ドキュメントが英語で困っている人も安心!是非参考にしてください。

続きを読む
CSSフレームワーク「Bulma」のmixinを眺める その2

このエントリでは、CSSフレームワーク「Bulma」のmixin.sassのうち、@mediaに関する部分を見ていきます。
レスポンシブウェブサイトの運用のキーになる@media、フレームワーク上ではどのように使われているのでしょう。

続きを読む
CSSフレームワーク「Bulma」のmixinを眺める その1

このエントリでは、CSSフレームワーク「Bulma」のmixin.sassを見ていきます。

スニペットとしても、計算関数としても便利な@mixinは、CSSフレームワーク上ではどのように使われているのでしょう。 一つ一つコードを見て、内容を把握していきます。

続きを読む
CSSフレームワーク「Bulma」に学ぶSassの変数定義

CSSフレームワーク「Bulma」のvariables.sassファイルを見ていきます。

変数定義は、なんとなくやっているものの、本当に便利な、意味のある変数定義について考えたことはあまりないため、叡智のつまったオープンソースのCSSフレームワークに学んで見ます。

続きを読む
CSSフレームワーク「Bulma」のユーザー定義関数を見てみる

CSSフレームワーク「Bulma」のfunction.sassに定義されたユーザー関数を見ていきます。

全部で5つあります。

続きを読む
フリーランスエンジニアTips勉強会に行ってきました

2017年、自分の幅を広げるべく、個人としてもコーディングのお仕事を受ける体制にしています (絶賛募集中です)

フリーランスになる予定は今のところありませんが、「個人として仕事を受ける」という点についてどんなものか知りたかったので、「知らなきゃ損!フリーランスエンジニアTips勉強会」に参加してきました。 以下、セミナーのメモ書きです。 ほぼ自分用ですが、ご参考になればと思います。

続きを読む
Vimを使い始めました

2017年の豊富の一つとして「Vimを使いこなす」を設定しました。
理由は「エンジニアぽくてかっこいいから」です。
前から手を出しては挫折し、みたいなことを繰り返していたのですが、今年こそマジなのでどうぞよろしくお願いします。

続きを読む
2016年のアウトプット活動まとめ

今年もお世話になりました。

外で活動するようになったのは転職して9月からなので、そこからのものしかないですが(記憶もその辺からしかない)まとめました。

続きを読む
DIST.13「トクするCSS」に出演しました。

2016年12月2日に開催されたDIST.13 「トクするCSS」にLTスピーカーとして出演しました。

続きを読む
globalにgulp-cliをインストールしようとするとエラーが発生する

現象

gulp 4.x系に対応するべく、globalからgulp(3.9.0)をアンインストールし、改めてgulp-cliをインストールしようとしたろころ下記のようなエラーが発生する。 インストールは中断され、gulp-cliがインストールできない。

続きを読む
RSCSSとFlexboxを使ってまるっと1ページコーディングしてみた。

自分なりの静的サイト構築をまとめます。 シチュエーション的には 「カンプが上がってきたものをコーディングする」 みたいな感じです。

今回は、「RSCSS」 という設計思想に基づいて作成していきます。

続きを読む
Vue.jsをはじめてみる#1 ~公式ガイドを読む編~

はじめに

CSSがすきなフロントエンドエンジニアのナユです。 フロントエンドエンジニア Advent Calendar 2016 12日目の記事です。

私はCSSがすきですが、フロントエンドエンジニアを名乗る以上はしっかりとしたJavaScriptがかける必要があります。 ですので、このアドベントカレンダーを機に「Vue.js」勉強ログをつけてみることにしました。

続きを読む
Android4.4系でReact-modalの表示位置がずれる

条件

  • Android4.4系

現象

React-modalの表示位置がずれる

続きを読む
絵文字でわかるCSS設計 ~BEMとコンポーネント設計 with BEMoji~

こんにちは、CSSが好きなフロントエンドエンジニアのナユです。

絵文字 / Emoji Advent Calendar 2016 11日目の記事です。
(仮タイトルから内容が変わっちゃいました。すみません><)

10日目の湊川あいさんとわかばちゃんコンビに続いて、絵文字でわかるシリーズです。

続きを読む
FONTPLUS DAYセミナー Vol. 5[Webにおけるタイポグラフィ]に行ってきました。

FONTPLUS DAYセミナー Vol. 5[Webにおけるタイポグラフィ] (アイキャッチはイベントページより)

私は文章に起こす過程で咀嚼していくタイプなので、自分用メモですが公開します。 (全文を文章に起こすのはさすがに無理で、これは咀嚼して文章に起こしたものなので、少し違った解釈があるかもしれませんがご了承ください)

続きを読む
「はじめてのハッカソンvol.19 」に参加してきました。

先日参加したイベント「CSS3の新レイアウト「Flexbox」ハンズオン 〜Flexでコレできるかな?〜」で知り合った「デザイン イリューム」のみまさんの主催イベント 「はじめてのハッカソン」 に参加してきました。

続きを読む
AtomのEmmetでvendor-prefixが勝手に挿入されるのを無効にする

勝手にベンダープレフィックスがつく

emmet、つかってますか?
flexbox、つかってますか?
私は使ってます。

続きを読む
styleguideジェネレータ「aigis」を使ってみた

スタイルガイドジェネレータ「aigis」というものがあるらしく、ちょっと触って見るついでにメモを残しておきます。

exampleを触ってだいたいの感触を掴むというのがこのエントリの趣旨です。

aigisとは

株式会社ピクセルグリッド謹製のスタイルガイドジェネレータです。

続きを読む