fnwiya's quine

自分自身を出力するブログ

105.html

子要素を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テンプレート

なんというかいつも同じやつ使ってるのでメモ。 <html lang="ja"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta charset="utf-8"> <title></title> <meta name="keywords" content=""> <meta name="description" content=""> </meta></meta></meta></head></html>

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

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