ガレコレHPのトップページにおいて、看板とバーナーを修正しました。


■ガレコレHPの看板

　看板の文字の行間が間延びしていたので、line-height:1em;として行高を修正しました。文字サイズは、iPhone5cの幅320pxでも折り返しにならないまで、大きくしました。

< 4px .sign
< 36px mobileの場合（バーナー）
ガレコレ <48pt
Garage Collection <20pt
< 10px
< 4px .sign

--
<div class="sign" id="id_sign">

<div id="id_top_margin"></div>

<div style="line-height:1em; font-size:48pt;">ガレコレ</div>

<div style="margin-bottom:10px;line-height:1em; font-size:20pt; text-shadow:2px 1px 3px;">Garage Collection</div>

</div>
--


■ガレコレHPのバーナー

　iPhoneXにおいて、各部署のバーナーをページ最下部に置いた場合、一度のタップではリンクに飛ばず、ホームバーに重ならないように、画面角丸で削れないように配慮しなければなりませんでした。

　そこで、mobile(iPhone, iPad, Android)の場合、バーナーを、ページ最上部に置くことにしました。

　パソコンの場合、画面左右の余白がある場合はバーナーを右に表示して、狭い場合はバーナーを非表示にしました。バーナーは、100%倍率時に幅200pxに表示されるサイズに統一しています。解像度の幅1366pxのパソコンでは、全画面表示の場合、150%倍率までバーナーが表示されます。

mobile
[sanzui][neconote][jujo aikido]

PC・・・右寄せ
[sanzui]
[neconote]
[jujo aikido]

--
<div class="memo" id="line25">

<div style="position:fixed; background:#111111; text-align:center;" id="id_banner"></div>

<script>

var $ua = window.navigator.userAgent.toLowerCase();

_banner();

if($ua.indexOf('mobile') == -1){
window.onresize = _banner;
}

function _banner(){

var $ratio = window.devicePixelRatio;
var $width = (window.innerWidth - 600)/2;

if($ua.indexOf('mobile') != -1){
// mobile (iPhone, iPad, android)
document.getElementById("id_top_margin").style.height = "36px";
document.getElementById("id_banner").style.top = "0px";
document.getElementById("id_banner").style.left = "0px";
document.getElementById("id_banner").style.width = "100%";

document.getElementById("id_banner").innerHTML = '<a href="http://neconote.jp/index.php?page=5#line1"><img src="/image/gc/sanzui.png" style="width:30%; max-width:140px; margin:8px 1% 8px 3%;"></a><a href="http://neconote.jp/index.php?page=6#line1"><img src="/image/gc/neconote.png" style="width:30%; max-width:140px; margin:8px 1% 8px 1%;"></a><a href="http://neconote.jp/index.php?page=7#line1"><img src="/image/gc/jujo.png" style="width:30%; max-width:140px; margin:8px 3% 8px 1%;"></a>';

}else if($width > 150){
// PC（画面左右の余白が150pxより大きい場合）

$width = 200/$ratio;
document.getElementById("id_banner").style.top = "4px";
document.getElementById("id_banner").style.right = "8px";

document.getElementById("id_banner").innerHTML = '<a href="http://neconote.jp/index.php?page=5#line1"><img src="/image/gc/sanzui.png" style="width:'+$width+'px; margin:4px 0px;"></a><br><a href="http://neconote.jp/index.php?page=6#line1"><img src="/image/gc/neconote.png" style="width:'+$width+'px; margin:4px 0px;"></a><br><a href="http://neconote.jp/index.php?page=7#line1"><img src="/image/gc/jujo.png" style="width:'+$width+'px; margin:4px 0px"></a>';

}else{
// バーナー非表示
document.getElementById("id_banner").innerHTML = "";
}

}
</script>

</div>
--


P.S. 既存の子猫の手で、バーナーの固定表示を実現してみました。Version 2 Finalで、簡単に組み込めるようにします。

　子猫の手は、『ブログ』と『ホームページ』を作成するWebアプリです。ブラウザが利用できる環境であれば、デバイスを問わず、どこでもご利用いただけます。FacebookなどのSNS [Social Networking Service]が煩わしい方々にお勧めしています。



■ブログ

・１ブログ単位に、角丸の外枠で区切って表示します。
.box {
  padding      :2px;
  border-radius:8px;
  border-top   :solid 1px 指定カラー明;
  border-left  :solid 1px 指定カラー明;
  border-right :solid 2px 指定カラー暗;
  border-bottom:solid 2px 指定カラー暗;
  background   :指定カラー箱;
}
・日付で、ニュース、本日関連のブログ、過去のブログの３つに区別します。
・トップページに、ニュース、本日関連のブログを表示します。本日関連のブログが無い場合は、過去のブログを１～５件表示します。
・［すべて］または各［分類］で、表示できます。
・［５件区切り］［タイトル全件］［カレンダー］で、表示できます。


【日付】

・太字、指定カラー濃
・単日、開始日～終了日、終了日未定
・入力方法：ボタン、直接、カレンダー（祝日明記）
・ボタン入力では、月(1～末日)、上旬(1～10)、中旬(11～20)、下旬(21～末日)の指定可能


【タイトル】

・太字
・タイトル未入力の場合は、自動的に無題


【分類】

・指定カラー淡、#分類名で表示
・既存分類の選択
・新規分類の入力
・分類未指定の場合は、自動的にその他
・分類の名称、表示順の変更可


【本文】

・アドレスの自動リンク（一行に、http://またはhttps://からアドレスのみを記述。常に、新しいウインドウで開く。）


【画像】

・JPEG、PNG、GIF
・16,613,376画素以下
・スライド利用 ON/OFF
・回転補正あり
・サムネールの自動作成
img {
  border-style:none;
  vertical-align:middle;
}



■ホームページ

・コンテンツは８種類で、コンテンツを積み重ねて、ページを作成します。
・コンテンツの上下に余白4pxを設けて、見やすくしています。（つまり、コンテンツ間は8pxとなります。）
padding:4px 0px;・・・marginではありません。

・各コンテンツに、IDが振られており、ページ内リンクを#line*で利用できます。ページタイトル行は#line0で、これを指定すると［トップページ］［フォルダ（一階層）］のリンクが表示エリアの上部に隠れます。

-- 第一階層のページ --
<div>サイトタイトル</div>
<div>［トップページ］［フォルダ１］［フォルダ２］［フォルダ３］</div>
<div id="line0">ページタイトル</div>
<hr>
<div id="line1">コンテンツ１</div>
<div id="line2">コンテンツ２</div>
<div id="line3">コンテンツ３</div>
<div id="line3">コンテンツ４</div>
<div id="line3">コンテンツ５</div>
<hr><hr>
<div>by Network Communication Note</div>
<br><br><br>
--


【見出し】

・18pt、指定カラー濃
.headline {
  padding:4px 0px;
  font-size:18pt;
  color:指定カラー１;
}


【メモ】

・12pt、黒色または白色
・アドレスの自動リンク（一行に、http://またはhttps://からアドレスのみを記述。常に、新しいウインドウで開く。）


【水平線】

・<hr>のみ（簡易に作成するため）


【画像ファイル】

・JPEG、PNG、GIF
・16,613,376画素以下
・スライド利用 ON/OFF
・回転補正あり
・サムネールの自動作成
・タイトル：指定カラー２（淡）
・表示幅の狭いスマホなどの場合、画像のサムネールの長辺は、スマホの最大表示幅になります。


【PDFファイル】

・画像ファイル以外は、PDFファイルのみとしています。


【リンク】

・タイトル、アドレス（タイトルが空白の場合は、アドレス表示）
・新しいウインドウで開く ON/OFF


【フォルダ】

・階層構造


【HTMLタグ】

・JavaScript可
・PHP不可

　スマホのように幅の狭い画面を有効利用するために、左右の余白を0pxに設定しています。等幅フォント、12pt、単語改行（単語の区切りで改行するが、場合によっては単語の途中でも改行する）および背景色と文字色を設定しています。

　画面中央揃えで、表示幅100%で表示しようとしますが、それではパソコンで観たときに間延びしますので、最大表示幅を600pxとしています。

-- CSSファイル --
body {
  margin-left :0px;
  margin-right:0px;
  font-family :monospace;
  font-size   :12pt;
  word-wrap   :break-word;
  background  :背景色;
  color       :文字色;
}

#id_center {
  width:100%;
  max-width:600px;
  margin:auto;
}
--

　子猫の手 Ver.2 Final の画面設計を進めています。以後、『子猫の手』の設計を説明していきますね。

　HTML5にて、言語は日本語、文字コードはUTF-8で記述しています。スマホやタブレットなどのでは、デバイス幅に合った解像度で、初期倍率1で表示します。

　安全重視で、電話番号には、自動リンクさせません。トップページには、キーワードとサイトの説明文が付加されます。

--
<!DOCTYPE html>
<html lang="ja">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="キーワード1,キーワード2">
<meta name="description" content="サイトの説明文">

</head>

<body></body>

</html>
--

　現時点で、下記のようにテストしてみましたが、矢印と罫線が半角扱いになる弊害の方が大きく、元のmonospaceだけに戻しました。

　等幅半角スペースは、諦めます。数字と同じ幅である=#+で、半角スペースを代用してみてはどうでしょうか。

　ちなみに、iPhoneにおいて、現環境では、全角スペース＝半角スペースx3です。

　　　　　:全角スペースx5
               :半角スペースx15



--------
※元に戻しましたので、下記において、フォント幅と説明が一致しておりません。あしからず。


　そのうち、iPhoneでも、等幅日本語フォントが標準フォントで出るだろうと思っていましたが、出ませんねえ。

　等幅でないと、文字だけで作成する表・絵・地図が、ずれてしまいます。

　せめて、半角文字だけでも等幅にしようと、CSSで苦肉の策を講じました。

--
body {
 font-family:monospace;
}

  ↓

body {
 font-family:"Courier New",Consolas,monospace;
}
--

--
01:
 1:半角スペース
001:
  1:半角スペースx2
　1:全角スペース
--

　iPhoneでは、半角スペースx2＞全角スペースから分かるように、半角x2≠全角です。

--
○●▲□■×’”↑→↓←…πφ:半角扱い
               :半角スペースx15
△◇◆☆★:Menloでは半角扱い
☀☁☂☃☎:Menloでは半角扱い
＃＄％＆￥:
（｛【「『:
＋－＊／＝:
＜＞＾！？:
・‥※＠℃:
．，：；｜:
あいうえお:
がぎぐげご:
ぱぴぷぺぽ:
ぁぃぅぇぉ:
っゃゅょー:
アイウエオ:
ゐヰゑヱヴ:
安以宇衣於:
～、。゛゜:
ＡＢＣＤＥ:
ａｂｃｄｅ:
１２３４５:
６７８９０:
　　　　　:全角スペースx5
          :半角スペースx10
--

　全角では、ひらがな、カタカナ、漢字、英数字が、等幅です。全角記号は、まちまちです。しかし、新しいフォントでは、半角文字にない全角記号は、半角扱いになっているようです。特に、○×と矢印が半角扱いなのは、残念です。

--
┌─┐
│ │:半角スペースx1
└─┘
┌─┐
│  │:半角スペースx2
└─┘
┌─┐
│　│:全角スペースx1
└─┘
┌┬┐
├┼┤
└┴┘
--

　罫線は、従来は全角なのですが、半角扱いなので、使わない方が無難です。

　つまり、今回の等幅化では、半角、全角、従来は全角だけと半角扱いの３種類の文字があります。

　これらの点を考慮して、文字だけで作成する表・絵・地図を作成してみて下さい。


P.S. 等幅日本語フォントを新規に作成すれば済むことなのに、Appleが何故やらないのか不思議でなりません。


P.S.2 font-mamilyで、Menloをトップに持って来ると、"Courier New"で全角扱いだった文字が半角扱いになってしまいます。このため、Menloを採用しませんでした。


P.S.3 ～を表示するのに、karaと入力して変換していませんか？

　~チルダを表示するように、日本語入力モードでは[Shift↑]＋[^]で～が一発で入力できますよ。