訳も知らないで

デザイン&プログラミングのことも書くし、それ以外のことも書く。

JavaScript

Atomic DesignでWebサービスのフロントエンドをイメージする

Atomic Designというコンポーネントを組み合わせてシステムを構築していく手法がイメージしやすそうだったので、実際にWebサービスのフロントエンドデザインに当てはめるとどんな感じになるのか考えた。 Atomic Designについてはこの辺を参照 Atomic Design …

Loop processing for NodeList at JS ( ES6 )

Make a note as it is a frequent process. (get some element and use it at loop processing by JavaScript) Use for-of See the Pen Loop processing by for-of for NodeList at JS(ES6) by Fumihiro Nakahara (@711fumi) on CodePen. Use Array.from (If…

フロントエンドの勉強も兼ねて「近場の食事できる場所をテキトーに教えてくれるWebapp」作った

お勉強がてら簡単に作るはずだったのに疲れた。 https://god-of-meal.herokuapp.com/ GitHub - 711fumi/god-of-meal: God will tell the restaurant not far away. やったこと 現在地(緯度経度)から近そうなごはん処をぐるなびAPIを使って取得、テキトーに選…

【JS】jQueryの.onでES6のアローファンクションに書き換えたら動かなくなったので

jQueryを使ったコーディングで関数定義を ES6(Babel使用)のアローファンクションで書き換えたら動かなくなったので。 単純に関数内でのthisの意味が変わるから挙動も変わる。 アロー関数 - JavaScript | MDN $('#foo').on('click', function() { $(this).hid…

【HTML/CSS/JS】擬似要素の中身(content)を動的に変更する。

擬似要素のcontentについてそういえば調べたこと無かったのを反省。 擬似要素はJSから操作できない ある時擬似要素(:before, :after)の内容(content属性)を動的に変更したくてJSで変更しようとしたが、 調べた感じ、JSで擬似要素は変更できないぽい。 (CSS…

【css, js】横並びにした要素の高さをそろえる方法。

HTMLで要素を横並びにした場合(float,inline-block)、高さをそろえる方法。 css3のFlexible Boxを利用する場合 古いブラウザを考慮しなくて良いのならこれで。〜参考にさせていただきました!〜 CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LI…

【JavaScript】amazonのドロップダウンメニューぽいものを実装するJQueryプラグイン

amazonの左上にあるメニューあるじゃないですか。 これね↓ これっぽいメニューを簡単に実装できるJQuery用のプラグインがこちら。 kamens/jQuery-menu-aim · GitHub 使用方法 使いたいページでJQueryとjquery.menu-aim.jsを読み込みます。使い方はREADMEまん…