目次

手打ちhtml実験室

22.Googleの勝手に翻訳

「前」を英語から日本語にして「前田」になるのはどうしてでしょう。「日本語ページなんだから日本語に翻訳するな」というためにはlang="ja"指定するとよいようです。(2019-10-17)

21.javascriptでイメージマップ

javascriptでイメージマップの代わりをさせる。eventオブジェクトから得られるクリック位置を使えば画像が縮小表示されていてもOK。 (2017-11-06)

20.モバイルでイメージマップ

モバイルでイメージマップがどうなるかの検証ページ。画像が縮小表示されていても元のピクセル単位で処理される。(2017-11-06)

19.携帯・PC共用ページにするには

ひとつのページでPCにも携帯端末にも対応させる方法のまとめ。全体にviewport, preにoverflow: auto;, 画像にmax-width:100%; (2017-9-10)

18.モバイル環境の画素数

スケール画像で描画方針を探ります。 (2017-9-10)

17.大きな画像のまとめ

14,15,16の結果を評価します。max-widthの設定で満足の行く結果が得られます。(2017-9-10)

16.32pxから336pxの画像

縮小されない最大の大きさを調べます。 (2017-9-10)

15.max-width:100%の指定

画像にcssの指定を加えます。画像が縮小されます。 (2017-9-10)

14.大きな画像

2880x1620 そのまま貼っています。Viewportの設定はしていますが、画像に合わせてページは大きくなり、字は小さくなります (2017-9-10)

13.幅を取るpreのまとめ

overflow: auto;の追加でほぼ満足のいく結果になります。 (2017-8-28)

12.右縁のborder

pre部分だけスクロールするなら右縁のborderはあったほうがいいかも (2017-8-28)

11.幅を取るpreでoverflow指定

cssに pre { overflow: auto; } を追加したものです (2017-8-28)

10.幅を取るpreはどう見えるか

PCでの表示でスクロールして見える全体を一度に表示したようになっています。 (2017-8-28)

9.文字の大きさ指定の検証

p,preの文字サイズを一致させることは相対的な単位ではできませんでした。 (2017-8-27)

8.文字の大きさ指定

必要な時にユーザーが指定することができるかのテスト (2017-8-27)

7.preの文字の検証1

pタグの文字に対してpreタグの文字は3/4程度の大きさになります。 (2017-8-26)

6.preの文字が小さくなる

preタグの部分の文字が、十分入る幅でも小さな文字になってしまう。 (2017-8-26)

5.モバイルフレンドリーのまとめ

不本意ながらviewport指定はする。しかしこれだけでは解決しない。preとtableについての不具合を回避する方法を探っていく (2017-8-26)

4.div,footerなどを使う

div,footerタグを使い、cssで position: fixed を使う。viewport指定があれば モバイル フレンドリーと言われる。 (2017-8-25)

3.viewportを加えると

h1,h2,pだけでできたページに viewport指定を加えたもの (2017-8-25)

2.h1,h2,pだけでできたページ

viewport指定がないだけで、モバイル フレンドリーな「はず」のページをgoogleに判断させる (2017-8-25)

1.「ページがモバイル フレンドリーではありません」...どうして??

googleに、「ページがモバイル フレンドリーではありません。」と言われました。これは不当です。そして<meta name="viewport" content="width=device-width">を加えただけで、「このページはモバイル フレンドリーです」となりました。単純すぎます。そのうち改良されるでしょうから、こんなのは放っておいてもいいのですが、一番大切なところで間違っているので一言言っておきたいのです。

合わせて、Androidのブラウザで、tableやpreタグの内容が異常に小さくなるという現象を何とかしたいので、テストページを作ります。(2017-8-24)