ホームページ作成 関連メニュー

  1. ホームページ作成に使用している各アプリの特徴
  2. ホームページビルダー22 関連 (21と22共通)
  3. 「趣味のページ」への 訪問解析の結果
    訪問者の 解像度・OS・ブラウザ の一覧と種類別比率
  4. スマホ用の 簡単なレスポンシブ対応
  5. 円マークが バックスラッシュで表示されないように対策
    とならないように対策しました
  6. 表(table)の 列の文字がはみ出さないように改行する方法
    cssで、word-wrap: break-word; 等を設定
    (bodyに設定すると、ページ全体に反映できます)
  7. サイドメニューをスクロール途中で固定
    (cssのみで、FlexBox と position sticky を使用)
  8. 全てのブラウザに対応するようにベンダープレフィックスは必要か
    Flexbox で position: sticky; を使用した時の例
  9. 番号付きリスト <ol>~</ol> の 開始番号や文字種変更
  10. 基本的なCSSセレクタの書き方
    • セレクタを「.」や「,」や「スペース」で区切り設定
    • 奇数/偶数要素に適用、リンクや画像で使うセレクタ など
  11. .htaccess ファイル の 設定例
    • 訪問ユーザーを別のサーバーに自動的に転送
      (サーバーの引っ越し等の時に利用)
    • Web の キャッシュ期間の設定 等
  12. ルート相対パスの メリット と デメリット
  13. Wordpressへの移行を検討したが中止
  14. 「戻る」「進む」「更新」ボタンの設置方法
     (使用例・・・
  15. 更新したページをWEBブラウザに読み込ませる方法
    キャッシュを使用せずにWEBに読み込ませる方法
  16. 使用する表示フォントを再検討してみた
  17. Android の Chrome で文字の一部が拡大表示されるバグ対策を実施
  18. ホームページを Shift-JIS から UTF-8 に書き換え
  19. 画像をクリックすると、その場で拡大表示する方法
    (JavaScript & CSS)
  20. 画面上に自分用のアイコンを表示させる faviconの設定方法
  21. スマートフォンで文字の大きさが変わる不具合を修正
  22. 作成したウェブページを表示するまでの時間改善

ホームページ作成に使用しているアプリの特徴
  1. ホームページビルダー22(有料) メーカーのホームページ
    • ホームページビルダー・クラシック を メインで使用中
    • 不満点は、ページ数が多くなると起動やサイト転送チェック、保存 等の作業にかなり時間がかかる参考
      (100ページ程度なら数秒で起動します)
    • 不満があるのに使用しているのは、使い慣れているので、説明書を見る必要が無い
    • ページ編集・HTMLソース編集・ページ/ソース2画面同時表示・プレビュー画面 の4種類を持ち、ワンタッチで切替可能なので思い通りの編集ができる
    • ページ編集は見た目に近い表示の状態で直接編集できるので便利
    • 但し、ページ編集では、cssで設定した Flexbox に対応していないので、実際に表示を確認する時は、プレビュー画面で確認する必要がある
    • 機能不足として、ソース編集時のコードヒントの表示が無い
  2. Brackets(無料)入手先
    • 5秒程度で起動するので、HTMLのちょっと編集に便利です
    • ソース編集のみで、ページ編集機能は有りません
    • リアルタイムビュー操作で、Windows既定設定のwebブラウザーが立ち上がります
    • HTML及びCSSのソース編集の入力内容を即座にリアルタイムに表示したい時は、google chrome をWindows既定設定のwebブラウザーに設定しておく必要かあります
    • 現状では Google Chrome のみ、HTML及びCSSのソース編集の入力がリアルタイムにプレビュー表示されます。当然cssの設定も反映されています
      (ライブプレビュー)
    • ライブプレビューで起動するGoogle Chromeの設定は、通常使用するGoogle Chromeの設定とは別で、例えば「設定」の「デザイン」を「ページのズーム」50%にすると、邪魔にならない小さな画面でプレビューできます。
      HTMLの編集の入力がリアルタイムに反映されるので便利です
    • コードヒントの表示のお陰で、ソースコードの入力が楽です
    • 「拡張機能マネージャー」で色々な機能を追加できます
      お気に入り「Beautify」・・ワンクリックでコードを成型できます
  3. Dreamweaver(有料)
    • 会社関連で使用しているので練習中
    • アプリの起動が早く、ページ数が多くても10~15秒で使用できる状態になる
    • コード編集・デザイン編集・ライブ編集・2画面同時があり思い通りの編集がやりやすい
    • デザイン編集では、cssで設定した Flexbox に対応していないので、実際に表示を確認する時は、ライブ編集かプレビューを使います
    • ライブ編集では、cssで設定した Flexbox にも対応しているので、実際の表示画面上での編集となるが、編集に少し癖がある(慣れていない為)
    • デザイン編集はホームページビルダーのページ編集と似た操作だが次のような欠点がある
      • 画面の文字が極端に大きく、デザインビューオプションでテキストサイズを小さくしても全体的に小さくならず、実際より大きい文字や小さい文字でばらつく為使いづらい
      • HTML5 で不要になったリストの終了タグ(例 </li>)が挿入されてしまう
    • この2つの欠点の為、現状はホームページビルダーを使い続ける予定
  4. Microsoft Expression Web 4(無料)
    • 5秒程度で起動するので、HTMLの修正やちょっと編集に便利です
    • ホームページビルダーと同様、HTMLソース編集・ページ編集・両方同時の作業がワンタッチで切替でき、編集も簡単に出来るので便利
    • コードヒントの表示のお陰で、ソースコードの入力が楽
    • ページ編集では、cssで設定した Flexbox に対応していないので、実際に表示を確認する時は、プレビューを使います
    • ページ編集では、実際のプレビュー画面と比べ文字の表示サイズが小さかったり大きかったりするので、参考程度
    • Web検索すると、詳しい使用方法がたくさん見つかる
    • 修正後保存してから専用アイコンをクリックすると、Google ChromeやInternet Explorerで表示確認できます
    • 欠点は、ページ編集の画面がブラウザで実際に表示されたものとだいぶ異なるので参考程度にしか使えない
    • 2012年に開発を終了し無償化されているので、今後の更新は望めない
    • 入手先は、Microsoft Download Center で 画面少し下の
      「+Details」をクリックし、「Japanese」をタップすれば日本語版をダウンロードできます
  5. Visual Studio Code(無料)
    • 5秒程度で起動するので、HTMLをちょっと修正する時に使用しています
    • テキストエディタ的に使用できます
    • コードヒントの表示のお陰で、ソースコードの入力が楽
    • Web検索すると、詳しい使用方法がたくさん見つかります
    • プラグイン(Live HTML Previewer)でプレビューの機能を持たせることが出来るが、私の環境ではうまく動作しません。
    • プラグイン(Live HTML Previewer)をインストールしておけば、修正後保存してから編集画面上を右クリックしさらに Open in Browserをクリックすると、Windowsで既定に設定されているブラウザで表示確認できます
    • 入手先は、Microsoft Azure で Visual Studio Code をダウンロードできます
    • インストール時は英語ですがプラグイン(Japanese Language Pack)で日本語にできます
  6. サーバーへのファイル転送アプリFileZilla」(無料)
    • 世界的に使われており、機能が充実したアプリ
    • 日本語表示が出来るので使いやすい

HTMLファイルは「UTF-8」で作成

Windows、iOS、Android で問題なく動作出来るように、HTMLファイルはUTF-8で作成するように設定しておきます。

  1. 「ツール」>「オプション」>「ファイル」タブを開きます
  2. 「出力漢字コード」を Unicode (UTF-8) に設定
    「文字エンコードを・・・」を UTF-8 に設定


理由は、「Shift-JIS」の場合リンク先のラベルを日本語にした時うまくジャンプしない等の不具合が発生しますが、「UTF-8」の場合は問題ありません。

同一サイト内のファイルを別フォルダに移動する方法

サイト内で使用しているファイルを、同一サイト内の別フォルダに簡単に移動出来ます。

リンク関連もすべて自動的に修正してくれるので非常に楽です。

下記を実行する前に編集したページは全て保存しておくこと。

方法は2通りあります

方法Aは、

  1. クラシックモードで利用します
  2. 上部メニューの「サイト」の「ビジュアルサイトビューを開く」を選択します
  3. 「ビジュアルサイト」画面で、[フォルダ]タブをクリックします
  4. 移動したいファイルがあるフォルダをクリックします
  5. 移動したいファイルを左クリックしたまま、移動先のフォルダ上に持っていきドロップします
  6. 「リンクの自動更新」の画面が開かれ、移動されたファイルと、移動されたファイルへのリンクを含むファイルの一覧が表示され、「OK」をクリックするとリンクが自動的に修正されます
  7. 「Shft」キーや「Ctrl」キーを使って複数のファイルを選択し、まとめて移動もできます

方法Bは、

  1. クラシックモードで利用します
  2. 上部メニューの「表示」の「サイトビュー」を有効にします
    又は「表示」>「ウィンドウ/ビュー」>「サイトビュー」
  3. 画面右端の「サイト」をクリック
  4. 右の小窓の上の「フォルダ」をクリック
  5. 移動したいファイルがある「フォルダ」をクリックします
  6. 下の窓の移動したいファイルを左クリックしたまま、上の窓の移動先のフォルダ上に持っていきドロップします
  7. 「リンクの自動更新」の画面が開かれ、移動されたファイルと、移動されたファイルへのリンクを含むファイルの一覧が表示され、「OK」をクリックするとリンクが自動的に修正されます
  8. 「Shft」キーや「Ctrl」キーを使って複数のファイルを選択し、まとめて移動もできます

ホームページビルダーに付属の
ウェブアートデザイナー使用上のワンポイント

今までは PaintShop Pro を使用していましたが、現在は、このアプリに移行しました。

非常に機能が多く便利ですが、使用頻度が少ないのでメモしています。

  1. 正方形 や 丸 を描くときは
    • 四角形や楕円形で、シフトキーを押したままにすると 正方形 や 丸 を描く
  2. 枠線 を描く時の種類
    • 枠線のみで内側は透明
    • 枠線と内側が違う色で塗りつぶされる
    • 枠線と内側が同じ色で塗りつぶされる
  3. 選択範囲の使用
    • 四角形や楕円形で、シフトキーを押したままにすると 正方形 や 丸 を選択
    • 操作ツールバーの下で
       〇バックのキャンパスも含むか含まないか指定する
       〇ぼかしの程度を指定する
    • [切り抜き]をクリックすると、コピー&貼り付けが実行される
    • コピーだけ実施したい時は、編集のコピーをクリックする
  4. 画像の周囲をぼかす方法(コピー&貼り付けを利用する)
    • 選択コピーし貼り付けた時、周囲の内側をぼかす方法です
    • まず操作ツールバー上部の選択形状を選択します
    • 操作ツールバーの下の方に表示される●をクリックしてボカス量を設定
    • マウスで選択範囲を指定してコピーし、貼り付けすると縁がぼけています
    • 透明のぼかしを行った場合は、保存の時に拡張子を .png にして保存します
  5. 画像の周囲をぼかす方法(消しゴムを利用する方法)
    • 消しゴムを選択し、操作ツールバーの下の方に表示される●を指定して、ぼかしの量を選択
    • 画像上をクリックして移動させるとその部分がぼかしの量に応じて透明になる
    • 透明のぼかしを行った場合は、保存の時に拡張子を .png にして保存します
  6. 矢印を引く
    • 線を引く鉛筆を使い、色・線種・太さ・形状を選択すればよい
    • 矢印(線)を引いた後で、線上を右クリックして「オブジェクトの編集」で好きなように編集できる
  7. 文字の入力
    • 取り合えず適当に入力し、文字を右クリックして「オブジェクトの編集」で好きなように編集できる
    • 大きさ・色・影・縁取り・効果・その他一般的な太字や斜体等様々

「趣味のページ」へのアクセス解析

2019年に「趣味のページ」へアクセスしていただいた解析結果をリストにしてみました。

スマホとパソコン(タブレット)の比率は、ほぼ半々になっています。


解像度
スマホ 48%
360×640 13.63%
375×667 11.8%
375×812 4.23%
414×736 2.46%
320×568 1.98%
360×720 1.74%

パソコン&タブレット 52%
1920×1080 11.48
1600×900 7.32%
1366×768 6.95%
768×1024 4.17%
1536×864 2.92%
1280×720 2.1%
1280×800 1.8%
1920×1200 1.4%


オペレーティング システム
Windows 46.24%
Android 22.52%
iPhone 20.74%
iPad 7.03%
MacOS 2.44%
Linux 0.59%


ブラウザー
Chrome for Android 25.53%
OS Mobile Safari 23.4%
Chrome 17.46%
Internet Explorer 15.18%
Edge 9.81%
Firefox 3.64%

スマホの時、tableの 複数列を1列にする方法

css ファイルの設定を利用します。

thとtdに対してdisplay : blockを指定することで、ブロックレベル要素にします。

横並びのセルを、左から順に縦1列に並べ直してくれます。

並び変える順番のイメージは下記のようになります。

見出しセル・データセルの横幅をそれぞれ100%にすることで、スマホでのレイアウトを縦1列の1カラムにしてしまう方法です。

横幅が100%になったことで2列や3列表示が、縦並びの1カラムになり、スクロールしながらスムーズに見ることができます。

まずスマホを判断する基準として、横幅が700px以下の時スマホだとして条件を設定する時は

css ファイル内で

@media screen and (max-width:700px)

のような条件判断を用いて


例えば、ページ内の table 全てに対し設定したい時は

@media screen and (max-width:700px) {
  th , td {
    display: block;
    width: 100%;
  }
}


例えば、 <div class="sumaho">・・・</div>の範囲内の table に対し設定したい時は

@media screen and (max-width:700px) {
  .sumaho th , .sumaho td {
    display: block;
    width: 100%;
  }
}

応用して色々な使い方が出来ると思います。

ホームページビルダーの
リンクエラーのチェック と 修正方法

ホームページビルダーをクラシックモードで使用する時、ビジュアルサイトビューを表示させていますが、あちこちにマークが付いていて気になるので修正しました。

マークはリンク切れが発生していることを意味しているので、ほっておくことは手抜きになり問題ですが、長い間気が付かずにほっていました

ファイル名を変更したり、リンクのラベル名を変更した時に気が付かずにリンク切れのままになったりします。

リンクエラーのチェックと修正方法の詳しい説明がメーカー「JUST SYSTEM」のサポートFAQに詳しく載っていましたのでリンクを張っておきます。

  メーカーの「リンク エラーを修正する」へジャンプ

上記説明を参考に、簡単にリンクエラーのチェックを行っています

  1. ホームページビルダーを使用しています
    • 「クラシック」スタイル
    • 編集スタイルは「スタンダード」
    • 表示モード「編集優先」
  2. 起動する時、ビジュアルサイトビューを表示させるようにしています
  3. マークが付いているページがある時は、ダブルクリックしてページを開きます
  4. 画面上部の「ツール」の「URL エディター」をクリックして起動させます
  5. 「URL エディター」の上部左端の「タグ名」に赤い「!」マークが付いているのは、リンク切れのサインです
  6. 赤い「!」マークをダブルクリックすると、その行にジャンプして表示してくれるので原因を調べ修正します。

番号付きリスト <ol>~</ol> の開始番号や文字変更

メニューなどの行頭につける番号などをアレンジする一例

ルート相対パス の メリット と デメリット

WEBサイト制作において、ルート相対パスは大変便利です。

絶対パス、相対パス、ルート相対パス を比較してみました。

円マークが バックスラッシュで表示されないように対策

Windows で作成したホームページを iOS(iPhoneやiPad) で表示すると、

のように表示されてしまい、自分の思った通りの表現になりませんでした。

使用している日本語と英語のフォントの違いからくるようです。

CSSで設定フォントを変更したり順番を変えたりしてみましたがダメでした。


手っ取り早く確実に変更する方法が見つかりました。

今回は「文字実体参照」を使用しました。

  • 「文字実体参照」とは、キーワードで指定する形式です。
    & に続いてキーワードを指定して、最後に ; を入れます。
    &キーワード;

HTMLソースで¥の代わりに「文字実体参照」の &yen; を使うと円マーク¥を表示できます 。

これで、Windows、Android、iPhone、iPad で確認しましたが、すべて¥で表示されました。


色々なページで使用しているので、手動で一つ一つ変更するのは無理。

今回は、選択した複数のファイル内から指定した文字列を検索し、他の文字列に一瞬で置換してくれるフリーソフト「Devas」を使用しました。

500以上あるHTMLファイルの中から \ を探し &yen; に置換するのに数秒で終わります。今回は「普通の検索」で問題なく置換できました。

すべてのブラウザに対応するようにベンダープレフィックスは必要か

ベンダープレフィックスといえば、-webkit-、-moz-、-ms-、-o- などを思いつきますが、最近はベンダープレフィックスなしでもかなり大丈夫のようです。

ネットの記事を検索すると、ブラウザの最近の新しいバージョンではアップデートで対応もすすんでいるようです。


しかし2019年1月現在、IE10でやっと Flexbox へ対応されましたが、Gridにはまだ対応できていません。

私の場合、右サイドメニューを上下スライド途中で固定させるように
position: sticky; を使用しました。


色々なブラウザで動作させるため、Flexbox の設定にベンダープレフィックスの設定も加えています。

これを加えていない場合、position: sticky; が上手く動作しませんでした。
(2019年1月現在)

css の記述

.container {
  width: 1000px;
  display: -ms-flexbox; /* IE10以下 対応 */
  display: -webkit-box; /* Safari3.1~6.0 対応 */
  display: -webkit-flex; /* Safari6.1 以降 対応 */
  display: flex;
  }


position: sticky;を使用するための設定に、Safariへの対応用ベンダープレフィックスの設定も加えています。

これを加えずに iPad で確認すると動作しませんでしたが、1行追加すると動作します。

css の記述

.side-menu {
  position: -webkit-sticky; /* Safari対応 */
  position: sticky;
  }


上記の2種類の設定のみでは Internet Explorer 11 で動作しません。
(2019年1月現在)

しかし Microsoft Edge では正常に動作します。

polyfill という JavaScript を読み込むことにより動作するようですが、ページの読込み速度が低下する恐れがあるので、極力 JavaScript を使用していません。
よって、私のホームページでは Internet Explorer 11 で動作しません。