ガレコレ
Garage Collection
Garage Collection
［トップページ］
HTML5&CSS3&JavaScript パソコンiMacにおいて、Safari ブラウザの不具合にて、vw vmin 単位による『文字サイズ固定』ができませんでした。
そこで、Javascriptによるスクリーン倍率の計算で、拡大縮小して、文字サイズ固定を実現しました。
ガレコレのトップページにて、ご確認下さい。フルスクリーンに合わせておりますが、小さな画面の場合でも、違和感が無い大きさで固定できています。
-- トップページ上部 --
ガレコレ
Garage Collection
--
また、『フルスクリーン』に関しては、今後も『標準規格』が出される見込みがなく、各ブラウザが『独自規格』で対応しており、iMac では昔のようにはいきませんでした。フルスクリーンの検知は、諦めました。
-- 今の iMac Safari では利用不可 --
alert(document.webkitIsFullScreen);
alert(document.fullscreen);
document.body.requestFullscreen();
--
この対処の過程で、『スクリーン倍率の計算」の仕様を、ほぼ確立しました。手持ちのiPhone・iPad・iMacで、正常に稼働しています。Windows、Androidについては、追って検証していきます。
まず、デバイスが大きく分けて３種類（スマホ・タブレット・パソコン）になった今、昔と同じようには計算できません。余白が絡むパラメーターは、使えません。
-- 100％時のピクセル値 --
【iPhone】
aW: 320（固定値）※
aH: 693（固定値）
┏━━┓┐
┃ ┃│
┃ ┃│cH: 507 vMAX: 597
┃ ┃│
┠──┨┤
┗━━┛┘余白 余白
└──┘
cW: 320※
vMIN: 320※
∴100*aW/cW %
100*aW/vMIN %
○iPhone Chrome
┏━━━┯┓┐
┃ │┃│cH: 259
┠───┼┨┤ vMIN: 320※
┗━━━┷┛┘余白
└───┴┘
cW: 596 余白
vMAX: 597 余白
∴100*aW/vMIN %
×iPhone Chrome
【iPad】
aW: 1024（固定値）※
aH: 1366（固定値）※
┏━━━━━┓┐
┃ ┃│
┃ ┃│
┃ ┃│cH: 1253
┃ ┃│ vMAX: 1320
┃ ┃│
┃ ┃│
┠─────┨┤余白 余白
┗━━━━━┛┘
└─────┘
cW: 1024※
vMIN: 1024※
∴100*aW/cW %
100*aW/vMIN %
┏━━━━━━━┓┐
┃ ┃│
┃ ┃│cH: 911
┃ ┃│ vMIN: 977
┃ ┃│
┠───────┨┤余白 余白
┗━━━━━━━┛┘
└───────┘
cW: 1366※
vMAX: 1366※
∴100*aH/cW %
100*aH/vMAX %
【iMac】フルスクリーンの場合
aW: 1280（固定値）※
aH: 720（固定値）
┏━━━━━━━━┓┐
┃ ┃│
┃ ┃│cH: 640
┃ ┃│ vMIN: 640
┃ ┃│
┃ ┃│
┠────────┨┤余白 余白
┗━━━━━━━━┛┘
└────────┘
cW: 1280※
vMAX: 1280※
∴100*aW/cW %
100*aW/vMAX %
aW : screen.availWidth
aH : screen.availHeight
cW : screen.clientWidth
cH : screen.clientHeight
vMIN : Computed of 100vmin
vMAX : Computed of 100vmax
--
イベント発生の検知は、以前から問題を確認していましたが、未だに改善されていません。
-- 本来ならば、下記のように書く --
window.onresize = 関数名;
if('object' === typeof window.onorientationchange){
// スマホ・タブレット
window.onorientationchange = 関数名;
}
--
実に、window.onresize が曲者です。パソコンでは問題ないのですが、スマホ・タブレットでは、画面の回転時にも、resize イベントが発生しています。それだけではなく、サイズの計算が必要な vw vh vmin vmax を使用していなくても、スクロールするだけで、イベント発生しています。いわゆる『不要なコールバック』です。
さらに悪いことに、window.onorientationchange が、サイズ変更の確定より先にイベント発生しています。誰が考えても、Safariブラウザが悪すぎます。
！スマホ・タブレット用には、window.onresize を使用しない方が賢明です！
なお、サンプルページでは、良くないことを承知で、スマホ・タブレットにもresize イベントを検知して、データを更新させています。setTimeout()を使用して、多少回避するプログラムも試してみましたが、あまり効果が感じられませんでした。あしからず。
［スクリーン倍率の計算］
http://neconote.jp/index.php?page=345
プログラミングが気になる方は、ソースを表示してみて下さい。不用になったソースコードも、コメントアウトして残してあります。ご参考に。
そこで、Javascriptによるスクリーン倍率の計算で、拡大縮小して、文字サイズ固定を実現しました。
ガレコレのトップページにて、ご確認下さい。フルスクリーンに合わせておりますが、小さな画面の場合でも、違和感が無い大きさで固定できています。
-- トップページ上部 --
ガレコレ
Garage Collection
--
また、『フルスクリーン』に関しては、今後も『標準規格』が出される見込みがなく、各ブラウザが『独自規格』で対応しており、iMac では昔のようにはいきませんでした。フルスクリーンの検知は、諦めました。
-- 今の iMac Safari では利用不可 --
alert(document.webkitIsFullScreen);
alert(document.fullscreen);
document.body.requestFullscreen();
--
この対処の過程で、『スクリーン倍率の計算」の仕様を、ほぼ確立しました。手持ちのiPhone・iPad・iMacで、正常に稼働しています。Windows、Androidについては、追って検証していきます。
まず、デバイスが大きく分けて３種類（スマホ・タブレット・パソコン）になった今、昔と同じようには計算できません。余白が絡むパラメーターは、使えません。
-- 100％時のピクセル値 --
【iPhone】
aW: 320（固定値）※
aH: 693（固定値）
┏━━┓┐
┃ ┃│
┃ ┃│cH: 507 vMAX: 597
┃ ┃│
┠──┨┤
┗━━┛┘余白 余白
└──┘
cW: 320※
vMIN: 320※
∴100*aW/cW %
100*aW/vMIN %
○iPhone Chrome
┏━━━┯┓┐
┃ │┃│cH: 259
┠───┼┨┤ vMIN: 320※
┗━━━┷┛┘余白
└───┴┘
cW: 596 余白
vMAX: 597 余白
∴100*aW/vMIN %
×iPhone Chrome
【iPad】
aW: 1024（固定値）※
aH: 1366（固定値）※
┏━━━━━┓┐
┃ ┃│
┃ ┃│
┃ ┃│cH: 1253
┃ ┃│ vMAX: 1320
┃ ┃│
┃ ┃│
┠─────┨┤余白 余白
┗━━━━━┛┘
└─────┘
cW: 1024※
vMIN: 1024※
∴100*aW/cW %
100*aW/vMIN %
┏━━━━━━━┓┐
┃ ┃│
┃ ┃│cH: 911
┃ ┃│ vMIN: 977
┃ ┃│
┠───────┨┤余白 余白
┗━━━━━━━┛┘
└───────┘
cW: 1366※
vMAX: 1366※
∴100*aH/cW %
100*aH/vMAX %
【iMac】フルスクリーンの場合
aW: 1280（固定値）※
aH: 720（固定値）
┏━━━━━━━━┓┐
┃ ┃│
┃ ┃│cH: 640
┃ ┃│ vMIN: 640
┃ ┃│
┃ ┃│
┠────────┨┤余白 余白
┗━━━━━━━━┛┘
└────────┘
cW: 1280※
vMAX: 1280※
∴100*aW/cW %
100*aW/vMAX %
aW : screen.availWidth
aH : screen.availHeight
cW : screen.clientWidth
cH : screen.clientHeight
vMIN : Computed of 100vmin
vMAX : Computed of 100vmax
--
イベント発生の検知は、以前から問題を確認していましたが、未だに改善されていません。
-- 本来ならば、下記のように書く --
window.onresize = 関数名;
if('object' === typeof window.onorientationchange){
// スマホ・タブレット
window.onorientationchange = 関数名;
}
--
実に、window.onresize が曲者です。パソコンでは問題ないのですが、スマホ・タブレットでは、画面の回転時にも、resize イベントが発生しています。それだけではなく、サイズの計算が必要な vw vh vmin vmax を使用していなくても、スクロールするだけで、イベント発生しています。いわゆる『不要なコールバック』です。
さらに悪いことに、window.onorientationchange が、サイズ変更の確定より先にイベント発生しています。誰が考えても、Safariブラウザが悪すぎます。
！スマホ・タブレット用には、window.onresize を使用しない方が賢明です！
なお、サンプルページでは、良くないことを承知で、スマホ・タブレットにもresize イベントを検知して、データを更新させています。setTimeout()を使用して、多少回避するプログラムも試してみましたが、あまり効果が感じられませんでした。あしからず。
［スクリーン倍率の計算］
http://neconote.jp/index.php?page=345
プログラミングが気になる方は、ソースを表示してみて下さい。不用になったソースコードも、コメントアウトして残してあります。ご参考に。
iMac の Safariブラウザにおいて、CSS の viewport の長さの単位である vw vh vmin vmax に、致命的な欠陥があることを発見しました。１週間、悩んだあげく、断定しました。
近年のApple製品の出来の悪さにはうんざりしており、Appleに直接問い合わせても、改善してくれません。他のメーカーよりはマシと考えて、工夫したり、妥協したり、我慢したり、その機能を捨てたりしています。
iPhone および iPad の Safari、iMac の Google Chrome では、vw vh vmin vmax は、正常に機能しています。
ブラウザには、Webページの拡大縮小の機能があります。
--
【iMacパソコン】
ショートカットキー
［⌘］＋［＋］で拡大
［⌘］＋［ー］で縮小
［⌘］＋［０］で100%
【iPhone iPad の Safari】
アドレス入力欄内の左側の［三］アイコンをタップすると、［ぁ あ］が表示されて、これらをタップして、Webページの拡大縮小を行います。
--
さて、Webページを拡大縮小しても、大きさを変えたくない部分があります。px pt em といった単位では、大きさを固定できません。viewport の長さの単位であり、表示画面に対して率で設定する vw vh vmin vmax を利用すれば、簡単に可能です。
--
ビューポート幅 = 100vw
ビューポート高さ = 100vh
ビューポート短辺 = 100vmin
ビューポート長辺 = 100vmax
※ビューポートとは、表示領域（スクリーン画面）において率で表す仕組みです。
--
画像<img>・ブロック<div></div>では、どのデバイス、どのブラウザでも、問題なく、大きさを固定できました。
しかし、文字に関しては、iMac の Safari だけ、文字の大きさを固定できません。いろいろ試しましたが、致命的な欠陥と断定しました。
Apple社には、もう問い合わせはしません、時間の無駄です。早く、気づいて、修正してもらいたいものです。
P.S. 原因究明の過程で、スタイルに関して、初期設定値ではなく、倍率変更後の現在の値を調べてみました。当然、IE独自のdocument.getElementById("id_name").currentStyle は使えませんでした。window.getComputedStyle($target) が使えました。
-- Javascript --
<script>
$target = document.getElementById("id_name");
alert(window.getComputedStyle($target).fontSize);
</script>
--
文字サイズを vw vh vmin vmax で記述してあっても、Webページの倍率変更後の実際の文字サイズを計算して、px値でアラート表示してくれます。
正常なブラウザでは、Webページの拡大縮小に伴って、文字サイズのpx値が適正に変動しました。iMac の Safari だけが、px値に変動がありません。倍率100％以外は、機能していません。
つまり、これが固定できない原因であり、ブラウザのバグフィックスは非常に簡単なものです。
viewport が登場したての頃ならいざ知らず、とっくに普及期に入っている今、ありえない欠陥です。
P.S.2 iMac の Safari には、『レスポンシブ・デザイン・モード』という、スマホ画面のシミュレータ（仮想モード）があります。
設定しないと、ショートカットキーも使えません。
--
iMac の Safariアプリを起動
→［Safari］メニュー
>［設定］ ⌘,
→［詳細］タブ
＞✅ Webデベロッパ用の機能を表示
［開発］メニュー
＞［レスポンシブデザインモードにする］ ^⌘R
→800×600 (100%)で表示
⌘ コマンド
⇧ shift
^ control
⌥ option (alt)
--
この仮想モードでも、文字サイズは固定されませんでした。そもそも拡大縮小を意識した仕様ではなく、使い物になりません。
この程度の肝心なこともチェックしておらず、独学プログラマーから見ても、Appleのアプリ開発チームの力量を疑います。
P.S.2-2 iMac の Safari でも、［開発］メニューを設定すれば、ソースコードが読めます。
--
［開発］メニュー
＞［ページのソースを表示］ ⌥⌘U
--
近年のApple製品の出来の悪さにはうんざりしており、Appleに直接問い合わせても、改善してくれません。他のメーカーよりはマシと考えて、工夫したり、妥協したり、我慢したり、その機能を捨てたりしています。
iPhone および iPad の Safari、iMac の Google Chrome では、vw vh vmin vmax は、正常に機能しています。
ブラウザには、Webページの拡大縮小の機能があります。
--
【iMacパソコン】
ショートカットキー
［⌘］＋［＋］で拡大
［⌘］＋［ー］で縮小
［⌘］＋［０］で100%
【iPhone iPad の Safari】
アドレス入力欄内の左側の［三］アイコンをタップすると、［ぁ あ］が表示されて、これらをタップして、Webページの拡大縮小を行います。
--
さて、Webページを拡大縮小しても、大きさを変えたくない部分があります。px pt em といった単位では、大きさを固定できません。viewport の長さの単位であり、表示画面に対して率で設定する vw vh vmin vmax を利用すれば、簡単に可能です。
--
ビューポート幅 = 100vw
ビューポート高さ = 100vh
ビューポート短辺 = 100vmin
ビューポート長辺 = 100vmax
※ビューポートとは、表示領域（スクリーン画面）において率で表す仕組みです。
--
画像<img>・ブロック<div></div>では、どのデバイス、どのブラウザでも、問題なく、大きさを固定できました。
しかし、文字に関しては、iMac の Safari だけ、文字の大きさを固定できません。いろいろ試しましたが、致命的な欠陥と断定しました。
Apple社には、もう問い合わせはしません、時間の無駄です。早く、気づいて、修正してもらいたいものです。
P.S. 原因究明の過程で、スタイルに関して、初期設定値ではなく、倍率変更後の現在の値を調べてみました。当然、IE独自のdocument.getElementById("id_name").currentStyle は使えませんでした。window.getComputedStyle($target) が使えました。
-- Javascript --
<script>
$target = document.getElementById("id_name");
alert(window.getComputedStyle($target).fontSize);
</script>
--
文字サイズを vw vh vmin vmax で記述してあっても、Webページの倍率変更後の実際の文字サイズを計算して、px値でアラート表示してくれます。
正常なブラウザでは、Webページの拡大縮小に伴って、文字サイズのpx値が適正に変動しました。iMac の Safari だけが、px値に変動がありません。倍率100％以外は、機能していません。
つまり、これが固定できない原因であり、ブラウザのバグフィックスは非常に簡単なものです。
viewport が登場したての頃ならいざ知らず、とっくに普及期に入っている今、ありえない欠陥です。
P.S.2 iMac の Safari には、『レスポンシブ・デザイン・モード』という、スマホ画面のシミュレータ（仮想モード）があります。
設定しないと、ショートカットキーも使えません。
--
iMac の Safariアプリを起動
→［Safari］メニュー
>［設定］ ⌘,
→［詳細］タブ
＞✅ Webデベロッパ用の機能を表示
［開発］メニュー
＞［レスポンシブデザインモードにする］ ^⌘R
→800×600 (100%)で表示
⌘ コマンド
⇧ shift
^ control
⌥ option (alt)
--
この仮想モードでも、文字サイズは固定されませんでした。そもそも拡大縮小を意識した仕様ではなく、使い物になりません。
この程度の肝心なこともチェックしておらず、独学プログラマーから見ても、Appleのアプリ開発チームの力量を疑います。
P.S.2-2 iMac の Safari でも、［開発］メニューを設定すれば、ソースコードが読めます。
--
［開発］メニュー
＞［ページのソースを表示］ ⌥⌘U
--
P.S. iMac の Safariブラウザにおいて、viewport の長さの単位であるvw vh vmin vmax に致命的な欠陥があることを発見しました。１週間、悩んだあげく、確信しました。後日、詳細にブログします。なので、このブログは、ボツにして、後日、改めて書き直します。
スマホは、画面が小さいので、画面設計にはピクセル単位でシビアに作成を心掛けています。
一昔前は、長さの単位で px pt em を使ってきました。viewportが導入されて、vw vh vmin vmax が普及して、便利になった反面、正確さを追及するには、HTMLの親切な表現力が仇になり、工夫が必要です。
ブラウザで、ページの拡大縮小すると、margin padding も拡大縮小することになります。正確に作成したつもりでも、どうしてもずれてしまいます。
なので、色々とテストしました。今だに、<body></body>にmarginがありました。自分は、昔から念の為、下記の様にゼロ宣言してます。
-- CSS --
html{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
}
--
自分は、読みやすいWebページは『縦スクロール』で完結するというこ拘りを持っています。スマホならなおさらです。パソコンでも、表示幅648pxに留めています。行の認識良し、印刷良しという考えなので。ちゃんと、文章は左揃えで、ページはモニターの中央揃えしています。
┌───────┐
│ ┌───┐ │
│余│文章 │余│
│白│ │白│
│ └───┘ │
└───────┘
-- HTML --
<body>
<div style="margin:0px auto; width:100%; max-width:648px;">
文章が、幅648ピクセルで折り返され、かつ中央揃えで、読みやすい。
</div>
</body>
--
<body>は画面表示部分の大元(root:根っこの意)なので、『親』に設定しておけば、文字関連の設定値は入れ子構造である『子』に自動的に引き継がれます。あまり使いませんが、値をinheritに設定して、親から継承を明示することもできます。
なので、<body>のCSS(style)は、しっかりと設定しておきましょう。
なお、ブラウザの基準設定では、font-size:12pt;です。念の為、16pxで設定しています。
-- CSS --
body {
margin:0px;
padding:0px;
border-style:none;
font-family:sans-serif;
font-size:16px;
line-height:1em;
word-wrap:break-word;
background:#111111;
color:#ffffff;
}
--
ザックリですが、仮想の画面幅の画素数は、下記の通りで考えてきています。現時点では、タブレットの位置付けが、難しいですね。
--
スマホ縦：タブレット縦：パソコン横
= 400px:800px:1200px
= 1:2:3
自分の保有している機器 100％表示時
iPhon16：iPad：iMac
= (縦320,横597)：(縦1024,横1366)：1280
--
viewport単位では、下記の様な換算になります。
--
1vw
= 4px 8px 12px
4vw
= 16px 32px 48px
= 12pt 24pt 36pt
5vw
= 20px 40px 60px
5.33vw
= 21.33px 42.67px 64px
= 16pt 32pt 48pt
--
つまり、スマホ用に16ptのつもりで、font-size:5.33vw;を設定すると、パソコンでは48ptを意味してしまいます。逆にfont-size:16pt;で文字を作成すると、パソコンではいいのですが、スマホでは予想より小さくなります。
スマホは、画面が小さいので、画面設計にはピクセル単位でシビアに作成を心掛けています。
一昔前は、長さの単位で px pt em を使ってきました。viewportが導入されて、vw vh vmin vmax が普及して、便利になった反面、正確さを追及するには、HTMLの親切な表現力が仇になり、工夫が必要です。
ブラウザで、ページの拡大縮小すると、margin padding も拡大縮小することになります。正確に作成したつもりでも、どうしてもずれてしまいます。
なので、色々とテストしました。今だに、<body></body>にmarginがありました。自分は、昔から念の為、下記の様にゼロ宣言してます。
-- CSS --
html{
margin:0px;
padding:0px;
}
body{
margin:0px;
padding:0px;
}
--
自分は、読みやすいWebページは『縦スクロール』で完結するというこ拘りを持っています。スマホならなおさらです。パソコンでも、表示幅648pxに留めています。行の認識良し、印刷良しという考えなので。ちゃんと、文章は左揃えで、ページはモニターの中央揃えしています。
┌───────┐
│ ┌───┐ │
│余│文章 │余│
│白│ │白│
│ └───┘ │
└───────┘
-- HTML --
<body>
<div style="margin:0px auto; width:100%; max-width:648px;">
文章が、幅648ピクセルで折り返され、かつ中央揃えで、読みやすい。
</div>
</body>
--
<body>は画面表示部分の大元(root:根っこの意)なので、『親』に設定しておけば、文字関連の設定値は入れ子構造である『子』に自動的に引き継がれます。あまり使いませんが、値をinheritに設定して、親から継承を明示することもできます。
なので、<body>のCSS(style)は、しっかりと設定しておきましょう。
なお、ブラウザの基準設定では、font-size:12pt;です。念の為、16pxで設定しています。
-- CSS --
body {
margin:0px;
padding:0px;
border-style:none;
font-family:sans-serif;
font-size:16px;
line-height:1em;
word-wrap:break-word;
background:#111111;
color:#ffffff;
}
--
ザックリですが、仮想の画面幅の画素数は、下記の通りで考えてきています。現時点では、タブレットの位置付けが、難しいですね。
--
スマホ縦：タブレット縦：パソコン横
= 400px:800px:1200px
= 1:2:3
自分の保有している機器 100％表示時
iPhon16：iPad：iMac
= (縦320,横597)：(縦1024,横1366)：1280
--
viewport単位では、下記の様な換算になります。
--
1vw
= 4px 8px 12px
4vw
= 16px 32px 48px
= 12pt 24pt 36pt
5vw
= 20px 40px 60px
5.33vw
= 21.33px 42.67px 64px
= 16pt 32pt 48pt
--
つまり、スマホ用に16ptのつもりで、font-size:5.33vw;を設定すると、パソコンでは48ptを意味してしまいます。逆にfont-size:16pt;で文字を作成すると、パソコンではいいのですが、スマホでは予想より小さくなります。
スマホ・タブレット・パソコンのすべてに対して、Webページの『文字サイズ』を考慮しないと、見づらいものとなります。
最近のブラウザでは、ページおよび文字だけの拡大縮小ができるため、これらを踏まえた上で、画面設計しなければなりません。
ガレコレのトップページの看板は、『イラスト』や『動画』ではなく、あえて『文字』にしてCSSだけで修飾しています。JavaScriptを併用して、3つのバーナーのように完全無変化や、もっと派手な動作もできますが、シンプルな範囲で提示させてもらっています。
文字サイズは、font-size:*;で指定します。単位は、かなり多くあり、絶対単位と相対単位の2種類に分類できます。最小値・最大値も指定できます。
まずは、ガレコレのトップページの文字看板を見てみましょう。P.S.現在、下記の記述とは異なっています。プログラミングが落ち着いたら、ここにリンクをお知らせしますね。
--
<div style="
margin:0.4em 0em 0em;
font-family:monospace;
font-size:clamp(36pt,21vmin,72pt);
white-space:nowrap;"
translate="no">
ガレコレ
</div>
<div style="
margin:0.8em 0em;
font-size:clamp(16pt,8vmin,28pt);
text-shadow:2px 1px 3px;
white-space:nowrap;"
translate="no">
Garage Collection
</div>
--
【単位】
よく使う長さの単位として、px pt em remに加えて、スマホ用にvw vminを覚えておくと良いでしょう。
・絶対単位
px ピクセル
pt ポイント
pc パイカ（1文字)
1pc = 12pt = 16px
in インチ
1ヤード = 3フィート
1フィート = 12インチ
cm センチ
mm ミリ 1mm = 3.78px
q 級 1q = 0.25mm = 0.95px
1in = 2.54cm = 6pc = 72pt = 96px
・相対単位
rem root要素のフォントサイズ（大文字Mの高さ）
em 要素のフォントサイズ
※font-sizeを指定していない場合
1rem = 1em = 12pt = 16px
ex 要素の小文字xの高さ
ch 要素の0の幅
vw ビューポート（スクリーン）幅 = 100vw
vh ビューポート高さ = 100vh
vmin ビューポート短辺 = 100vmin
vmax ビューポート長辺 = 100vmax
【最小値・最大値】
min(X,Y) 小さい方を適用
max(X,Y) 大きい方を適用
clamp(最小値, 推奨値,最大値)
では、具体的に「ガレコレ」の文字の設定について見てみましょう。
--
font-size:clamp(36pt,21vmin,72pt);
--
スクリーン短辺が100vminなので、4文字でスクリーン短辺の84％で表示しようとします。スマホの場合、縦でも横でも、これで問題ありません。
パソコンやタブレットの場合、スクリーン幅が広いので、20vminでは文字サイズが異常になってしまいます。最小値36pt〜最大値72ptとして、適切な文字サイズになるように、制限をかけているのです。
また、英語の文字には『影』をつけています。
-- CSS —-
text-shadow:2px 1px 3px;
text-shadow:X Y R C;
X:水平方向の距離
Y:垂直方向の距離
R:ぼかし半径
C:影の色
--
2px
→→
↓1px
○ぼかし半径3px
※影の色は省略で、同色。
なお、最近のブラウザには、『ページ翻訳機能』があります。Safariで「ガレコレ」を翻訳すると「Galecore」になり、英語の部分は文末にピリオド「.」が付いてしまいます。なので、「翻訳しない」と宣言しています。
-- HTMLパラメータ —-
<div translate="no">*</div>
--
P.S. 最新のブラウザにおいて、ページの拡大縮小、および、文字の拡大縮小に、『子猫の手（NeCoNoteシステム）』を完全対応させますね。久しぶりに、プログラミングします。
最近のブラウザでは、ページおよび文字だけの拡大縮小ができるため、これらを踏まえた上で、画面設計しなければなりません。
ガレコレのトップページの看板は、『イラスト』や『動画』ではなく、あえて『文字』にしてCSSだけで修飾しています。JavaScriptを併用して、3つのバーナーのように完全無変化や、もっと派手な動作もできますが、シンプルな範囲で提示させてもらっています。
文字サイズは、font-size:*;で指定します。単位は、かなり多くあり、絶対単位と相対単位の2種類に分類できます。最小値・最大値も指定できます。
まずは、ガレコレのトップページの文字看板を見てみましょう。P.S.現在、下記の記述とは異なっています。プログラミングが落ち着いたら、ここにリンクをお知らせしますね。
--
<div style="
margin:0.4em 0em 0em;
font-family:monospace;
font-size:clamp(36pt,21vmin,72pt);
white-space:nowrap;"
translate="no">
ガレコレ
</div>
<div style="
margin:0.8em 0em;
font-size:clamp(16pt,8vmin,28pt);
text-shadow:2px 1px 3px;
white-space:nowrap;"
translate="no">
Garage Collection
</div>
--
【単位】
よく使う長さの単位として、px pt em remに加えて、スマホ用にvw vminを覚えておくと良いでしょう。
・絶対単位
px ピクセル
pt ポイント
pc パイカ（1文字)
1pc = 12pt = 16px
in インチ
1ヤード = 3フィート
1フィート = 12インチ
cm センチ
mm ミリ 1mm = 3.78px
q 級 1q = 0.25mm = 0.95px
1in = 2.54cm = 6pc = 72pt = 96px
・相対単位
rem root要素のフォントサイズ（大文字Mの高さ）
em 要素のフォントサイズ
※font-sizeを指定していない場合
1rem = 1em = 12pt = 16px
ex 要素の小文字xの高さ
ch 要素の0の幅
vw ビューポート（スクリーン）幅 = 100vw
vh ビューポート高さ = 100vh
vmin ビューポート短辺 = 100vmin
vmax ビューポート長辺 = 100vmax
【最小値・最大値】
min(X,Y) 小さい方を適用
max(X,Y) 大きい方を適用
clamp(最小値, 推奨値,最大値)
では、具体的に「ガレコレ」の文字の設定について見てみましょう。
--
font-size:clamp(36pt,21vmin,72pt);
--
スクリーン短辺が100vminなので、4文字でスクリーン短辺の84％で表示しようとします。スマホの場合、縦でも横でも、これで問題ありません。
パソコンやタブレットの場合、スクリーン幅が広いので、20vminでは文字サイズが異常になってしまいます。最小値36pt〜最大値72ptとして、適切な文字サイズになるように、制限をかけているのです。
また、英語の文字には『影』をつけています。
-- CSS —-
text-shadow:2px 1px 3px;
text-shadow:X Y R C;
X:水平方向の距離
Y:垂直方向の距離
R:ぼかし半径
C:影の色
--
2px
→→
↓1px
○ぼかし半径3px
※影の色は省略で、同色。
なお、最近のブラウザには、『ページ翻訳機能』があります。Safariで「ガレコレ」を翻訳すると「Galecore」になり、英語の部分は文末にピリオド「.」が付いてしまいます。なので、「翻訳しない」と宣言しています。
-- HTMLパラメータ —-
<div translate="no">*</div>
--
P.S. 最新のブラウザにおいて、ページの拡大縮小、および、文字の拡大縮小に、『子猫の手（NeCoNoteシステム）』を完全対応させますね。久しぶりに、プログラミングします。
お問い合わせby Network Communication Note