banner

最近の投稿

レイアウトがずれないように

ホームページ制作中にレイアウトがずれる

ホームページ制作しているとレイアウトが意図したものより1px程度ずれることがあります。使用するブラウザの種類によってずれてしまうこともあるでしょう。

最近ではメモ帳のようなテキストエディタでホームページ制作を行う人は稀で、初心者、上級者に関わらずホームページビルダーやDreamWeaverのようなWebオーサリングソフトを使用している方が多くいます。さらにはホームページを作るための雛形であるCSSテンプレートを利用してホームページ制作を行っている方もいることでしょう。

しかしそういう場合においても、ホームページ編集作業中にレイアウトが崩れてしまうことが稀にあります。

このような現象が起こった場合、まずはDOCTYPE宣言を確認することが先決です。DOCTYPE宣言とはHTMLファイルの先頭に表記されるHTMLのバージョンを定義するもので、例えばHTML5とHTML4だとvertical-alignの初期値が異なり画像がずれることがあります。

次に当たり前ですがソースコードにスペルミスがないかチェックしてください。ホームページ制作においてソースコードは正しく記述しないとレイアウトが崩れる原因となります。最近のWebオーサリングソフトだとチェックしてくれる機能がありますし、Web上のサービスを使ってもいいでしょう。

三つ目の手段として確認するWebブラウザを変えてみましょう。できればホームページ制作ツールが搭載されたGoogle Chromeが好ましいです。IEはややHTMLのルールに準拠していない点が多いので開発中はあまり使わないようにするのが無難です。

それでもまだ直らない場合はCSSに原因がある可能性が高いです。

例えば意図していない空白が空くとか、カラム落ちしているなど、ほとんどがCSSにより不具合です。個別にどのようなスタイルが適用されているか確認してください。これらの作業はテキストエディタやWebオーサリングツールで行うよりGoogle Chromeの開発者ツールで行うほうが楽に行えるはずです。

稀にですが、正しく記述しているはずなのにレイアウトがずれてしまうこともあります。ブラウザも人の手で作られたものですから決して万能ではなく、特に昔のIEではバグが多く見つかっています。

IE以外のブラウザでは正しく動作しているのにIEでは動かないという場合、IEのバグである可能性が高いです。ネットで調べて古いバージョンのIEに対応するのもいいですが、生産性を重視して古いIEには対応しないホームページを制作してしまうのもよいでしょう。

ページ遷移をさせない

ページ遷移をさせないホームページ

ホームページのリンクをクリックするとリンク先にページ遷移をします。どんなにサイトの容量が少なくしても、ページ遷移が発生すると読み込み時間が必要になります。必要な情報を上手くJavaScriptやjQueryを使うことでページ遷移が無いホームページを作ることができます。代表的な方法としてdisplay:noneを上手く使うことです。表示・非表示をさせたい箇所に対して、クラス名かIDをふります。例としてJavaScriptで

style.display=”block” : 表示
style.display=”none” : 非表示

を使って制御を行います。ホームページ内に読み込んである情報ですがdisplay=”none”にすることで非表示にします。ボタンやチェックBOXの動作等でstyle.displayの状態を切り替えます。該当箇所が、変更されてページ遷移無しで表示の切り替えができます。非表示にする情報は、さまざまあります。文字やフォームの非表示もあります。中には、インラインフレームを隠す場合もあります。インラインフレームは、別のホームページの情報を表示することができます。

例えば、一定の時間に更新処理を行い最新状態を監視したいページの場合は、JavaScriptでタイマーを指定して定期的にインラインフレームのみの更新を行います。こうすることで、ホームページそのものは更新されませんが、インラインフレーム上のものだけで定期更新されます。

display=”none” 状態のインラインフレームを使うと、ホームページの更新をしないでインラインフレームの更新に対して処理を実行ができます。何かしらの更新や変化が起きた瞬間にアラートを挙げたり、画面に表示を行うことができます。一画面内にインラインフレームを複数配置することで、さまざまな情報管理がしやすく成るでしょう。

インラインフレーム上で違うホームページも表示ができます。特定のキーワードが出た瞬間に通知を行うことで、株式やFXや新商品情報の入手のために使うなどで使用します。あとタブを作ることで、タブクリックに対してページの中身を変更するとスマートなサイトが作成できます。jQueryを利用することで、システム部分と連結させて非同期通信しながらデータベースの中身を取得して、該当箇所の変更をします。これは、連結プルダウンで選択した値に対して該当する項目を選択させたい場合に使用します。

wordpressを使ったホームページ

wordpressを使ったホームページ作成でのソースの埋め込み

エディタなどを使ってタグを書きながらホームページを作っていくというのが、昔は当たり前でしたが、最近はwordpressのようなツールを使って作るということが増えてきています。

wordpressでホームページを作るメリットとしては、サーバーにアップロードされ、ネットに公開されている状態でブラウザから編集を出来るという点です。従来の、エディタでタグを手書きしていくという作り方の場合、ページを作ったら、サーバーにアップロードして、ブラウザでアクセスして問題なく見られるかどうか確認する必要がありました。しかし、wordpressの場合、既にネットで公開されている状態での編集が可能なので、ページを作るたびにアップロードをするという手間がないのです。

ツールを使ってホームページを作る場合、自由度はどうなのかと心配する人もいるでしょう。たとえば、デザインのカスタマイズを行えるのか、あるいは、動画やプログラムなどを埋め込み出来るかどうかといった点です。

wordpressの場合、カスタマイズについても問題なく行うことが出来ます。たとえば、デザインの変更であれば、テンプレートとスタイルシートを編集すればいいのです。これらのことも、ブラウザからおこなうことが出来ます。

また、動画やプログラムの埋め込みですが、記事の編集画面でソースを貼りつけることで、問題なく可能です。注意したいのは、編集モードです。編集モードには二種類あります。まず、ボタンをクリックするだけで太字にしたり、フォントの大きさを変えることが出来る編集モードがあります。

このモードの場合、HTMLを知らなくても文字のデザインを簡単に行うことが出来ます。ただ、このモードにソースを貼ってしまうと、ソースではなく、文章として認識されてしまうので、動画やプログラムをうまく実行させることが出来ません。

なので、もう一つの編集モードである、HTMLを直接書き込むモードでソースを貼りつけるようにしましょう。このモードであれば、HTMLのソースは、そのままソースとして認識されます。二つのモードの切り替えは、ボタンをクリックするだけで簡単に出来ます。

上記のように、wordpressを使ったホームページ作成は、初心者にとっては簡単に出来ますし、また、デザインを変更したり、ホームページでいろいろな表現をしたいという上級者にとっても、自由度が高くてやりやすいです。

背景の画像について

ホームページ制作,背景,画像

HTMLの知識さえあれば、ホームページ制作は誰にでもできます。

しかし、ホームページは誰にでも作れるけれども、ホームページ制作を始めたばかりの人が躓いてしまう点がいくつかあります。その一つとして、訪問者がなかなか増えないことが挙げられます。折角ホームページを作ったのだから、より多くの人に見てもらいたい、という気持ちはホームページを作る人ならば誰にでもあることです。ホームページのテーマや検索エンジンの上位になかなか上がらない、ということも理由としてあるかもしれませんが、ここでは、ホームページ制作においてのデザイン上の問題を説明します。

まずは、目に優しくないホームページ制作を行っていないかを見直してみます。

目立つページデザイン、あるいは最初に訪れた人をあっと驚かせるページに憧れる気持ちは分かりますが、訪問者が求めるのは、読みやすく、かつ自分が求める情報がすぐに閲覧できるホームページです。背景と文字が原色だったり、喧嘩し合うような配色だったり、あるいは派手な画像であったりすれば、訪問者はまずブラウザバックしてしまうでしょう。やたらとチカチカする文字も好まれません。

背景をデジカメで撮って何も加工していない写真などは、ページが重くなってしまい、ページの読み込みに時間がかかってしまう場合があります。

読み込みに時間がかかるのは訪問者を遠ざける原因となります。ホームページ制作をする際は、訪問者にストレスなくページを閲覧してもらうことを一つの目標とします。どうしても使いたい背景があり、それが文字を見にくくするものであれば、文字表示用に薄い色の表を作り、その中に文字を入れるなどの工夫をします。

理想としては、1ページ辺りの容量は100ないし200キロバイトを目安にし、今や多種あるインターネット機器の大半でストレスなく読み込めるようにします。写真や自分で制作した画像も、ホームページにアップロードする前に容量を見てみます。100キロバイト以上は要注意です。大き過ぎる物は縮小などをして加工します。ウェブにアップロードするだけの画像であるならば、解像度が低くても問題ありません。今では、解像度はそのままに、容量を軽くするフリーソフトもあるので是非とも利用しましょう。

ページはできるだけシンプルに、かつコンテンツが見やすく更に使い勝手が良いホームページであれば、ホームページ制作においてデザイン上では問題ないかと思われます。

Copyright(c)2014 ホームページ制作のクオリティを保つために重要となるルールAll Rights Reserved.