伊豆・伊東情報館 Blog

ここしばらく放置していた、ホームページのレスポンシブ化。

ほとんどが「ゲーム攻略系ページ」だったので
ま、いっか。　┐(^-^;)┌
なんて、気楽な気分で放置していたんだけど…

ここ最近、日記をサボっている事もあって、
一部の攻略ページにアクセスが集中している事が判明。

とはいえ、作業量としては、なかなかのボリューム。
ようやく重い腰を上げ、全ページのレスポンシブ化を終了しました。

こちらはPC用のページ。

基本的に、攻略というよりもデータをまとめた内容が多く
かなり「table」タグを使用しています。

まぁ、ぶっちゃけ…
ヘタッピだしね。　(*>ｖ<)

これを文字サイズを小さくしたり、余白を小さくするなど
強引にレスポンシブ化すると、こんな感じに。

まぁ、読めない事は無いと思うんだけど、妙に窮屈な仕上がりに。

まだ、このページはマシな方で、
酷いページになると、2文字ずつ縦方向に伸び
非常に読みにくい状態に。

そんな訳でググる先生に質問してみると…
「おぉ　(ﾟ▽ﾟ*)」という方法を発見。

それは…
・見出し「th」を「display: none」で非表示に
・データ部分「td]を「display: block」で縦表示に
・「td:before」「display: block」で枠を用意する
・「td:nth-of-type(X):before」「content: "○○"」で枠に文字列を追加する

その他、もろもろ微調整した結果…

こんな感じに。

無駄に縦方向に伸びちゃったけど。　┐(-_-;)┌

個人的には気に入らないんだけど、
上の画像よりはデザイン的には、マシかな？と。

で…
本来、CSSは外部ファイルで指定するのがスマートなんだけど
あえて、ページ内で「style」指定する方法を。

ぶっちゃけ…
自分一人で作成しているので…

定義がメチャクチャなのです。　＼（＾o＾)／

それでも、ググる先生からはOKを頂けました。　orz

ただ…
過去にも書いたけど、当家は愚妻も私もガラケーなんですよね～　ヾ(;´▽｀A``

自分で確認する事ができないし、
そもそも、スマホでの操作も解ってないです。　orz

あ。
「全ページのレスポンシブ化を終了しました。」と言いましたが、
あくまでレスポンシブ化を終わらせただけで、
各ページの修正は、随時行っていきます。　il||li ＿|￣|○ il||li