パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホに関する話題です。
root化 や 部品交換等の改造もメモしています。
使用している気に入ったアプリの紹介・・等々。
   

ホームページ作成 と サーバー関連

ホームページ作成ソフトは「ホームページ・ビルダー21」を使用しています 。

Webサーバーは、スタードメインでドメインの契約をし、おまけの無料レンタルサーバー を使用しています。

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

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

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

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


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

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

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

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

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


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

ベンダープレフィックスといえば、-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 で動作しません。