ちなみにバージョン 52.0.2743.116 mだ。Firefox 48.0.2やEdgeでは私の期待と想像通りにフッタは画面をスクロールして現れる一番下に着いている。
昨夜色々弄った結果なので、シュタゲのごとく改変した箇所を一つ一つ元に戻してはテストして行きとうとう元のβ世界線にたどり着いたんだが、改変前のサンプル http://hashrock.github.io/flexbox-example/page4.html が既に、ブラウザ幅を狭めると中央部の文章ががフッターを突き抜けて下に伸びる…。
ので、サンプルを見様見真似でじわじわ変更するしかできない私がどうにか出来る事象では無い…。
FlexBoxでHoly Grailレイアウトの実装は時期尚早という事か。現状のFloatによる実装の上にBulmaなコンポーネントを使うか、あるいはChromeは無視して進めるか。CSSにありがちな、謎のおまじないを入れると治ったりしないかしら。
Chromeも結構シェアあるし現行より劣るのはいかんし、正道としては、やはりBulmaなグリッドで何とか実現できないものかを探るか。これはBulmaでは無いが http://webdesignrecipes.com/css-grid-system-layout/ みたいな感じで。
成功してもBulma依存になってしまうがこの際致し方ない。そもそもBulmaのグリッドって横幅をピクセル数で固定できるのかからまず調べねば…。先が長いな…。
Bulmaではないが http://hashrock.github.io/solved-by-flexbox-ja/demos/grids/ の例ではピクセル数を固定してはいないようだ。
…というかやっぱ書けないまでもCSSをある程度読めないと埒が空かない気がしてきたな。
2016年08月
Bulmaのカラムグリッド
http://bulma.io/documentation/grid/columns/ を利用して、聖杯レイアウトにてメインコンテンツ部分が普段は2段組で表示し、ブラウザウィンドウの幅が狭くなったら1段にチェンジ、は出来た。
が、2段組←→1段組に切り替わる幅の閾値が狭すぎる。もっと広い段階で1段に切り替わってほしいんだがどうしたものか。何か切り替わるピクセル数とか指定できてもよさそうなものだが。
まぁもうちょっとドキュメントを良く読むか。しかしこのドキュメント、サンプルばっかで属性一覧的なものが無いんだよねー。http://bulma.io/documentation/grid/columns/ どっか他にあるのだろうか。
あと、メディアオブジェクト使ってみたが色がいい感じにならんというか、これ、透明、というか位置のみのコンテナでは…。⇒boxで囲んで使うものらしい。しかしboxも色とか形の指定が分からぬわ。
★EdgeとFirefoxでは概ね意図通り表示されるが、Chromeだと許しがたい崩れを起こす。これはまずい。Bulmaではなく自前のCSSの方。
Holy Grail Layoutの中に四角い領域を並べて
普段は1行に2つづつ、ウィンドウが小さくなったら1行に1つ、にした筈なんだけど、何故かウィンドウが充分広い時は2つではなく全力で詰めてしまう。うーむ、CSSは難しい…。
ここはいよいよ例のBulmaのグリッドシステムの出番かしら。配置は自前にして外部ライブラリは装飾コンポ―ネントだけにして流行り廃りに対応するつもりだったんだが…。
http://hashrock.github.io/solved-by-flexbox-ja/demos/grids/ を見れば何とかなるかしら。⇒やってる事同じだった。おかしいな。まぁ明日はBulmaの方でやってみるか。どうもCSSは結局サンプルからの試行錯誤になって体系的に責められないのでいかん。といってもCSSをまともにマスターする気は無く。
しかしこれ、配置のひな形が出来たら次はBulmaのコンポーネント配置して、その後データ入れたHTMLを試作して、最後に各ジャンル汎用で使えるPHPにするというんだから先が長い。現行のページも、全く厳密ではないが、大まかにはMVCに分離しておいたのは不幸中の幸いだ。私の目測ではVだけ変える事が多分できる。
Bulma
ここ数日、表示データの更新と長年の間に崩れた整合性の改良を行っていたが完了したのでいよいよ表示系。
Bootstrapで一から作り直すのも大ごとだし、他のCSSライブラリ的なものをincludeして各要素を今風のコンポーネントで済まそうと思ったんで、利用が簡単でかつ割と新しいBulmaを使おうと調査中。デフォルトの色合いが青いし。CSSだけで済みそうな所が良い。
ちなみに昔の女学生の体操着はBulmaではなく、Bloomerな。
とりあえず現行のヘッダに
<link rel="stylesheet" href="https//cdn.rawgit.com/jgthms/bulma/master/css/bulma.min.css"/>
を付けただけでは、コンポーネントのCSSは完全に無視された。横着し過ぎたか。
↓
https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.2/css/bulma.min.css
にしたらOKだった。
但し!さっぱりお洒落にならないどころか、そもそも薄いグレイの背景に薄い色の文字が表示されてしまいむしろ見ずらい。
あと自作のCSSと何か干渉しているらしいし。
ダメだ。使うなら一新しないとダメだ。
挙動がややこしいので、今の3ペイン構造の大枠だけは使うか。こことは干渉しないようだし。
肩が痛くて病院
いよいよまずい事になったのでマンション1Fの病院へ。同じ建物に病院があるとたまに便利。
特に関節に異常は無いとの事で、また肩に注射して痛み止め薬貰って家で安静にしていた。
もう腕をだらりと肩がぶら下げているだけで既に痛い。
ポーズを研究した所、進撃の巨人の心臓を奉げる敬礼ポーズをすると割と痛まない事が判明。初期ヤマトの敬礼だな。
その後、処方された痛み止め飲んでお風呂入ったら大分よくなった気がする。
肩が痛い
恋愛ラボ 2巻 (まんがタイムコミックス)
2巻だとまだ絵が微妙。
リコちんは小学生の頃から2つも習い事してるし、さすが「藤女」なる名門私立女子中設定だとヤンキー設定の娘も育ちが良い…。
前の副会長の変な眼鏡はわざとだったのね。
生徒会への匿名恋愛相談の、答えを見つける所でなくて、答えを伝える方法で延々とドタバタする等、どうも力点の置かれる所が独特の漫画だな。
恋愛ラボ 2巻 (まんがタイムコミックス) 宮原るり 芳文社 2009-01-07 売り上げランキング : 42849 Amazonで詳しく見る by G-Tools |
JavaのStream API
順列都市〈下〉 (ハヤカワ文庫SF)
どこかを読み飛ばしたのか、TVC宇宙が何で無限で永遠に拡大していくのか良く分からんかった…。p27か…
そして、物理的コンピュータで走らされていたシミュレーションTVC宇宙が、突然終了させられたら、そのときわたしが目撃しているのは、継続しているその宇宙-塵を材料につづいている拡張-である、というのが最良の説明でしょう。
うむ、読んでもわからん。物理的コンピュータの電源切ったらパーになりそうな感じだが違う事は作中で何度も強調されていたのでそうなのだろう。「あると思えばある」なのかしら。
んで、私的には下巻の2/3を過ぎたあたりからやっと本編が始まる感じ。それまでは下ごしらえというか。
順列都市〈下〉 (ハヤカワ文庫SF) グレッグ イーガン Greg Egan 早川書房 1999-10 売り上げランキング : 180241 Amazonで詳しく見る by G-Tools |
ダブルタイフーン
襲来だが、朝は曇りだし、昼間、東京の風雨が激しかった間は会社の頑強なビルディングの中に居て、残業して帰る頃には雨が止んでいたので何の被害も受けなかった。
それよりこの土日、土曜は銀行、日曜はTVアンテナの工事、と午前中から用事があり寝不足で頭痛が。