home

 Memo for HTML・サーバー・FTPなど
 11.
HPBでの
バージョンを
HTML4から
HTML5に
変更
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
から
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
に変更。(表示できなかった絵文字がHTML5で表示できる)
 12.
「表」の追加
 表の挿入希望場所（開始場所）に以下を記載する。
<div align="center">
<table border="0">
<tbody>
<tr>
<td align="center" width="950">

width="950"は600～950まで、適宜。
height="xxx"は通常は記載しない。
 13.
favicon
 /HEADの直前に以下を記載する。
画像*.icoは別途freeアプリで作る。*.pngは自作画像で可。
if IEはIEがサポート終了となった為に今後は不要。

<link rel="icon" href="favicon.ico">　（注意・下段QRコードの項参照）
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!--[if IE]>
<link rel="shortcut icon" href="favicon.ico">
<![endif]-->
</HEAD>

ファビコン生成
https://ao-system.net/favicongenerator/
favicon.ico　16x16　32x32　48x48推奨　
apple-touch-icon.png　180x180推奨
 14.
HomePage
FC2
*
Ninja
*
*
StarS.Free
(Netowl)
*
XREA
*
Xfree
(xdomain)
*
TV松本CATV
 *
*
http://web.fc2.com/
*
https://www.ninja.co.jp/hp/
（動画広告が表示。時々障害）
*
https://www.star.ne.jp/free/
（3ｹ月毎に要更新。常時動画広告）
****
https://www.value-domain.com/
*
https://www.xfree.ne.jp/
（3ｹ月毎に要更新。SIN。）
****
https://www.tvm.ne.jp/
 15.
FTP
 https://github.com/ffftp/ffftp 
ffftp-v5.1-x64
フリーソフト（無料）
接続→設定→設定をファイルに保存・復元
 16.
HPB
 JustSystem
https://www.justmyshop.com/
HPB20（ホームページビルダー20）
 
 17.
画像処理
 SourceNext
https://www.sourcenext.com/ 
フォト消しゴム5
ピタリ四角6
 18.
文字コード
 ①Google連絡先のExport（csv）形式は、
UTF-8
②Excelの読み込み初期設定は、
Shift-JIS
③メモ帳の保存出力形式は、
ANSIまたはUTF-8が選択可能

①を②でそのまま読み込むと文字化け→
対処方法は③で（csv）を読み込んで
「ANSI」で保存すれば、
②で読み込んでも文字化けしない。
 19.
リンクチェッカー
  http://www.dead-link-checker.com/ja/
デッドリンクチェッカー
（リンクできなくなっているリンクをチェック）
チェックするURLがhttpsでチェックできなかったら
httpに変えてチェックできる場合がある
 20.
HTML
タグリファレンス
  http://www.htmq.com/html/#b

できるだけ「WEBセーフカラー216色」の中で選ぶこと。
HTML5では、<FRAME>は廃止
 21.
カラー画像を
モノクロに
  https://www.peko-step.com/tool/grayscale.html
 22.
JPG画像を
PIXEL値で
サイズ変更
  https://www.iloveimg.com/ja/resize-image/resize-jpg
　（例）
名刺(印刷のWAVE)
600dpiでjpeg作成したもの→
定型91x55mm→pixel変換2150ｘ(縦横比維持値)(1299～1453～)
名刺の場合、
背景が白であれば「塗り足し」は考慮不要。
 23.
pixel-mm-dpi
計算
  https://shimeken.com/print/pixel-mm-dpi
 24.
QRコード 
画像入り		  https://qr.quel.jp/design.php 
QRコードの中央にアイコンや文字を入れることができる。
しかし理論的には同じサイズなら入れないより入れた方が誤り訂正率(読み取り率)が低下する。
印刷などで画像の縮小が予想される場合は入れない方が無難。

このサイトでQRコード(ファビコン入り)を作成する場合は
<link rel="icon" href="favicon.png">　ではなく
<link rel="icon" href="favicon.ico">　とすること。pngでは認識しない場合がある。
ファビコン作成サイトで*.icoを作成する必要あり。

URLを入力してもファビコン入りのQRが生成されない場合がある。
httpsの時はhttpに変えて入力すると生成される場合がある。
ただし読み込みURLはhttpとなるので要注意。
 25.
ビューポート
 ビューポート（Viewport）を設定することで、
ウェブページがスマートフォンやタブレットなどの
様々なデバイスで正しく表示されるようになる。
HTMLのheadタグ内に以下のmetaタグを追加(必ずhead内に！)
タグに直接cssを書くインライン方式の方がcssの優先順位が高くなる

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content属性の値を変更することで、ビューポートの設定を調整することができる
width=device-width：デバイスの幅に合わせてビューポートの幅を自動的に設定。
initial-scale=1.0：ページの初期表示時の拡大率を1倍に設定。
例えば、以下のように記述することで、ビューポートの幅を固定して、
初期表示時の拡大率を1.5倍に設定することができる。

<meta name="viewport" content="width=600, initial-scale=1.5">

その他の設定方法については、以下のように指定することができる。
height：ビューポートの高さを指定
minimum-scale：最小の拡大率を指定
maximum-scale：最大の拡大率を指定
user-scalable：ユーザーがページを拡大・縮小できるかどうかを指定
例えば、以下のように記述することで、
ビューポートの高さを固定し、
ユーザーが拡大・縮小できないように設定することができる。

<meta name="viewport" content="width=device-width, height=500, user-scalable=no">

スマホの表示幅をオーバーして表示される問題の解決
外部cssファイルの場合は<style>タグの内側のみ記述で、<style>タグは不要
ただし、ホームページビルダーでは<link rel>でリンクエラーが出る
<link rel="stylesheet" href="sample.css">

<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=yes">
<style>
@charset "UTF-8";
/* アルファベット文字の折り返しを可能にする追記CSS、*印はユニバーサルセレクタです */
* {
word-break: break-all;
}

/* スマホからPCまで全てのデバイス幅に効くCSS */
table {
max-width:800px;
width:100% !important;
margin:0 auto;
}
img {
max-width:100% !important;
height:auto !important;
}
@media screen and (max-width: 767px) {
table {
max-width:650px;
}
}
</style>
</head>


こちらを使うと、画面幅によって使うCSSを分けることができ、上記の場合だと、
PCやタブレットなどはmax-width:800px;にして、
768px以下のスマホの時はmax-width:650px;になる。
!importantは優先順位を指定。

(以下の例）
カタログの「画面解像度または最高解像度」。注意・pixcelの数値とは違う
実際は1pxの中に2倍または3倍の解像度で描画しますということ。
（　）内が実際のピクセル値

各機種の画面解像度
AQUOS wish　=　720x1,520　(?x? px)
XPERIA ace Ⅲ　=　720x1496　(?x? px)
moto e7 = 720x1600　(?x? px)
arrows M3 = 720x1280　(?x? px)
iPhone 11 = 828x1792　(?x? px)
iPhone 12pro = 1170x2532　(390x844px)　3倍スーパーサンプリング
iPhone SE = 750x1334　(375x667px)　2倍スーパーサンプリング

1ピクセルの中に2倍または3倍の解像度で描画する技術は
「スーパーサンプリング」と呼ばれます。
スーパーサンプリングは、元の画像やグラフィックをより
高い解像度で描画するために使用される方法です。
この技術では、ピクセルごとに複数のサブピクセルを考慮し、
それらの値を組み合わせることでより滑らかな画像を生成します。
スーパーサンプリングは、グラフィックスや画像処理の
分野で広く使用されています。


注意・・・widthはtdで指定する。以下、その例。
<div align="center">
<table border="2" bordercolor="#cc9900">
<tbody>
<tr>
<td align="center" width="800" height="1111"><br>（通常、heightは記載しない）

 26.
XMLサイトマップ

  １．HPBで
編集→ページのSEO設定
サイト→アクセス向上→XMLサイトマップの作成→sitemap.xmlが出来る→サイトにアップロード
サイト→アクセス向上→XMLサイトマップの登録→登録ページを開く→Googleにログイン→
Google Search Console
https://search.google.com/search-console/about?hl=ja
でプロパティを追加(新URLを追加)→
→google*****.htmlが出来る→ダウンロード→ｆｆｆｔｐでサイトにアップロード
→サイトマップを送信(http://*****/sitemap.xmlと入力)

 ２．Bing Webマスター
http://www.bing.com/toolbox/webmaster　または
https://www.bing.com/webmasters/about
BingSiteAuth.xmlが出来る→ダウンロード→ｆｆｆｔｐでサイトにアップロード
 27.
水平線に
色を付ける
  水平線を選択し、メニューバーから「編集」→「属性の変更」を選択
「属性」ダイアログボックスが表示されます。

［水平線］タブの［スタイル］ボタンをクリック
「スタイルの設定」ダイアログボックスが表示

［色と背景］タブをクリック
［背景色］で好みの色を選択
※後方互換モードでお使いの場合は、［前景色］で好みの色を選択

［OK］ボタンをクリックし、「スタイルの設定」ダイアログボックスを閉
「属性」ダイアログボックスに戻る

［OK］ボタンをクリックし、「属性」ダイアログボックスを閉じる
水平線に設定した色が反映
 28.
表の枠に
色を付ける
  表を選択

メニューバーから「編集」→「属性の変更」を選択
「属性」ダイアログまたは「レイアウト枠に含まれる表」ダイアログが表示される

[表] タブをクリックし、[背景] にある [色] で任意の色を選択
ここで設定した色が表の枠の色になる

[セル] タブをクリックし、[背景] にある [色] をページの背景色 と同じ色を設定して、
[OK] ボタンをクリック
ここでは、ページの背景と同じ白を設定

表の上で左クリックし、ドラッグを解除
 29.
css
サンプル
 １．viewport（スマホ画面）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=yes">
<style>
<!--

@charset "UTF-8";
/* 追記CSS・半角アルファベット文字の折り返し可能 */
*{
word-break: break-all;
}

/* スマホからPCまで全てのデバイス幅に効くCSS */
table{
max-width:800px;
width:100% !important;
margin:0 auto;
}
img{
max-width:100% !important;
height:auto !important;
}
@media screen and (max-width: 767px) {
table{
max-width:650px;
}
}
-->
</style>

２．ヘッダー・フッター
* {
margin:0; padding:0;
}
header {
width: 100%;
padding: 15px 0;
margin: 0 auto;
text-align: center;
background-color: #cab64a;
}
header .headline{
font-size: 32px;

}
.nav-list {
text-align: center;
padding: 10px 0;
margin: 0 auto;
}
.nav-list-item {
list-style: none;
display: inline-block;
margin: 0 20px;
}

footer {
width: 100%;
height: 120px;
text-align: center;
padding: 50px 0;
background-color: #cab64a;
}
.footer-text {
color: #fff;
}

３．スクロールバー
/* css */
.scroll-box {
overflow-y:scroll;/* autoでも良い */
height:200px; /* 任意の高さ */

/* 下記は無くても動くかもです */
.scroll-box a { /**/
display:block;
}

（HTML内の記述）
<td>
<ul class="scroll-box">
<li><a href="＃">リンク</a></li>
<li><a href="＃">リンク</a></li>
<li><a href="＃">リンク</a></li>
</ul>
</td>
 30.
リンク
（ジャンプ）		 　１．ラベルを付ける場合（例：アという文字に111というラベルを付けた場合）
<a href="#111a">ア</a>
URLは
https://www.sample-url/#111

　２．PDFの場合（例：5ページにジャンプ）はラベルを付ける作業が不要
<a href="sample.pdf#page=5">項目説明文</a>
URLは
https://www.sample-url/sample.pdf#page=5
 31.
画像の
「alt属性」と
「title属性」		  記述例
<img src="sample.jpg" alt="干支" title="うさぎ">
「alt属性」は検索エンジンやユーザーにわかりやすいように簡潔な内容で記述
「title属性」は画像の情報を補足するような文言
詳細は　https://seolaboratory.jp/32415/
 32.
同じ内容のページが
複数のURLで存在する場合
  <link rel="canonical" href="https://www.優先される正規URL">
正規URLと副URL両方のページに記載したほうがよい
 33.
検索エンジンから除外
  →→このページを検索対象にしない①
<meta name="robots" content="noindex,follow">
逆に検索する場合は初期値として（影響なし）
<meta name="robots" content="all">は"index,follow" と同じ
詳細は
https://digital-marketing.jp/seo/index-control-meta-robots/

→→全てのリンク先を検索対象にしない②
<meta name="robots" content="index,nofollow">
①＋②の場合
<meta name="robots" content="noindex,nofollow">

→→このページをキャッシュ対象にしない③
<meta name="robots" content="index,follow,noarchive">
①＋②＋③の場合
<meta name="robots" content="noindex,nofollow,noarchive">
 34.
ページのSEO設定
  ページタイトル　文字列
<title>ページタイトル</title>

キーワード　文字列
<meta name="Keywords" content="キーワード">

説明　文字列
<meta name="Description" content="説明">
 35.
サイトのリフレッシュ
  記載例（10秒後に指定サイトに移動）
<meta http-equiv="Refresh" content="10; url=http://rp1998jp.g1.xrea.com/">


home




<EOF>

 うさぎたちの庭