パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホの買換えなども整理しました。
特殊なアプリや部品交換等の改造もメモしています。
電子機器として、ブルーレイやドライブレコーダー・・等々。
   

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

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

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

目 次

ホームページ 改善/改造 の 主な作業記録一覧へ

  1. サーバー 関連
  2. ホームページビルダーの起動に時間がかかるので対策実施
  3. スマホ画面用のレスポンシブデザインに対応するための
     viewport の設定
  4. table の 列の文字がはみ出さないように改行する方法
    cssで、word-wrap: break-word; 等を設定
    (bodyに設定すると、ページ全体に反映できます)
  5. サイドメニューをスクロール途中で固定
    (cssのみで、FlexBox と position sticky を使用)
  6. 基本的なCSSセレクタの書き方
    • セレクタを「.」や「,」や「スペース」で区切り設定
    • 奇数/偶数要素に適用、リンクや画像で使うセレクタ など
  7. .htaccess ファイル の 設定例
    (別のサーバーに自動的に転送、キャッシュ期間の設定 等)
  8. 画面上に自分用のアイコンを表示させる faviconの設定方法
  9. ホームページビルダーで 共通部分の同期 を利用する方法
    共通部分の内容の変更を、対象の全ページ一括で変更する方法
  10. 「戻る」「進む」「更新」ボタンの設置方法
     (使用例・・・
  11. ルート相対パスの メリット と デメリット
  12. すべてのブラウザに対応するようにベンダープレフィックスは必要か
    Flexbox で position: sticky; を使用した時の例

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

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

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


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

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

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


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

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

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

これを加えていない場合上手く動作しませんでした。(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;
  }

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

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

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