ホームページ作成の基礎

エフライム工房のリニューアルを予告しましたが、放置していた間にホームページ作成の方法も色々と改良されています。そこで、どうせなら読者にも分かりやすいように、ホームページ作成の基礎を説明したいと思います　(゜o゜;

ホームページは、様々なブラウザで閲覧されますが、これはキチンとした表記方法（記述言語）が確立されているからです。この言語はHTML4.1からHTML5へと進化してきました。HTMLで書かれたソースを、ブラウザは独自の表示エンジンで視覚化しているわけです。ヤクルトスワローズのホームページを例にして説明します。


PCではこのように見えるスワローズの公式


こちらはスマホ

スワローズのホームページは、リアルタイム速報や、様々なグッズ販売や、視覚的な効果が網羅されているので、最新のHTML5でソースが記述されています。では、ソースはどうやって見るかというと、ブラウザがFirefoxなら「ツール→Web開発→ソースの表示」で簡単に見られます。

また、ホームページをダウンロード（保存）して、拡張子の.htmを.txtに変更（リネーム）すると編集もできます。編集が終わったらまた拡張子を元に戻せばブラウザで見られます。でも、テキストだと極めて見難くなるので、やはりホームページ作成ソフトで開くのが楽ちんなのです。


拡張子が.htm


拡張子が.txt


カラーがソース
白黒がテキストで開いたもの　ワケワカメ　(=o=;)

ホームページで表示させる画像などは、ダウンロードした時にできるサブフォルダ内に格納されています。この画像を入れ替えることで更新されるのですが、ハッカーによるホームページ改竄は、サーバーに違法アクセスして、ソースそのものの記述を改竄する、または名前はそのままで別の画像に入れ替える、などの方法で改竄が行われているのです。

例えば、スワローズのホームページのソース記述に手を入れて、画像をエフライム工房のものにするのは簡単です。サブフォルダ内にエフライム工房の画像をコピペしておいて、ソースの該当部分を変更するだけ。でも、自分のパソコン内で見るだけの、このような実験的なものは良いのですが、画像と文字だけ入れ替えて自分のホームページにすることは著作権侵害になるのでダメですお　(^_^;)


酒船石を表示させてみた　^_^;

最新のHTML5はソースがシンプルで、パソコンとスマホで同一のサイトも作りやすい。昔流行ったiモードみたいに、携帯サイトを別に作る手間もありません。これをレスポンシブ・ウェブデザインと言います。PCの画面とスマホの画面では、使われている画像は同じですが、配列や大きさが自動的に変更されるのです。これはGoogleなどの検索でも推奨されているデザインです。


PCのこれが


スマホでは自動的にこうなる

なお、日立リヴァーレから長内選手と間橋選手が選ばれている第2回アジアU-23女子選手権大会。決勝では地元のタイに追い詰められながらも底力を見せての逆転優勝。間橋選手が決勝で名前が見えないのは心配ですが、良い経験になったと思います。次はU-23世界戦ですね　(；・∀・)