管理人の日記 - Web サイト作成

Web サイト制作 2019-01-08

Web サイトを公開したいと思ったものの、「お問い合わせ」ページが無いのは良くない。

とりあえず、「お問い合わせフォーム」から制作することにした。

  • Category: Web サイト制作

Web サイト制作 2019-01-09

「お問い合わせフォーム」の制作の前に CSS に手間取ってしまった。

早くフォームの制作に取り掛かりたい。

  • Category: Web サイト制作

Web サイト制作 2019-01-13

「お問い合わせフォーム」の制作が一区切りついたので、サイトを更新した。

その後、Windows 7 の IE11 で表示確認したら、「index.html」を含むリンクをクリックしても、訪問済みの色にならなかった (リンクの色が青から紫に変化しない)。 サーバー側で、「index.html」を省略するように設定しているのが影響しているのだろう。 うむ (-_-)

今度は Firefox, Chromium で同様な表示確認をしたら、訪問済みの色に変化した。 良かった (^_^)

解決方法は簡単で、サーバー側で「index.html」を省略しないようにする。 または、HTML ファイルのリンクに「index.html」を省略するだけ。

ただし、Firefox (Gecko 系) と Chromium (Webkit 系) が期待通りの表示になってくれたので、この件については後回しにしよう。

  • Category: Web サイト制作

HTML のボタンのスタイル

Firefox にて、スタイルを設定したボタンにフォーカスを当てると、文字列が点線で囲まれてしまうことが気になっていた (ボタンの周囲が囲まれることを期待していた)。

そこで、検証用の HTML を作成した。
検証用 HTML: submit-css-sample.html

どうやら「padding を 0 以外」に指定して、更に「background-color または border」を指定した時に起きている。 ちなみに、「padding 0」で「width, height」を設定だとボタンの周囲が点線で囲まれたが、あまり「width, height」は使いたくない (理由は、文字列を変更したときに修正が必要なため)。

その他、検証用 HTML を Chromium で見ると、いずれの場合もフォーカスを当てたボタンの周囲がオレンジ色の線で囲まれた。

致命的な問題ではないので検証は終了。

  • Category: Web サイト制作

Web サイト制作 2019-01-17

やはり、サーバー側で「index.html」を省略しないようにした。

理由は、「index.html」を省略すると HTML ファイルを開いているのか、CGI (index.cgi, index.php) で出力されたページを見ているのか分からないから (もちろん拡張子が「.html」でも、HTML ファイル以外の可能性もあるが)。

後は、実際に「index.html」付加で統一されているサイトもある。
例: みずほ銀行 <https://www.mizuhobank.co.jp> => https://www.mizuhobank.co.jp/index.html

  • Category: Web サイト制作

Python ソースコードへのリンク

Python3 のソースコードへリンクをクリックしていたら、ブラウザによって差があったので、リンクの検証用 HTML を作成した。
検証用 HTML: anchor-sample.html

長くなるので解説や考えていたことについては、ここには特に書かないことにする。

最終的には、.htaccess ファイルに「AddType text/plain py」を追加することにした。

  • Category: Web サイト制作

サイト名の変更

サイト名とドメインを変更してみた。

それにともなって、各ページの title 要素からサイト名を消した。 これで再度サイト名を変更しても、すべてのページを更新しなくて済む。 しかし、最近はサイト名を入れるサイトが多い気がするが良いものだろうか?

  • Category: Web サイト制作

JavaScript を使用したページのサンプル

今後、JavaScript がメインのページを作成する可能性があるかもしれないので、サンプルを用意した。

サンプル HTML: js-disabled-sample.html

サンプルについて、JaveScript 設定が無効、 または非対応のブラウザには noscript 要素を使わずに対応してある。 理由は、XML (XHTML) だと noscript 要素が使えないため (参考: WHATWG - 4.12.2 The noscript element)。

また、サンプル HTML の注意書きがいろいろ記載してあるが、 実際は「Web アプリケーションが動作しない場合は コチラ を参照ください。」くらいの文を添えて別ページにリンクを貼っておこうと思う。

  • Category: Web サイト制作

日記をカテゴリごとに分割

日記が長くて見づらくなっていたので、カテゴリごとにファイルを分割した。

そのうちに、年単位か月単位のような感じに分けることになるので、どんなレイアウトにしたいか整理しておきたい。