気持ちが悪いので、LibreOffice calcが怪しいと仮定して検証してみることに。
管理人：YO$HI
好：車、音楽、ガジェット、DIY、鳥、猫
ガジェット大好き。何か作るの大好き。気に入ったものにはとことん拘る。
――そんな雑多な事を書き綴っていこうと思います。
"毒"多いけど。
スタイルシート エディタ (1)
今までテキストエディタでスタイルシートを編集していた。
テキストエディタはずっと使っていて慣れているから、
それほど苦痛ではなかったんだけど不便を感じるところもあるので
なんかスタイルシートに特化したフリーのエディタが無いものか探してみた。
スタイルシート特化 というのは流石に無くて
汎用的なHTMLやPHP等でも使えるエディタは結構見つかった。
その中で比較的多く勧められていたのが、Brackets。
早速落として入れてみる。
う～～～～～ん・・・・
普通のエディタじゃね？
何か設定で変えれば化けたりするかな？と思ったのだが
設定が見当たらないんだけどｗ
ひとまず「表示」→「テーマ」で
エディタの色をダークカラーにして、フォントサイズを少し大きくするぐらいしか
できることがなかった。
エディタとしては入力候補がすぐ出てきてくれるし割と使いやすい。
しばらく使い続けてみましょう(･∀･)
悪戦苦闘中
スタイルシートが言うことを聞いてくれず悪戦苦闘(ﾉ∀`)
@media ~(A) {
}
@media ~(B) {
}
@media ~(C) {
}
#hoge {background:#F00;}
・・・とういうのがあるとするやん？
理屈的には
@media ~(A) {
#hoge {background:#F00;}
}
@media ~(B) {
#hoge {background:#F00;}
}
@media ~(C) {
#hoge {background:#F00;}
}
/*#hoge {background:#F00;}*/
こんな風に元の#hogeをコメントアウトして、A～Cの中に#hogeをコピーすると
どの条件でも同じになるはず・・・・・
なのだが、何故か動きが違うんだワケわからんことに(ﾉ∀`)
なんかおかしい。どこか根本的に間違っているのか・・・？
（多分どこかに何か残っていて上手く動いてない）
こういう調査は消耗する('A`)
レスポンシブデザイン (2)
うん。理屈は理解した。
ブラウザの情報（横幅）からスタイルシートのどの部分を適用するか分岐させる だけ。
まずはHTML側の対応。
headタグに1行追加。
<meta name="viewport" content="width=device-width, initial-scale=1">
"width=device-width"が端末の幅を見ますよ と。
"initial-scale=1"は初期のズーム倍率を1（端末のデフォルト値）にする。
initial-scaleはなくても動くけど、変な動きしそうだから書いといた方が良さそう。
スタイルシート側は
@media screen and (max-width: 639px) {
～～～～
}
@media screen and (min-width: 640px) and (max-width: 999px) {
～～～～
}
みたいにメディアクエリを使って条件分岐させる。
あとは個々に変えたい部分を中に記載していけば良い って寸法だ。
問題は閾値をいくつにするかってことだ。
多くの端末に対応するなら細かく区切っていくべきなんだろうけど、
作るのもその後メンテするのも非常に面倒になる。
「スマホ」「タブレット」「PC」ぐらいで良いんじゃねーの？という気はする。
ウチのお客様はM$が60％以上を占めていて圧勝だけど
AndroidもiOSも10％を超えているので無視はできない。
どうするかね・・・。
あとスタイルシートの定義中で「そのままで良い」ものと「分けなくてはならない」ものを
洗い出す必要がある。
こっちの方がよっぽど面倒だな。
(; ﾟдﾟ )・・・・・
( ﾟдﾟ )
スタイルシート、1,500行あるんだが。