文系プログラマーのなやみ

えっと、

レスポンシブデザインにするには、まずcssをリキッドレイアウトで作らないといけない。

リキッドレイアウトは、


例えばページ全体の横幅が100%だとすると、その中に含まれるサイドバーの横幅が20%、そしてメインの枠が80%。
そのメインの枠のなかに、２つ枠を横並びで均等に入れたい場合は、メインの枠を100%として、その中で50%と50%に分かれる…というような、なになにピクセル、みたいな固定値じゃなくて、パーセンテージでの指定をする。

ええと、算数の苦手な私は頭が痛くなるどころか、反応すらできない。言い表せないほど別世界。

今年、30代にもなって、お釣りの計算を間違えてライブハウスに迷惑かけたり、慎重に慎重にやったはずの海外送金の請求額を２度も派手に間違えて社内の２部署と区の税務署に迷惑をかけたりするぐらい、数字が苦手だ。とにかく苦手だ。

そもそも、私がプログラミングができるように見えるのは、見栄えを決めるファイルで「A」というキーワードに大きさや文字の色などを指定してあげて、中身を見せるファイルで見せたい場所に「A」と書いてそれを呼び出すcssの仕組みがわかる＆おもしろいから。以上。cgi、javascriptやflashの演算はすべてコピペで通してきた。１ずつ足していくとか、なんかちょっとでも動き出すと、もうだめ。怖くなる。cssはずっと固定値で使ってきた。

それで、さっきからリキッドでレイアウト組もうとしてるのに、もう、最初っからどうやったらいいかわからない。cssに数行書いて終了。他からコピーしてきたのをいじっても、全体像を把握しなきゃ意味が無いので、お手上げ。わかるようで手がつけられない。それでもう２〜３時間経った。（こんなの書いてる場合じゃないが、考えを整理しないと）

リキッドレイアウトできそうにない。いや、多分できるけど、多分出来る頃には会社がなくなってるぐらい時間がかかるかもしれない。

でもこれをしないと、絶対に先に進めない。

そこで見つけたのが、なんかそのうじゃうじゃした計算を飛び越えた向こうに、キリッとスマートなセマンティックレイアウトというのがあるらしい、ということ。

飛び級かもしれないがなにかこっちのほうが便利で使えそうな気がする。

まだ呆然としているこの頭でできるかどうかわからないけど、試してみたい。

参考にしようと思ってるのはこちら。

明日から使えるページレイアウト：セマンティックグリッドシステム

（ふじこのプログラミング奮闘記）


実作業より進め方を決めるのに時間かかる…。でも決めないと先に進めないから、間違ってないよね…

あ、ドリームウェーバーのテンプレートから作ればリキッドでもいけるかな…
いや、作った後の計算が…計算が…！！！



＜追記＞
去年からWordpressを使い始めたけど、よく見たらここで使われてるのがHTML5なことに気づいた。＜aside＞とか＜article＞とか＜header＞とか、特殊なタグ？それってちゃんと全部のパソコンで見られるの？と思いながら…

いつも焦って作ってきたからよく気付いてなかった……１年経って、今気付いた…（笑）

落ち着いて、こちらを読みなおす。

はじめてHTML5でコーディングする時に注意したいアウトラインとかいろいろ

（Webデザインレシピ）