ままろぐ
http://www.gan.st/furu/blog/:1
Nucleus CMS v3.64
2016-10-14T09:17:49Z
furu
2016-10-14T09:17:49Z
2016-10-14T18:17:49+09:00
が、ここで困ったお願いをされました。
社長「この棒グラフ、グラデーションにならない?」
私「」
さあ、社長自らのお願いです。
当然できないとは簡単に言えません(社畜根性
しかしブラウザによってグラデーションの指示の仕方って違うんです。
なので、全バージョン書く必要があります。
そして今回は後付け指定なので、idを使うことにしました。
まず、グラデーションの指示ですが、以下のように書きます。
/*Firefox*/
background: -moz-linear-gradient(始まる場所, 色 色の場所, 色 色の場所, …);
/*Chrom Safari*/
background: -webkit-linear-gradient(始まる場所, 色 色の場所, 色 色の場所, …);
/*共通*/
background: linear-gradient(色の向き, 色 色の場所, 色 色の場所, …);
今回はこのように指定しました。
#barBG_ex{
/*Firefox*/
background: -moz-linear-gradient(top, #ccc 0%, #333 50%, #ccc 100%);
/*Chrom Safari*/
background: -webkit-linear-gradient(top, #ccc 0%,#333 50%,#ccc 100%);
/*共通*/
background: linear-gradient(to bottom, #ccc 0%,#333 50%,#ccc 100%);
}
これは半分の所から3段階にグラデーションする指定です。
左から上、真ん中、下の順に色指定しています。
これをそのままグラフに適用すると、棒グラフがメタリックなグラデーションになります。
【グラフ例4 棒グラフにグラデーション】
実際に仕事で作った色指定は全然違いますが、今回は省きます。
簡単に説明すると高さによってグラデーションが変わる物で、
高さ指定・グラデーション指定をclassとidで分けて指定することで、自由な変化を持たせています。
さあ、どんどん行きましょう。
グラフと言えば、やはり見やすさが大事。
となれば「目安ライン」みたいな物、欲しいですよね。
たとえばこのグラフなら「棒グラフは○m、折れ線グラフは●%」を
超えたか超えていないか一目で分かるラインをおいてあげると見やすさがアップします。
グラフの軸の前に以下のタグを記入し、スタイルシートでデザインを指示をします。
ラインの場所は棒グラフの高さ指定を利用しましょう。
HTML
<span class="levelLine M38" id="L01">赤ライン</span>
<span class="levelLine M42" id="L02">灰ライン</span>
cssですが、目安ラインを引くためにまずはグラフ全体の位置を絶対表示にしておきます。
CSS
div.graph {
margin: 0px;
border-width: 1px;
border-style: solid;
border-color: #666;
padding: 0px;
width: 520px;
height: 420px;
position: absolute;/*絶対表示に指定*/
overflow: hidden;
}
この上で以下のように記載してください。
でないとずれる可能性があるんです。
/* 目安ライン */
.levelLine {
text-indent: -8000px;
margin: 0px;
border-top-color: #fff;
padding: 0px;
position: absolute;
left: 50px;
bottom: 48px;
}
.levelLine#L01 { /*赤*/
width: 395px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #f00;
}
.levelLine#L02 { /*灰*/
width: 395px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #333;
}
【グラフ例5 グラフに目安ラインを引く】
いかがでしょう?
少しは参考になりましたでしょうか?
まあ、仕事を終えた後の覚え書きなので対して役には立たないかとw
実際、GoogleAPIとかHTML5がありますからね。
なお自分のサイトに利用しようとしてずれた、と言う方はおそらく配置ピクセルが問題なのでcssのピクセルを自分のサイトに合うようにいじってみてください。]]>
http://www.gan.st/furu/blog/:1:2017
furu
2016-10-14T08:42:24Z
2016-10-14T17:42:24+09:00
棒グラフはとても簡単。領域を区切って背景色をつけてあげれば良いのです。
前のエントリーの内容に折れ線グラフに重ねるので、CSSやタグの形は統一しました。
HTML
<div class="graph">
<dl class="axis">
<dt class="axis-y">m</dt>
<dd class="axis-y">
<ul><li><b>5.0</b></li><li><b>4.5</b></li><li><b>4.0</b></li><li><b>3.5</b></li><li><b>3.0</b></li><li><b>2.5</b></li><li><b>2.0</b></li>
<li><b>1.5</b></li><li><b>1.0</b></li><li><b>0.5</b></li></ul>
</dd>
<dt class="axis-x">days</dt>
<dd class="axis-x">
<ul><li><b>1</b></li><li><b>2</b></li><li><b>3</b></li><li><b>4</b></li><li><b>5</b></li><li><b>6</b></li><li><b>7</b></li><li><b>8</b></li><li><b>9</b></li><li><b>10</b></li><li><b>11</b></li><li class="finish"><b>12</b></li></ul>
</dd>
</dl>
<dl class="cssbargraph">
<dt>value 0</dt>
<dd><span class="M15">1.5</span></dd>
<dt>value 1</dt>
<dd><span class="Mnull">null</span></dd>
<dt>value 2</dt>
<dd><span class="M30">3.0</span></dd>
<dt>value 3</dt>
<dd><span class="M05">0.5</span></dd>
<dt>value 4</dt>
<dd><span class="M17">1.7</span></dd>
<dt>value 5</dt>
<dd><span class="M35">3.5</span></dd>
<dt>value 6</dt>
<dd><span class="M26">2.6</span></dd>
<dt>value 7</dt>
<dd><span class="M41">4.1</span></dd>
<dt>value 8</dt>
<dd><span class="M50">5.0</span></dd>
<dt>value 9</dt>
<dd><span class="M02">0.2</span></dd>
<dt>value 10</dt>
<dd><span class="M01">0.1</span></dd>
</dl>
</div>
CSS
/*軸*/
.axis {
margin: 11px;
padding: 10px 10px 10px 30px;
width: 458px; /*参考元からwidthを変更しています*/
height: 370px;
font-size: 12px;
border: 1px solid #ccc;
color: #666;
}
.axis dt {
margin: 0;
padding: 0;
}
.axis dd {
margin: 0;
padding: 0;
}
.axis ul {
margin: 0;
padding: 0;
list-style: none;
}
.axis li {
margin: 0;
padding: 0;
width: 20px;
}
dt.axis-y {
height: 20px;
}
dd.axis-y li {
width: 8px;
height: 32px;
border-top: 1px solid #666;
border-right: 1px solid #666;
}
dd.axis-y b {
width: 25px;
height: 20px;
text-align: right;
position: relative;
top: -5px;
left: -30px;
font-weight: normal;
display: block;
}
dt.axis-x {
float: right;
}
dd.axis-x {
margin: 0 0 0 8px;
}
dd.axis-x li {
width: 32px;
height: 8px;
float: left;
border-top: 1px solid #666;
border-right: 1px solid #666;
}
/* X軸の最後は値を表示しない */
dd.axis-x li.finish {
width: 32px;
height: 8px;
float: left;
text-indent: -8000px;
border-top: 1px solid #666;
border-right: 1px solid #FFF;
}
dd.axis-x b {
width: 32px;
text-align: center;
position: relative;
top: 12px;
left: 16px;
font-weight: normal;
display: block;
}
/*軸と重ねる*/
.cssbargraph {
margin: 10px;
position: relative;
top: -397px;
left: 61px;
}
/*グラフ*/
dl.cssbargraph dt, dl.cssbargraph dd {
margin: 0;
padding: 0;
}
dl.cssbargraph {
width:445px;
height:385px;
}
dl.cssbargraph dt{
display:none;
}
dl.cssbargraph dd{
margin-top: 26px;
position: relative;
width: 33px;
height: 330px;
float: left;
display: inline;
}
dl.cssbargraph span{
text-indent: -8000px;
position: absolute;
left 0px;
bottom: 0px;
top: 0 auto;
width: 23px;
display: block;
}
dl.cssbargraph dd span{
background-color: #666;
}
/* 棒グラフの長さ&レベルラインの高さ */
.Mnull{height: 0px;}
.M00{height: 1px;}/*0level*/
.M01{height: 6.6px;}
.M02{height: 13.2px;}
.M03{height: 19.8px;}
.M04{height: 26.4px;}
.M05{height: 33px;}
.M06{height: 39.6px;}
.M07{height: 46.2px;}
.M08{height: 52.8px;}
.M09{height: 59.4px;}
.M10{height: 66px;}
.M11{height: 72.6px;}
.M12{height: 79.2px;}
.M13{height: 85.8px;}
.M14{height: 92.4px;}
.M15{height: 99px;}
.M16{height: 105.6px;}
.M17{height: 112.2px;}
.M18{height: 118.8px;}
.M19{height: 125.4px;}
.M20{height: 132px;}
.M21{height: 138.6px;}
.M22{height: 145.21px;}
.M23{height: 151.8px;}
.M24{height: 158.4px;}
.M25{height: 165px;}
.M26{height: 171.6px;}
.M27{height: 178.2px;}
.M28{height: 184.8px;}
.M29{height: 191.4px;}
.M30{height: 198px;}
.M31{height: 204.6px;}
.M32{height: 211.2px;}
.M33{height: 217.8px;}
.M34{height: 224.4px;}
.M35{height: 231px;}
.M36{height: 237.6px;}
.M38{height: 250.8px;}
.M39{height: 257.4px;}
.M40{height: 264px;}
.M41{height: 270.6px;}
.M42{height: 277.2px;}
.M43{height: 283.8px;}
.M44{height: 290.4px;}
.M45{height: 297px;}
.M46{height: 303.6px;}
.M47{height: 310.2px;}
.M48{height: 316.8px;}
.M49{height: 323.4px;}
.M50{height: 330px;}
これで棒グラフができるはずです。
データが存在しない場所も対応しています。
【グラフ例1 棒グラフ】
さて、これの上に折れ線グラフをのっけていきます。
まず問題になるのが折れ線グラフ用のY軸が必要です。
現在あるY軸を利用して、右側に配置できるようY軸を作ってあげましょう。
HTML
<dt class="axis-yR">%</dt>
<dd class="axis-yR">
<ul><li><b>100</b></li><li><b>90</b></li><li><b>80</b></li><li><b>70</b></li><li><b>60</b></li><li><b>50</b></li><li><b>40</b></li><li><b>30</b></li><li><b>20</b></li><li><b>10</b></li>
</dd>
CSS
dt.axis-yR {
height: 20px;
float: right;
}
dd.axis-yR {
position: relative;
left: -40px;
top: 20px;
float: right;
}
dd.axis-yR li {
width: 8px;
height: 32px;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
dd.axis-yR b {
width: 25px;
height: 20px;
text-align: right;
position: relative;
top: -5px;
right: -5px;
font-weight: normal;
display: block;
}
更にこのまま件のグラフをコピペすると棒グラフの分だけ折れ線の位置がずれているはずです。
topとleftの数値を調整してあげます。
.csslinegraph {
margin: 10px;
position: relative;
top: -397px;/*折れ線グラフと重ねるため調整*/
left: 61px;/*折れ線グラフと重ねるため調整*/
}
これで棒グラフと折れ線グラフが重なって … ちょっとまって!?
グラフの下の部分、謎の空白がぽか~んとあいてませんか?
【グラフ例2 棒グラフと折れ線グラフを重ねる】
グラフ例を見てもらうと分かりますが、スクロールした先に文字が書いてありますよね?
でもこれ、ソースを見てもらうと分かりますが折れ線グラフのすぐ下に書いてあるんです。
これ、グラフを重ねるために使った「position: relative;」が原因なんです。
これによってグラフは重ねることができましたが、元々グラフがあった場所を保持されてしまいます。
これは見た目が悪い!
なのでグラフを表示している親要素を以下のようにします。
せっかくなのでグラフも囲ってみました。
div.graph {
margin: 0px;
border-width: 1px;
border-style: solid;
border-color: #666;
padding: 0px;
width: 520px;/*サイズを指定しましょう*/
height: 420px;/*以下同文*/
overflow: hidden;/*ここで空白を隠します*/
}
【グラフ例3 グラフ完成】
さあ、これで棒グラフ+折れ線グラフが完成しました!
せっかくなので次のエントリーではこのグラフを見た目良くします♪]]>
http://www.gan.st/furu/blog/:1:2012
furu
2016-10-14T08:36:59Z
2016-10-14T17:36:59+09:00
ま、見ている人も居ないと思いますが。
ポケモン映画のレポートすら書いてませんからね。
面白かったですがそれはそれ、今回は仕事の覚え書きです。
先月、昔居た会社から仕事をいただきました。
詳細は言えませんが、ウェブデザインのお仕事です。
と言っても一般に公開するウェブサイトではないのですが…。
そこではじめにもらったお仕事は「出力されてくる数字をウェブ上でグラフ化すること」
となると当然こういう話になる訳で。
私「HTML5とかGoogleAPIとかは?」
旦那(担当です)「Googleとか、いつサービス終わるか分からない物を使う訳にはいかない場所だからやめて欲しい」
私「となると…CSS?棒グラフで良い?」
旦那「任せるよ。でも、折れ線グラフも欲しい。両方を一つのグラフ領域に入れられれば理想」
私「」
幸いなことに、CSSのみで折れ線グラフを描画する方法は以下のブログで説明されていました。
CSSだけで折れ線グラフを書く方法 - ふじこのプログラミング奮闘記
屋上屋を架すような事は避けますが、一点だけ。
具体的に、じゃ、このグラフを手持ちのデータにしたい時はどうするの?て所をお喋りします。
CSSを読み解くと分かると思いますが、折れ線グラフのドットは常に左側に描画されています。
次のデータへ行く線が上がるか下がるかで左下か左上か決まるんですね。
つまり、<span class="pi1 i10">は
・class="pi1"で前の数値より自分を11px増やす。(上昇ドットクラス、と勝手に命名します)
・<span class="i10">で次の数値が330px上に上昇する線を背景にする。(こちらは折れ線クラスにします)
この二つのクラスを使って折れ線グラフを描画していきます。
クラスを二つ同時に適応させる場合、間にスペースを入れてクラス名を書いていく方法を今回初めて知りました^^;
次の値が下降する時は<span class="pd11 d d4">と言うように書きます。
ドットクラスが「pi」ではなく「pd」になっていますね。
これは自身のデータが前の数字より下降したことを意味します。仮に下降ドットクラスと名付けます。
下降ドットクラスと折れ線クラスの間に下降宣言クラス「d」を入れてください。
これで描画されるドットの位置と、折れ線の向きが調整されます。
ちなみに件の折れ線グラフは一目盛り10%です。つまり11px上昇で10%UPということ。
+1%=+1pxで動かしているんですね。(軸で1px使っていることを頭に入れてね)
これを参考にクラスの数字をいじると自分の手持ちのデータが折れ線グラフになりますよ。
ここからは完璧蛇足なのですが、このグラフ、0から始まって居るのに
最初の値は3(つまりday1の値)から始まって居るんですよね。
これ、すっごく悩みました。仕組みを分かったつもりでも、出だしの値がリストに存在しないんです。
まあ、リストに格納する数値はぶっちゃけ自分ルールに変えて問題ないので、
day0の値0を入れれば問題解決なんですがw
これだけだと他ブログさんに蛇足をつけただけなので、
次のエントリーでこの折れ線グラフに棒グラフを付加し、更に小技をいくつか追記できたらと思います。]]>
http://www.gan.st/furu/blog/:1:2010
furu
2015-08-17T13:55:00Z
2015-08-17T22:55:00+09:00
ちょ!
キャンペーン当選!?と思ったら…
全プレのケチャップキャップでした。
ウチ、ケチャップは逆さにしておくのでキャップ邪魔。
つまりフィギアゲット、つーわけで。
なーんだと思っていたら
夜、ツールの総集編を見ながらタマゴを孵していたら
48個目のタマゴで色違いゲットw
♂ではありますが理想個体
現在ひらがなを勉強中の長女のために作っていたので速攻で「マカロン」と命名しボックスに入れておきましたw
まあ、暇があったら基礎ポイントつけておきますが。
しかし1/500~600の出現率のはずの色違いがサクッと二桁台で出ちゃうなんてw
ところで、ブエルタ・ア・エスパーニャが始まるんですよ、今週末から。
で、観戦中にポケモンふ化でちょっと高いハードルを考えていたのですが
♀の出現率12.5%のルカリオで、有用なタマゴ技を遺伝した♀6Vルカリオ(意地っ張り・控えめ両方)を用意するという超超高いハードルを見つけました。
ブエルタ終わるまでに1匹は出したいな…
そしたらルカリオの色違いでも作ってみるかな…
ルカリオの色違い、カラーリングが微妙だけどw]]>
http://www.gan.st/furu/blog/:1:2009
furu
2015-08-13T12:18:00Z
2015-08-13T21:18:00+09:00
長男が勝手に友達と約束したために利用できずにいました。
ので、一日ずらして本日伝説ゲット。
4枚あるので
長男はカイオーガ
旦那は水ポケスキーなのでパルキア
長女はなぜかディアルガ
残るは私。
ゲットでできるポケモンは他にグラードン、キュレム、ギラティナですがグラードンは自前でゲット可能(厳選はこっちの方が楽ですが)、キュレムはイマイチ使用する気になれず、となると実質ギラティナ一択。
と言う訳でギラティナにしてきました。
すでに白金玉持って居るためわざわざ海に潜る必要も無し、伝説の中でも割と優れた部類に入るので(肝っ玉などで無いとしんそくやねこだましが効かないなど)おおむね満足。
ただ、私自身があまり伝説に興味が無いのが問題w]]>
http://www.gan.st/furu/blog/:1:2007
furu
2015-08-12T09:11:00Z
2015-08-12T18:11:00+09:00
ポケモン・ザ・ムービー2015『光輪の超魔神フーパ』
以下、ネタバレです。
今回の映画に関しては簡潔に箇条書きで感想をば。
・子供向けに作られて、わかりやすい面白さがあったよ!
・でも突っ込ませてね!
・地味にフーパがドーナツ盗みまくりw良いのかそれw
・セレナの水着姿は!?
・アルセウスの一族が眉毛太いのは前の劇場版のゲストヒロイン(シーナ)を意識して?
・ロケット団は前回と変わらず良い仕事
・ルギアさんまたイケメン
・サトシ君ここでメガシンカやったので本編では無しとか勘弁よ
・ピカチュウ様がトレーナーデビューw
・今回のレックウザは良い子でした。てか、前回が悪すぎ
・あれだけメガポケ操ってるサトシ君もうポケモンマスター名乗って良いんじゃ無い?
・パwルwキwアw お前「くうかんポケモン」じゃなかったのかよwww
・サトシ君達を助けようとしてくれる優しい伝説達。もしかして過去劇場と時系列つながっている?
・となれば当然トリは三輪セウス。声は無かったけどw
・フーパは下手なゲスト声優使われなくて満足。くぎゅーぱかわえぇ
・Tweedia良いっすね。EDでカバーの花の花畑歩いているのよね。
・短編はひたすら可愛いだけでした。かわいい、以上。
・あれ、ところで短編ポスターで土台役だったクレベースは?w
こんな感じです。
さ、フーパ厳選するかぁ…
利用アイコン:
]]>
http://www.gan.st/furu/blog/:1:2004
furu
2015-08-09T13:08:00Z
2015-08-09T22:08:00+09:00
なので記録は99連勝でストップ…。
100連勝でレア木の実もらえたのに…。
やる気ダウン
セブンイレブン配布のルギアもマルスケじゃなかったし…]]>
http://www.gan.st/furu/blog/:1:2002
furu
2015-07-27T14:04:00Z
2015-07-27T23:04:00+09:00
やっと出たよう
あれ?なんで?ダンバルじゃないの?
でしょw
実は旦那とふ化担当をトレードしていました。
なので旦那の方は
ちゃんと出してくれました。
いや~、やっと出たよ。
またこの先色違い出すのが長いだろうけどなぁ。
とはいえブリーダー業はしばらくお休みです。
映画が終わったら考えます~。]]>
http://www.gan.st/furu/blog/:1:2000
furu
2015-07-21T06:41:03Z
2015-07-21T15:41:03+09:00
いやぁ、夏風邪にやられました。
長女からもらったんですが、本人鼻垂らしているだけなのに私ときたら目眩起こして長男の参観中に倒れそうになりましたよ
さすがに教室で倒れるのはアレなんで、廊下に出てしゃがんでいたら長男友人のお母さんや先生方に助けてもらいました
ホント、申し訳ありませんでした。
そんなこんなで長らく寝込んでいましたが(寝込んでいたのにツール・ド・フランス見て夜更かししていたのは秘密ですw)ようやく後は引っかかった痰を追い出すのみまで回復しました。戻って参りました><
つーわけで、ツールを見ながら以前立てた目標を達成すべく自転車こぎまくりです。
とりあえず色違いのアブソルはもう出しました。
現在は色違いのメタグロスを目指してタマゴ割り中
…なんですが。
その間に実は色違いのマフォクシーを作ろうと思い立ちフォッコを量産していたんです。
以上利用アイコン:
ところが待てど暮らせど出てこない。
旦那なんか大量に色違いを出しているのに全然出てこない。
おまけにツールでは応援していた選手が昨日リタイア。
正直へこみモードです。
と言う訳でメタグロスにシフトチェンジしたんですが。
ま、出る気はしませんw
…セブンイレブン配布のルギア、マルスケだと良いなぁ…]]>
http://www.gan.st/furu/blog/:1:1998
furu
2015-06-28T14:41:00Z
2015-06-28T23:41:00+09:00
私自身シロナを崇拝(?)しているため、バランスパーティになりがちなんですよ。
以上使用アイコン:
たとえば
主力をメガアブソルにしようとします。
↓
アブソルは悪タイプのため虫タイプや格闘タイプに弱いので飛行・炎・エスパー・フェアリーなどをサポートに入れます。
↓
エスパーの弱点はある程度フェアリーと悪タイプのアブソルで補完できますが、フェアリーの弱点である鋼は相殺できません。
(毒はエスパーで対処できますが、ダメージにはなります)
また、炎・飛行は岩を食らうとダメージが四倍になります。
と言う訳で鋼・岩双方に抜群を取れる格闘と毒・炎双方に抜群を取れる地面を追加します。
↓
ガブリアスの弱点氷とフェアリーはどちらもルカリオが対処できますが、今一歩押しに欠けるのでガブリアスにはアイアンヘッドを持たせることが必須、ファイアローはフレアドライブも持たせます。
最後の一体は毒タイプを入れるか、もう一体強キャラを入れるかを全体の技構成、手持ちのポケモンの性別、アイテムなどを見て決めます。
とまあこんな感じでいつも組んでいます。
一方旦那はジムリーダーのように一つタイプを選んで、そこから「勝てる」構成を考えるよう勧めてきました。
たとえば
私がよく使う「エスパー」を主軸にします。
例としてメタグロスを主力に起用します。
↓
するとエスパーの弱点である悪に対応するためにエスパー・格闘のエルレイドやエスパー・フェアリーのサーナイトを起用します。
↓
また鋼の弱点である炎・地面に対処するため、水・エスパーも起用します。
また旦那曰く、水タイプは水が苦手と言うことで、サブウェポンに10万や草結びを入れておきます。
エルレイドにリーフブレードを持たせておくと更に安心度が上がるかも。
or
↓
虫タイプも嫌なので炎・エスパーも居ると安心ですね。
ヤドキングを起用するならパワージェムも持たせると尚良し。
(エルレイドが苦手な飛行タイプにも対処できるので)
↓
後はゴースト・エスパー対策で、悪・エスパーのカラマネロ辺りが入ると完成でしょうか。
サーナイトやヤドキングにシャドーボール辺りを持たせるだけでも良さそうですが…。
あるいは無理にカラマネロを入れずに、準伝説・伝説・幻などを入れると良いかもしれませんね。
ルギア、ビクティニ、セレビィ、ラティアスorラティオス辺りが候補ですか。
火力の底上げを目指すならルギアorラティで決まりでしょう。
以上利用アイコン:
こんな感じでお気に入りのポケモンを活躍できるメンバーを組むよう薦められました。
まールギアは特性マルチスケイルが強いのに強い個体をゲットできないめんどくさい状態なので無難にラティでしょうね。フェアリーはメタグロさんがコメパンでぶっつぶす方向で。
となるとメガシンカはメタグロス・サーナイト・エルレイド・ラティのどれかですね。
どれがメガシンカしても利点はあるので、後はバランスの問題ですね。
こうやって見ると格闘縛り、悪縛りなメンバーを作っても良いかもですね。
ドラゴン縛りをして妖肌ハイボに沈んでいくのも良いかもしれませんw
てか、ドラゴン縛りは間違いなくディアルガ必須ww]]>
http://www.gan.st/furu/blog/:1:1993