スマホでは色が有効

パソコンで使っていた文字画像でも、スマホで使えそうなものがある。
パソコンでも枠囲みの文字画像で文字が1ドットで背景が反転になっているものはスマホでは文字色がにじんで見栄えが悪い。
それ以外では、文字主体の文字画像は使えるものが多い。
(140*20)

(134*20)

(123*20)

スマホでは下線より色を使う方がいい。スマホではブロックということが強調されるようで、下線を使うとそれが下の文字と密着するので、ある場合にはそれが非常に見にくくなる。ならば色による強調がいいだろう。ただ、パープル・バイオレット(紫)といいネイビーといいパソコンでは黒とほとんど区別がつかないのが難点である。スマホでは鮮明に差が見えるのだが。


fb*系とab*系

ab*系はアルファベットの場合に使う。
LOG
NEWS BOX
SAMPLE
DATA

fb*系は日本語の場合に使う。
タコの殿堂
参考
重要


daとmaの違い

だいだい色のつもり/da/cc0066
ログの検索キーワードに着色。最近は少なくなった。

マゼンタ色のつもり/ma/ff0099
ログへのコメント。


fieldsetと角丸

[重要] 篠崎愛はかわいい。

[重要] 篠崎愛はかわいい。パソコンではIEでは角丸は無視されるが、Edgeでは角丸に表示されている。スマホではauブラウザ、Chromeともに角丸で表示されている。

重要
篠崎愛はかわいい。従来のパターン。

[重要] 篠崎愛はかわいい。

fieldset/legendだけではインパクトが小さい。色をつけるなり、枠線を変えるなりして、見栄えがよくなるようにする必要がある。
このfieldsetとlegendを今までの「枠囲み」の代わりに使うのもいいかもしれない。


横長データの処理

CSVファイルの形式
pre class="pre2 tbsoto"
20040111,"0120",玉の古紙,67308,上質,12,1500,125,玉屋,なし 
20040111,"0125",あんこ,13467,下,100,100,1,あん屋,なし 
20040111,"0122",せんべい,12834,並,50,1500,30,千屋,あり 
20040111,"0130",まんじゅう,12376,並,20,800,40,万屋,あり 
20040111,"0122",ぼたもち,12568,並,5,250,50,ぼた屋,なし 
20040111,"0120",龍の落とし子,74601,中等,40,2500,63,辰屋,なし 
20040111,"0125",そば,14876,並,10,800,80,そば屋,なし 
20040111,"0128",うどん,14834,上,20,1600,80,うどん屋,なし 
20040111,"0128",パイ,18234,良,50,3000,60,パイ屋,あり 
20040111,"0130",クッキー,18542,並,70,2100,30,九屋,あり 
20040111,"0122",ケーキ,18023,良,20,2000,100,慶屋,なし 

CSVファイルの形式
div class="pg4 tbsoto"
参考 20040111,"0120",玉の古紙,67308,上質,12,1500,125,玉屋,なし 20040111,"0125",あんこ,13467,下,100,100,1,あん屋,なし 20040111,"0122",せんべい,12834,並,50,1500,30,千屋,あり 20040111,"0130",まんじゅう,12376,並,20,800,40,万屋,あり 20040111,"0122",ぼたもち,12568,並,5,250,50,ぼた屋,なし 20040111,"0120",龍の落とし子,74601,中等,40,2500,63,辰屋,なし 20040111,"0125",そば,14876,並,10,800,80,そば屋,なし 20040111,"0128",うどん,14834,上,20,1600,80,うどん屋,なし 20040111,"0128",パイ,18234,良,50,3000,60,パイ屋,あり 20040111,"0130",クッキー,18542,並,70,2100,30,九屋,あり 20040111,"0122",ケーキ,18023,良,20,2000,100,慶屋,なし

枠囲みの問題点

日本語では別に違和感がない。
ファイル

しかし、アルファベットなどでは文字がベースラインより下に出る場合に見た目のイメージが悪い。
fopen good Quality

ベースラインに揃う場合はなんとか見える。
news memo


暫定スマホ版

暫定スマホとはヘッダーに下記の2行を追加しただけ。

SAMPLE
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">

画面が縮小表示されない。大きな画像は横にはみ出る。

tpc_0466 暫定スマホ対応
tpc_0466_org 従来版との比較

ヘッダー、フッターの「100% table」(tbhead,tbfoot)をカットすればなんとか見えるレベルになる。


トピックタイトルの書き方

ページ内での大きな項目は上のように「赤丸ボタン画像」+「青色タイトル」、「一重下線」または「二重下線」が、旧来からのパターンである。
スマホでは大きな画像と動画以外はその存在が無視されているようで、旧来のパターンはだんだん使いにくくなってきた。
要するに、テキスト重視である。

「赤丸ボタン画像」の代わりに使えそうなもの。
■●★▼
これらを使うとフォントサイズを変えてもボタン画像を作り変える必要がなくなることになる(当然)。

これからのタイトル


下線の色を変える


サブタイトル


タイトルにh1タグを使う例。上下に空行が入る。
しかし、このパターンは私の趣味に合わない。

タイトル

これからはこのパターンでいくか。



preタグの横スクロール

テキスト(dump_sjis_std.txt)の16進ダンプのパターン。

<div class="pg4 tbsoto">
等幅フォントを使ったもの。
16進ダンプ : 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 --- : ----------------------------------------------------------- 000 : 82 B1 82 EA 82 CD 53 68 69 66 74 5F 4A 49 53 2F 43 52 4C 46 002 : 89 FC 8D 73 82 CC 83 65 83 4C 83 58 83 67 81 42 0D 0A 94 BC 004 : 8A 70 83 4A 83 5E 83 4A 83 69 82 CC CE DD C0 DE D0 CE 82 C6 006 : BC C9 BB DE B7 B1 B2 81 42 0D 0A 96 7B 93 63 94 FC 95 E4 41 008 : 42 43 31 32 33 81 42 8E C2 8D E8 88 A4 82 CD 82 A9 82 ED 82 010 : A2 82 A2 81 42 0D 0A

<pre class="pre2 tbsoto">
これでは先頭のスペースが1個になり、等幅フォントでないから行の長さが揃わない。
その結果、見た目がガタガタ。
16進ダンプ
    : 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20
--- : -----------------------------------------------------------
000 : 82 B1 82 EA 82 CD 53 68 69 66 74 5F 4A 49 53 2F 43 52 4C 46 
002 : 89 FC 8D 73 82 CC 83 65 83 4C 83 58 83 67 81 42 0D 0A 94 BC 
004 : 8A 70 83 4A 83 5E 83 4A 83 69 82 CC CE DD C0 DE D0 CE 82 C6 
006 : BC C9 BB DE B7 B1 B2 81 42 0D 0A 96 7B 93 63 94 FC 95 E4 41 
008 : 42 43 31 32 33 81 42 8E C2 8D E8 88 A4 82 CD 82 A9 82 ED 82 
010 : A2 82 A2 81 42 0D 0A 

「.pre2」は「pre」タグの設定のうち「white-space:pre-wrap;」の部分を「white-space:pre;」にしたものである。
要するに、基本はpreタグと同じで、画面の右端で折り返さないだけ。


新型式のファイルリスト

旧型式の4列で100ファイルを表示するリストをpcsm化したもの。。
旧items.cssはlist.cssに対応。

サンプル(list.html)


★table/ol/li
  1. 生きている大本営発表
  2. 危機は権力の好機
  1. 庶民の声にも色々ある
  2. 匿名の誘惑/ダニとゴミ
  1. 世論調査の捏造
  2. サッカーと旭日旗
  1. 新行動パターン
  2. マスコミ頻出の「経済」芸人

★tableだけ
生きている大本営発表
危機は権力の好機
庶民の声にも色々ある
匿名の誘惑/ダニとゴミ
世論調査の捏造
サッカーと旭日旗
新行動パターン
マスコミ頻出の「経済」芸人

- 2021/03/06 -


pg系スタイル

「.pg」はpreタグで使うことを前提としている。スマホではあまり使わない。
「.pg2」と「.pg3」はdivタグで「.tbsoto」スタイルと一緒に使うことを前提としている。スマホでは使えるパターン。
「.pg2」と「.pg3」の違いは四隅が丸か角かの違いである。

比較
.pg {
    color:navy;
    font-family:"MS 明朝",serif;
    font-size:15px;
    line-height:1.5;
    background-color:#fffff0;
    border:1px solid #339966;
    padding:5px;
}

.pg2 {
    color:navy;
    font-family:"MS 明朝",serif;
    font-size:15px;
    line-height:1.5;
    background-color:#fffff0;
    border:1px solid #008000;
    padding:5px;
    border-radius:10px;
    white-space:pre;
}

.pg3 {
    color:navy;
    font-family:"MS 明朝",serif;
    font-size:15px;
    line-height:1.5;
    background-color:#fffff0;
    border:1px solid #008000;
    padding:5px;
    white-space:pre;
}

pgスタイル
参考
.pg {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #339966;padding:5px;}
.pg2 {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #008000;padding:5px;border-radius:10px;white-space:pre;}
.pg3 {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #008000;padding:5px;white-space:pre;}

pg2 + tbsotoスタイル。
四隅が丸。
パソコンスマホのChromeではブロックの下部に横スクロールバーが出る。
角丸の枠は内容が少ない場合は問題がないが、長くなると上部の左右の角丸がかすれて見える。これはこのスマホだけの現象かもしれない。 そこにソースなどを書くのはイメージがよくないので不適切である。
参考 .pg {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #339966;padding:5px;} .pg2 {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #008000;padding:5px;border-radius:10px;white-space:pre;} .pg3 {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #008000;padding:5px;white-space:pre;}

pg3 + tbsotoスタイル。
四隅が角。
パソコンとスマホのChromeではブロックの下部に横スクロールバーが出る。
参考 .pg {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #339966;padding:5px;} .pg2 {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #008000;padding:5px;border-radius:10px;white-space:pre;} .pg3 {color:navy;font-family:"MS 明朝",serif;font-size:15px;line-height:1.5;background-color:#fffff0;border:1px solid #008000;padding:5px;white-space:pre;}

- 2021/02/21 -


引用中の引用

「bqu」スタイル。文字サイズを小さくして、上下左右にスペースを入れる。
blockquoteタグ内で使うのが目的である。
 最高裁がこれを大法廷にかけることを決定した段階で、逆転判決が出るであろうことが関係者のあいだでささやかれた。すでに、同種の事件として、津地鎮祭に関する名古屋高裁の違憲判決が最高裁で破棄されていたからでもあるが、こと自衛隊に関して最高裁が憲法の番人という神話は誰も信じないような歴史が積みあげられてきていたからであった。
 果せるかなというべきか、それにしてもというべきか、原審を破棄する最高裁判決(一九八八・六・一)には、
信教の自由の保障は、何人も自己の信仰と相容れない信仰をもつ者の信仰に基づく行為に対して、それが強制や不利益の付与を伴うことにより自己の信教の自由を妨害するものでない限り寛容であることを要請している。
とあって、最高裁は中谷康子という弱者に対し、自衛隊、隊友会という強者への寛容を要求するとともに、
県護国神社による孝文の合祀は、まさしく信教の自由により保障されているところとして同神社が自由になし得るところであり、それ自体は何人の法的利益をも侵害するものではない。
と、一人のクリスチャンの信仰よりも、護国神社の信教の自由を護る判決を下したというべきであった。
- 井出孫六「「靖国」を拒む妻」(井出孫六「ルポルタージュ 戦後史 下」(岩波書店)114~115p) -
これを地の文(bodyタグ内)の部分で使うと下記のようになる。brタグは使っていない。上下・左右にマージンが取られる。
信教の自由の保障は、何人も自己の信仰と相容れない信仰をもつ者の信仰に基づく行為に対して、それが強制や不利益の付与を伴うことにより自己の信教の自由を妨害するものでない限り寛容であることを要請している。
ここまで。このスタイルは通常の文では使うことはないだろう。引用ならばblockquoteタグでよいからである。
信教の自由の保障は、何人も自己の信仰と相容れない信仰をもつ者の信仰に基づく行為に対して、それが強制や不利益の付与を伴うことにより自己の信教の自由を妨害するものでない限り寛容であることを要請している。
- 2021/02/11 -


枠内の文字

スマホでは横幅を狭めるようなスタイルはなるべく避ける。以下の枠内のテキストはパソコン(IE)のデフォルトサイズでは1行であるが、スマホでは数行になる。

青系の色(mb)
こういうパターンも活用するべきかもしれない。文字は13pxだが目立った変化はない。前田敦子の離婚報道。見栄えだけで選ぶとロクなことはないという典型例だろう。しかし、これが多くのオトコとオンナの実態なのだが。

緑系の色(mg)
こういうパターンも活用するべきかもしれない。文字は13pxだが目立った変化はない。前田敦子の離婚報道。見栄えだけで選ぶとロクなことはないという典型例だろう。しかし、これが多くのオトコとオンナの実態なのだが。

ピンク系の色(mp)
こういうパターンも活用するべきかもしれない。文字は13pxだが目立った変化はない。前田敦子の離婚報道。見栄えだけで選ぶとロクなことはないという典型例だろう。しかし、これが多くのオトコとオンナの実態なのだが。


差異に注意

スマホによって見え方が違う場合があることに注意。
  1. ANK文字のフォント。
  2. tab_spの次の文字列が大きくなる。
スマホとパソコンの差異。
  1. opaスタイルはパソコン+マウスでは意味があるが、スマホではほとんど意味がない。

共用化のタグ/スタイル

試行錯誤の結果、ほぼタグとスタイルのパターンが決まってきた。

横長画像一個の場合
<div class="tbsoto">
</div>

横長画像複数個の場合(table転用)
<div class="tbsoto">
<table class="tbnaka">
<tr><td></td><td></td></tr>
</table>
</div>

本来のテーブル(レイアウトtableと区別するためasideで囲む)
<aside>
<div class="tbsoto">
<table class="tgr">
<tr><td></td></tr>
</table>
</div>
</aside>

ソースの場合
<div class="pg2 tbsoto"><span class="fbn">プログラミング</span>
</div>

ボックステキスト
<span class="fbs">NOTES</span><br>
<span class="fbn">例 NEWS BOX</span><br>
<span class="wks">セクション</span><br>

画像の横にコメントを書く場合は画像の上または下に置く。
セカンドタイトルやエンドマークは通常と同じ。


プログラム系の型

スマホでの横長データの表示の最終段階である。プログラムソースの表示をどうするか。パソコンの大きな画面では問題にならないことであるが、横幅の狭いスマホでは大問題、いや最大の問題になる。普通のテキストでは1行では画面幅に収まらない場合、自動的に改行されてしまう。しかし、それではソースとしては見透しが悪くなる。インデントやタブで体裁をそろえたことも無意味になる。

結局、表示パターンとしてはパソコンで見えるような状態を維持して、ソース枠内のデータ全体を横スクロール(左にスライド)して見ていくような方法をとるのがいいのではないか。下記はそのサンプルである。パソコンではソース枠は「角」だったが、共用版では「丸」にして違いを出している。なお、公開領域でソースを出すことはほとんどない。例外的場合にそなえての一応の「お膳立て」だけはしておこうというだけのものである。

プログラミング #include <stdio.h> void main( void ) { FILE *stream; char tempstring[] = "String to be written"; int i; /* Create temporary files. */ for( i = 1; i <= 3; i++ ) { if( (stream = tmpfile()) == NULL ) perror( "Could not open new temporary file\n" ); else printf( "Temporary file %d was created\n", i ); } /* Remove temporary files. */ printf( "%d temporary files deleted\n", _rmtmp() ); }

この方法でいけば横幅は気にせずに書いていける。

プログラミング #include "stdio.h" #include "stdlib.h" #include "string.h" int comp(const void *arg1, const void *arg2); int main(int argc, char **argv) { //argv[0]はソートしない。 argv++; argc--; //残りの引数をソートする。 qsort((void *)argv, (size_t)argc, sizeof(char*), comp); //関数名はその関数の存在するアドレスを示す。 //ソート後のリストを表示 for(int i=0 ; i<argc ; ++i) printf("%s ", argv[i]); return 0; } //比較関数 int comp(const void *ag1, const void *ag2) { int ret; ret=_stricmp(*(char**)ag1, *(char**)ag2); //文字を小文字として比較。 //負: ag1 < ag2 //0: ag1 = ag2 //正: ag1 > ag2 return ret; }

問題点
パソコンで見れば、インデントは4カラムのスペース(半角)だが、スマホでは2カラムに縮まる(半減する)のは致し方ない。右端で切れている場合は左にスライドすれば見える。
- 2020/12/12 -


枠の転用

hide, show関数とwig(画像用)とwin(文字用)のスタイルはスマホではパソコンで使っているような動作はしないが、これを転用して使うことはできる。まったく使えないものではない。
画像ウインドウ、文字ウインドウ、または他の部分をタップするとウインドウは消える。表示エリアが小さいスマホでは有効に使うことができる。

画像用
画像の横幅(width)は300px以下にする。
ローレンツ「攻撃」

文字用
スマホでは30emは多すぎる。文字数は24文字程度が限度である。20emが適当か。
NOTE
ナチスの手口をマネして憲法を破壊し、戦前回帰をめざす安倍軍事オタク独裁政権。それを受け継ぐ菅アベノコピー田吾作政権。
famaは「うわさ」という意味。

sdispの場合

上のような枠と同様の効果を出すものにsdisp関数がある。pcsm.jsに所収。

使用例
以前にC/C++でテキストファイルバイナリファイルかを判別するプログラムを作ったが、これはヒマにまかせて作ったそのExcel/VBA版へのいわゆる移植版である。または余興である。

ちなみに、このブロック版にあたるddispの動作もパソコンと同じである。pcsm.jsに所収。
- 2020/12/05 -


参考
以前のトピック