« 草津温泉共同浴場マップ | トップページ | ど初心者のレスポンシブウェブデザイン(HTML 実践編) »

ど初心者のレスポンシブウェブデザイン(何で効かないんだ)

もう1年ぐらい前からパソコンとスマホの両方で表示を変えるレスポンシブ・デザインのサイトを作りたい・・というか、前からある頁を改善したいと思って何度か着手したけれど、うまくいかなかった。

今回草津温泉共同浴場マップの制作にあたって、今度こそと改めてチャレンジしたけれど、やっぱり丸一日かかってもうまいこといかない。

振り返って思えば、原因はエディタとして使っている古いホームページビルダーが悪さしていたんじゃないかと。

たぶんいらん記述とか勝手に追加してたんだよ、たぶん。

流れとしては、いろいろ考えて、Media Queriesを使ってサイズごとのCSSに分岐させようとしたんだけど、それが効かない。動かない。あれこれやっても状態が変わらず、やんなった。

例えばpc.cssとphone.cssと作ったとするじゃん?

PCでもスマホでも表示が変わらなくて、しかも両方が効いちゃってるイメージ。

さんざんいじくりまわした後、シンプルな3行HTMLとCSS作って動作させたら動いた。

単純だけどそのシンプルなものに複雑な内容を載せていったら無事効くようになった。

本当の所、今まで古いままの型紙に、新しい内容だけずっと追加してきたから、急にHTML5にしようとか、SHIFT_JISじゃなくてUTF-8にとか、いっぺんに改造したからどこに問題点があるのかわけがわからなくなったっていうのが大きい。

とにかく最低限のことができるようになったのが幸い。

具体的な記述は次の記事ど初心者のレスポンシブウェブデザイン(HTML 実践編)にメモ代わりに書いておきたい。

|

« 草津温泉共同浴場マップ | トップページ | ど初心者のレスポンシブウェブデザイン(HTML 実践編) »

web」カテゴリの記事

メモ」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事