ハトネコエセンター・ラボ
このサイトは、CSSでいろいろ試してみるために作られました、実験のサイトです。
コンテンツとしては現在、何も用意されておりません。
この本（←アフィじゃないよ）を主に参考にしてこのサイトは作られています。
HTMLやCSSをある程度知っている、中級者向けの本になってしまいますが、
最近っぽいWebページを作れるようになるので、
（Amazonのレビューは星２ですが）それなりにおすすめします。
2014.6.21 23:30 ひとまず完成っぽい
2014.6.22 9:00 IEのグラデ対応
Internet Explorer 11 で見たときにグラデが反映されないの、
単なる未対応だと思ってたら対応してたようなのでCSS書き換え。
これでIE10以降ならグラデーションが効くようになりました。
以下、CSSのコード
/* 上から順に、Firefox, WebKit系(Chrome, Safari, Opera), IE10以降 のグラデ設定 */
background : -moz-linear-gradient( top,
rgba(0,0,0, 0) , rgba(92,90,230, 0.15) ) ;
background : -webkit-gradient( linear, left top, left bottom,
from( rgba(0,0,0, 0) ), to( rgba(92,90,230, 0.15) ) ) ;
background : linear-gradient(to bottom,
rgba(0,0,0, 0) , rgba(92,90,230, 0.15) ) ;
…なのですが、ためしにIE用の linear-gradient だけ置いてみたら、
最新版のデスクトップ用の、FirefoxやChrome、Operaでも動きましたので、
色指定書き直すときに大変なので、最初の２つは無くてもいいかもしれません。
ただし、そうすると今度は iPhone（つまりSafari） でグラデが効かないことを確認しましたので、
やっぱりwebkit系は残して、
/* IE, WebKit系だけ */
background : linear-gradient(to bottom,
rgba(0,0,0, 0) , rgba(92,90,230, 0.15) ) ;
background : -webkit-gradient( linear, left top, left bottom,
from( rgba(0,0,0, 0) ), to( rgba(92,90,230, 0.15) ) ) ;
とするのが良さげですね。
2014.6.22 16:45 古いAndoridでの不具合
2014.6.23 9:30 JavaScriptで対応
サイトメニューをCSS3の機能で折りたたみできるようにしていたが、
前述のとおり古いAndroid機種で動かなかったため、結局JavaScriptを書いて対応。
CSSハックも「CSS Browser Selector」を用いて試したが、
メニューが開きはするものの納得のいく挙動にならなかったのと、
ちゃんと動く、最新のAndroid OSが巻き添えをくらうのが気に食わなかったのでやめた。
（Andoroidの場合だけ疑似クラスhoverで対応させるというもの）
サイトメニューを開いているときに、
サイトメニューの部分以外をクリックしたらサイトメニューが閉じるという挙動にしたくて
先ほどからいろいろ挑戦しているのだが、どうにも上手くいかないのであきらめつつある……。
jQueryを使用してそれができるのなら、jQueryを使用せずとも出来るはずなんだけれど、
ライブラリなしでは難しいかな・・・。
2014.6.24 1:00 メニューがきれいに折りたたみするように
サイトメニューの部分以外をクリックしたらサイトメニューが閉じるという挙動、
時間がかかりましたが何とか実現できました。
配色はあとで整えるとして、
JavaScript部分はおおむね完成です。
jQueryはJavaScriptをある程度マスターしてからと決めていたので、
使わなくて完成できたのはとてもうれしいですね。
サイトメニューの部分はまだよかったのですが、
下部分の更新履歴的なやつの折りたたみが、かなり時間を取られました。
今後、記事が増えていくことを考慮しつつ汎用的な形の実装をするため、
「サイトメニュー」部分とは見た目の動きが同じようで、中身の挙動が結構違いますので、
開かなかったり閉じなかったり、２回押さないと開かなかったり、いろいろ苦労しました。
なんとかなったので、あとは暇を見て
色合いをちょこちょこ修正してこうかなという感じです。
あ、肝心の一部環境での動作検証してない……。疲れたのであとで。
2014.6.24 3:00 ちゃんとスマホで動くっぽい
Webブラウザでは、どれもOK。
IE8に対応する予定はありませんでしたが、
いちおう折りたたみを開くことだけはできたので、
見られないサイトでは無いようです。もちろんいろいろ対応してませんが。
Andoridはエミュレーターで見た感じ、
Android OS 2.3.3 では、auto:scroll が有効にならないのか、
div内がスクロールできず見られませんでした。
まあ、これもIE8ほどではないですが相当古いので置いときましょう。
（2010年末ごろ販売の機種だが、たいていの機種は4.0までのアップデートを提供した）
ちょっと古めの、Andoroid 4.0.3 ではちゃんと動作しましたし、
さらに古い Andoroid 3.2 でも動いたことを確認しましたのでOKです。
iPhoneに関して、
少なくとも iPhone 3GS, iPhone 4s において、確認した現象ですが、
領域外をタップしても折りたたんでくれないみたいです。
領域内タップでの折りたたみはおこなうので問題ありませんが、ちょっと残念。
動作検証はこんな感じで。
ね～む～い～・・・。寝よおー。
6月19日から3日かけて、PC、スマホ両者完全対応のサイトがついに出来上がり。
いろいろ新しく知ることだらけだった……。
JavaScript にも初めて手を出したし。
がんばったー