サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ブックレビュー
ksk-soft.com
SVGで円グラフを描くシンプルな方法を思いついたのでシェアしておく。既に先人がいるかもしれないが、そんなに頑張ってチェックしてはいない。 例えばCSSのanimationと組み合わせればこんなグラフが描ける See the Pen SVG PIE Chart with CSS animation by keisuke Takahashi (@ksksoft) on CodePen. ポイントは以下の通り。 svgのcircleで扇形を描く circleのfillはなく、太いstrokeで「塗り」に見せかける 扇形の角度は破線の長さで調整する jsは不要。 以上の説明だけではよくわからない人の為に、以下に順を追って解説する。 1.SVGで円を書く インラインsvgの円はcircleタグで書けます。 <svg viewBox="0 0 200 200"> <circle cx="100" cy
まず、日本語で最も充実したsvg情報があるのは「svg要素の基本的な使い方まとめ」で、必読だ。 海外ではSara SoueidanさんのCSSconf 2014の動画が最新で具体的だと思う。この動画を制作中に見れていたら大変参考にできたのに、気づいたのは締め切り後だったのが残念。 エルモのだいぼうけんより、ウミガメのsvgを抜粋 では、以下に、Illustratorでsvgを作成する際の注意点を。 アートボードでviewBoxはコントロールできない Illustrator(CS6)では、アートボードの基準点を0,0にしても、書き出したsvgのviewBoxが0 0にならないことがある。Illustratorのアートボードと、svgのviewBoxは違うものとして処理されるらしい。 解決策は、新規ファイルへのコピペ。新規ファイルを開き、アートボードを移動せずに、描いたイラストをコピペしてから
先日、table-cellはmarginが無効。でも隙間を作る方法をUPしましたが、もっと、直感的で、より分かり易い方法を考えました。 DEMO 先日の方法はbackground-colorの代わりにbox-shadowで背景を見せるアイデアでしたが、これだと以下の点で使いにくい欠点がありました。 box-shadowによる背景色の見せ方が、直感的ではなく分かりにくい paddingでcontentをズラしているのも、直感的ではない table-cellにした各要素、およびその親要素のwidthが相対幅のケースでは使えない(固定幅ならOK) 透明のborderで隙間をあける という訳で、今回は透明のborderで隙間をあける方法です。これなら背景は通常通りのbackground-colorやbackground-imageが使えます。paddingもトリッキーな指定は不要です。 backg
概要 cssだけで作るスライドショーを題材に、css3の animationとtransitionを学習。 凡例 htmlクリックするとhtmlソースを表示します。SyntaxHighlighterを利用。 cssクリックするとcssソースを表示します。SyntaxHighlighterを利用。 リンク先を新規タブで開きます。 該当するWikiPediaの項目を、新規タブで開きます。 該当する単語のGoogle検索結果を、新規タブで開きます。 お手本にするサンプル 「Pure CSS3 Cycle Slider」をお手本にします。とても美しい動作です。まずは動作を確認して下さい。 画像にマウスホーバーすると、スライドが止まる マウスホーバーで画像に対応するh1が現れる スライドの表示秒数を伝える工夫もされている マークアップをキチンと考える 最終的にCSSで動作させるのか、jQueryで動
2012.7.27、以下の修正・変更を行いました。 transformのskewの記述をskewXとskewYに変更 border-radius,box-shadowのベンダープレフィックスを削除 ellipseのborder-radiusの記述を修正 css及びcss3の描画で、様々な物を描く事が可能だ。IE8以下のブラウザをどうサポートするかは、考慮する必要があるが、web表現にpureなcssによる描画を使わない理由にはならない。 むしろ積極的にcssによる表現を楽しむ姿勢こそが必要であり、css3で採用が検討されつつある、便利で(同時にとても複雑に感じられる)指定方法を理解する為の、最良の練習方法であると信じている。 とは言え、何かのとっかかりは必要だから、Adobe Illustratorを学んだ時と同じ様に、基本的な図形を作成する方法を理解するのが良いはず。Mozillaにも良
2012.7.27、以下の修正・変更を行いました。 transformのskewの記述をskewXとskewYに変更 border-radius,box-shadowのベンダープレフィックスを削除 引き続きcssで基本図形を描く。今回は半円、扇型、平行四辺形、三角形の描き方。図形の描き方はいずれ一覧表の形でまとめようと考えている。 なお、前回と今回の図形は、すべて一つのdivで出来ているが、実際にはdiv以外の要素でもスタイリングできる。cssの初心者はサンプルの記述でdivが使われているのを見て、cssで見た目を指定できるのはdivだけだ、という勘違いをすることが多いので注意が必要だ(これがおそらく「div厨」の発生原因だと推察する)。 例えば、何かの申請用紙の姓名の記入例に「日本 一郎・東京 花子」とあっても、そのまま書き写す人はいない。サンプルをコピーする事は有効な学習手段だが、自分
このページを最初にブックマークしてみませんか?
『KSK-soft.com | 人生に必要な事の半分は、学研「ひみつシリーズ」で学んだ(大げさ)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く