エントリー

2016年10月の記事は以下のとおりです。

娘の誕生日プレゼント 第二弾

義弟からの誕生日プレゼントは、色鉛筆のセットを買ってもらった娘。
じゃあ、当家からは?との答えが…

クトゥルフ神話 TRPG

まさかの「TRPG(テーブルトークRPG)」ルールブック。 Σ(`ロ´ノ)ノ

私もガキの頃、同級生に誘われて挑戦してみたけど…
1回だけで終了しました。
面白さ云々の前に…
所謂GM(ゲームマスター)の家が遠かったんだよねぇ(苦笑

当時、ファミコンもRPGブームで
気軽にあそべたしねぇ。 ( ´д`)トオイメ

それにしても…
ここまでPC等が普及している今、
こんなアナログチックな「TRPG」が生き残っていた事にビックリ。 Σ(`ロ´ノ)ノ

更に娘が「TRPG」に興味を持っていた事にビックリ。 Σ(`ロ´ノ)ノ

まぁ、想像力を養う事ができそうなのでOKでしょう。
って…
私がOKする前に既に愚妻がポチッ。 昨日到着してるんだけどね。
≧∇≦ブハハハハハ

娘の誕生日プレゼント 第一弾

先日、義弟から早めの誕生日プレゼントを買ってもらった娘。
それは…

三菱鉛筆「色鉛筆 No.888<36色セット>」

以前にもサインペンのセット等、文房具を選択する事があったんだけど…
2014年
2015年 どうやら本気のようです(苦笑

まぁ実際、作品(?)を見ると、なかなか上手な感じ。
多少(かなり?)親馬鹿目線も入ってるけど(苦笑

「手に職」って訳じゃないけど
絵やデザイン的な事も「出来ない」よりは、いいかな?と。

ただ…
その作業をPCでやってくれれば、ほぼ無料なんだけどねぇ。
≧∇≦ブハハハハハ

レスポンシブ化 table編-2

20161020115831.jpg前回は「table」の「td」タグを縦組みに変更して、
レスポンシブ化に対応させたんだけど…
レスポンシブ化 table編

こんな感じの表を
上記の方法でレスポンシブ化させると
無駄に縦長な表になる事に。

横方向で比較したい部分もあるしね。

20161020115832.jpgちなみに、width指定を解除する等して
レスポンシブ化させると、こんな感じ。

日本には縦読みの文化もあるから
「効果」の部分が読みにくい読みにくい。
┐(-_-;)┌

ただ…
この状態でもググる先生からは
モバイルフレンドリーとして「OK」がもらえます。

まぁ、人間に読みにくくても
comに読みやすい(解釈しやすい)か?って話ですからね。

とはいえ、さすがにこのままじゃねぇ。って事で
レスポンシブ化 img編 の手法を採用する事に。

20161020115833.jpgwidthを表示に差し障りないサイズに指定し、
overflow-x: scrollで横方向にスクロールできるように。

そのままだと、目で追うのが大変なので
背景色を交互に変更してみました。

付け焼き刃感は否めないけど…
まぁ、仕方無いでしょう。 (*>v<)

HTML5&CSS3デザインブック

レスポンシブ化 img編

今度は画像編。

一応、ヘタッピなりにも攻略っぽい事もやっていたりして…
その場合、Excel等で作成した大きな画像を用意するケースも。

大体幅800が多いかな?
それを細工せずに使用すると、…
「モバイルフレンドリーじゃねぇぞ。 ゴルァ」
と、ググる先生に怒られます(苦笑

20161019165103.jpg
じゃあって事で
・max-width: 100%
・height: auto
を指定すると、ウィンドウサイズに合わせ
自動的にサイズが修正されます。

が…
要は画像が縮小表示されるだけので
風景や写真の画像なら問題無いかもだけど
文字が入った画像なんかは潰れちゃって何が何やらな状態に。
┐(-_-;)┌

20161019165104.jpgさすがに、それじゃ不親切だよなぁ。と。

そんな訳で画像を「div」で囲み専用のclassを用意。
・max-width
・height
・overflow 等を指定。

画像は100%サイズで表示させ、
スクロールで操作できるように変更しました。

ただ…
スマホには拡大させる機能もあるそうで…

拡大させる方がラクなのか、
スクロールさせる方がラクなのか…

ガラパゴス住民には判りません。
≧∇≦ブハハハハハ

レスポンシブ化 table編

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

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

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

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

20161017181305.jpgこちらはPC用のページ。

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

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

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

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

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

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

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

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

20161017181307.jpgこんな感じに。

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

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

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

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

定義がメチャクチャなのです。 \(^o^)/

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

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

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

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

  • 1

ユーティリティ

- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

ページ

  • ページが登録されていません。

新着エントリー

新着コメント

Re:初のスキルLV.10武将 の続き 2
2014/09/24 from DSHata(管理人)
Re:伊東市の鳥
2014/05/16 from DSHata(管理人)
Re:【訃報】
2014/04/26 from DSHata(管理人)
Re:4147 根岸兎角
2014/01/19 from DSHata(管理人)
Re:娘、散財開始
2014/01/08 from DSHata(管理人)

過去ログ