読者です 読者をやめる 読者になる 読者になる

fnwiyaBlog

EmacsとかLispとか可視化とか

CSS

d3.jsのグラフをスマホ対応させるためのtips

今日思いついて比較てき汎用性高かったので。 たとえばd3.jsのグラフをレスポンシブ対応させる場合に、 windowサイズが欲しいわけですがその時に <div id="aaa"> <svg>...</svg> </div> となっているとして よくあるsvgコンテナを作る部分の var margin = {top: 20, right: 20, bottom: 40, …

子要素をfloatさせたら親要素の高さがなくなってしまった時の対処法

よくなるのでメモ ↓を付け足せばOK 親要素:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; }

レーダーチャートが簡単に作れる(chart.js)

色々できるのですが僕はレーダーチャートに使っています。 github.com 使い方 html部 <div class="chart"> <canvas id="myChart" width="300px" height="300px"> </canvas> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="vendor/Chart.js/Chart.min.js">

スクロールすると出てくる「トップに戻る」

トップからスクロールするとひょこっとでてくる「トップに戻る」の実装法です。 html部 <p id="rippy"><a href="#"><img src="img/rippy.png"></a></p> css部 #rippy { position: fixed; bottom: -30px; right: 5px; z-index: 99; } #rippy img { width: 180px; float: right; } #rippy a { padding: 30px 0; display: bl…

レスポンシブ対応なハニカム上のパネルを並べられるライブラリhoneycombs.js

ハニカム上にdivを並べられてマウスオーバーでオモテウラを切り替えられるライブラリです。 github.com 使い方(READMEより) <script src="honeycombs/js/jquery.honeycombs.js"></script> <link rel="stylesheet" type="text/css" href="honeycombs/css/honeycombs.css" /> <div class="honeycombs"> <div class="comb"> <div class="front-content"> <p>I am a front titl…</p></div></div></div></link>

ブラー効果のある半透明のパネルの上にコンテンツをのせるHTML/CSS

ここのとおりにやったらできた。 coliss.com 基本はバックエンドを書くのが好きなんだけど時々こういうのに凝りたくなる。