2016年10月の記事は以下のとおりです。
義弟からの誕生日プレゼントは、色鉛筆のセットを買ってもらった娘。
じゃあ、当家からは？との答えが…
まさかの「TRPG（テーブルトークRPG）」ルールブック。 Σ(`ﾛ´ﾉ)ﾉ
私もガキの頃、同級生に誘われて挑戦してみたけど…
1回だけで終了しました。
面白さ云々の前に…
所謂GM（ゲームマスター）の家が遠かったんだよねぇ（苦笑
当時、ファミコンもRPGブームで
気軽にあそべたしねぇ。 ( ´д｀)トオイメ
それにしても…
ここまでPC等が普及している今、
こんなアナログチックな「TRPG」が生き残っていた事にビックリ。 Σ(`ﾛ´ﾉ)ﾉ
更に娘が「TRPG」に興味を持っていた事にビックリ。 Σ(`ﾛ´ﾉ)ﾉ
まぁ、想像力を養う事ができそうなのでOKでしょう。
って…
私がOKする前に既に愚妻がポチッ。 昨日到着してるんだけどね。
≧∇≦ブハハハハハ
前回は「table」の「td」タグを縦組みに変更して、
レスポンシブ化に対応させたんだけど…
レスポンシブ化 table編
こんな感じの表を
上記の方法でレスポンシブ化させると
無駄に縦長な表になる事に。
横方向で比較したい部分もあるしね。
ちなみに、width指定を解除する等して
レスポンシブ化させると、こんな感じ。
日本には縦読みの文化もあるから
「効果」の部分が読みにくい読みにくい。
┐(-_-;)┌
ただ…
この状態でもググる先生からは
モバイルフレンドリーとして「OK」がもらえます。
まぁ、人間に読みにくくても
comに読みやすい（解釈しやすい）か？って話ですからね。
とはいえ、さすがにこのままじゃねぇ。って事で
レスポンシブ化 img編 の手法を採用する事に。
widthを表示に差し障りないサイズに指定し、
overflow-x: scrollで横方向にスクロールできるように。
そのままだと、目で追うのが大変なので
背景色を交互に変更してみました。
付け焼き刃感は否めないけど…
まぁ、仕方無いでしょう。 (*>ｖ<)
今度は画像編。
一応、ヘタッピなりにも攻略っぽい事もやっていたりして…
その場合、Excel等で作成した大きな画像を用意するケースも。
大体幅800が多いかな？
それを細工せずに使用すると、…
「モバイルフレンドリーじゃねぇぞ。 ゴルァ」
と、ググる先生に怒られます（苦笑
じゃあって事で
・max-width: 100%
・height: auto
を指定すると、ウィンドウサイズに合わせ
自動的にサイズが修正されます。
が…
要は画像が縮小表示されるだけので
風景や写真の画像なら問題無いかもだけど
文字が入った画像なんかは潰れちゃって何が何やらな状態に。
┐(-_-;)┌
さすがに、それじゃ不親切だよなぁ。と。
そんな訳で画像を「div」で囲み専用のclassを用意。
・max-width
・height
・overflow 等を指定。
画像は100％サイズで表示させ、
スクロールで操作できるように変更しました。
ただ…
スマホには拡大させる機能もあるそうで…
拡大させる方がラクなのか、
スクロールさせる方がラクなのか…
ガラパゴス住民には判りません。
≧∇≦ブハハハハハ
ここしばらく放置していた、ホームページのレスポンシブ化。
ほとんどが「ゲーム攻略系ページ」だったので
ま、いっか。 ┐(^-^;)┌
なんて、気楽な気分で放置していたんだけど…
ここ最近、日記をサボっている事もあって、
一部の攻略ページにアクセスが集中している事が判明。
とはいえ、作業量としては、なかなかのボリューム。
ようやく重い腰を上げ、全ページのレスポンシブ化を終了しました。
こちらは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