0

動作と表示の確認

パソコン上で作ったHTMLファイルをブラウザで開き、デザインの段階で作ったイメージと見比べて見栄えや動作の確認をします。
ホームページは全部作り終えてから確認するのではなく、作りながら確認していくのが効率的です。
なるべく早い段階で構文やスペルの間違いに気付いたほうが、修正する量が少なくて済むからです。
確認するべきポイントは大きく分けると以下の3つです。

① デザイン通りのレイアウトになっていること
② デザイン通りの装飾になっていること
③ リンクやボタンが正しく動作すること

具体的には、
・文字や画像が、正しい場所に正しい順番で表示されているかどうか?
・文字の字体、大きさ、色がcssの指定通りに表示されているかどうか?
・背景色や境界線など、cssで付けた装飾が正しく表示されているかどうか?
・ブロック同士の隙間や余白がcssの指定通りに表示されているかどうか?
・リンクを押すと正しいページに移動するかどうか?
・メールフォーム等の入力ボックスに文字が入力できるかどうか?
・メールフォーム等のボタンが正しく動作するかどうか?
・どのブラウザでも問題芯く表示されるかどうか?
・スマホやタブレッ卜でも問題なく表示されるかどうか?
などの観点で確認していきます。

特に最後の2つは忘れやすいので注意が必要です。
HTMLやcssは、ホームページにアクセスするブラウザの種類やパージョンによって対応している構文と対応していない構文があるからです。
利用者の多いブラウザについては一通り動作確認をしたほうが良いでしょう。
このような確認を行って、どこかおかしいところがある場合は、HTMLの構造が正しい階層になっていない可能性や、cssの構文が間違っている可能性が高いので、前の工程に戻って再点検します。
最初のうちは書き間違いに自分で気付くことが難しいと思いますので、インターネット上にある構文チェックツールを利用することをおすすめします。
「HTML自動整形ツ ール」とか「HTML構文チェッカー」などといったキーワードでインターネット検索すると見つかります。
自習だけでなく実務にもお役立ていただけると思います。

0

サーバーとは?

サーバーと聞くと「難しい」と感じられるかも知れませんが、私たちが普段使っているパソコンと同じようなものという理解でよいでしょう。
一番大きな違いは、パソコンはいろんなソフトを入れて仕事や遊びなど多目的に利用するのに対して、サーバーは決まった目的で利用されることが多いということです。

たとえば、ホームページのデータをインターネット上に保管する役割をもったサーバーは「ウェブサーバー」と呼ばれ、メールの送受信を担当するサーバーは「メールサーバー」と呼 ばれます。
SNSのようにログインしないと利用できないサービスの裏側には、ユーザー全員のIDやパスワードなどの情報を保管する「データベースサーバー」と呼ばれるサーバーが存
在しています。
なぜパソコンのように一台にいろんな役割を任せないのかというと、サーバーは多くの人が共同で利用するので、大量の情報を同時に処理できなければならないからです。
また、セキュリテイの観点からも、役割ごとに機械をわけでおいたほうが好ましいという理由もあります。
一台が故障しても、全体がダメになるわけではないからです。
そのため、サーバーは役割に応じた名前で呼ばれ、使いわけがされるのです。

サーバーのうち、みなさんが実際にホームページを作成したり公開したりするときに 重要なのは、「ウェブサーバー」と「DNSサーバー」に関する基本的な知識です。
それぞれの役割を簡単にまとめると以下のようになります。

【ウェブサーバー】
ホームページのデータを保管し、アクセスしてきたブラウザにデータを送り返す。

【DNSサーバー】
ホームページが置いてあるウェブサーバーのインタネット上での住所(アドレス)を管理する。
ブラウザがホームページのデータを要求したとき、該当のウェブサーバーのアドレスを探し出し、ブラウザに伝える。

0

サイト構造パターン

Webサイトは目的により構造が変わってくる。

例えば観光案内に関するサイトであれば、トップページから目的のページ (ゴール)まで分岐せずに一直線にリンクが張られている。途中で別の ページに進めたり、ショートカッ卜することができないので、サイトとして 機能させるには不都合が多いが、ナビゲーションがわかりやすく表示 されているので、これほど訪問者が迷わない構造もないだろう。 Web サイトというとトップページでさまざまなカテゴリ分けがされていて、途 中には数多くの分岐が存在する、という先入観があるが、目的が単 一で情報の順序が決まっていれば、このパターンを検討してみるの もよい。また、これによく似た構造として、ページを移動するに従って異 なるディレクトリのファイルに接続されて先ヘ進んでいくというタイプ がある。これは、ディレクトリにファイルが階層的に並べられているの で一見すると別のタイプに思えるが、ページ分岐がなく、順番に閲覧するナビゲーションをもっていることから、同じようなタイプに属しているとい えるだろう。

0

画像と文字の配置を変更する

フロントページエクスプレスでは、画像は文字の1つのように扱われます。画像の横に文字を入れようとすると画像の 横に1行だけ文字が入力され、あとはウインドウで折り返されて画像の下に入力されてしまいます。画像と文字をどの位置で揃えるかは、[画像のプロパティ]で設定できます。[画像のプロパティ]ダイアログボックスを開き、[外観]タブの[レイアウト]-[配置]で設定します。画像の横に、パンフ レットや本、ビジネス文書のように、見栄え良く文章を回 り込ませたいと思うときには、 [配置]で[右]もしくは[左]を選ぶことで、画像の横に文章を回り込ませることができます。[右][左]は、一見したところ逆にな るように思えますが、画像の位置が本来の行 (テキスト、画像含めて)に対してどこに配置されるかという「画像の配置の指定と考えれば容易に理解できると思 います。しかし、 [配置]を[右]や[左] に設定して、画像の横に文章を回り込みさせると、画像と文字との間に空きがほとんどなく、くっついたような感じになってしまいます。 そのようなときには〔横の間隔][縦の間隔]を設定して、画像と文字との間隔を数値で指定して空けることができます。また、途中で回り込みを解除して画像の下に続きの文章を入れたい場合は、[改行のプロパティ]で[余白なし]に設定した改行を入れることで設定できます。

0

評価を受けるために必要なテクニック 

検索エンジンが利用者を向いていることをふまえれば、利用者のニーズを満たす
「オリジナリティ」が高く、「利便性」の高いWebサイトやコンテンツが高く評価され
ることは当然のことだと納得できるでしょう。しかし、それだけで本当に、高い成果を
実現できるのでしょうか。

SEO対策の本場アメリ力では、すいぶん前から文意や関連ワードが重要だといわれ
ていますが、実行した施策の結果やSEO業界の方の話を総合すると、まだ日本では文
意や言い換えを正確に把握しきれていないようです。その原因としては、日本語の文章
短文形式のLlNEのやり取りが、接続詞や接続助詞によってむずかしくなること、そして、単語ごとにスペースで区切られる英語などの言語と異なり、隙聞なく単語が続く上に、漢字や平仮名、片仮名などが入り乱れ、単語を把握しにくい言語であることなどが推測されます。
つまり、 日本における検索エンジンは、「良い」コンテンツを作成しただけでは評価 してくれない可能性があるのです。そこで必要になるのが、検索エンジ‘ンに「早く 」「正確に」伝えるための方法を知り、実行することです。長期的には効果は低下していくで しょうが、現時点では、検索エンジンに伝えるためのテク二ックも必要なのです。

0

サイトアクセス解析の基本

Webサイトがどのように利用されているかを知るには、 Webアクセス解析ツールを使うとよい。 これはページが閲覧された回数の単純な合計になる。頭文字をとって pvと呼ばれることが多い。 次に「セッション」、つまりユーザーの訪問だ。これはユーザーがそのサイトを訪問して離脱するまでが1個とカウントされる。 同じユーザーがちがう機会に訪問しても、別セッションとしてカウントされる。つまりサイトののぺ訪問回数だ。通常、ブラウザを聞いたらひとつのサイトだけを見ることはない。複数のサイトを行き来していると、どこまでがそのサイトへの訪問なのかがあいまいだ。そのサイトで 30 分以上クリックがないとき、訪問は終了したと見なされる。 Google Analytics では「セッション」という言葉が使われているが、一般に は訪問 やビジットと呼ばれることが多い。  PVがサイトの価値そのものではなく、サイトの価値 を評価するための一つの指標としてPVを使う。だから、 PV、uu といった基本的な指標に加えて、それぞれのサイトの特性にあった指標で評価することが大切だ。

0

SEOキーワー ド

SEOキーワー ドの数を増やすには、「関連検索」もキ-ワ-ド探しに役立ちます。ここでは、関連検索を使ったキーワー ドの収集方法を解説します 。 GoogleもYahoo! JAPAN も、あるキーワードで検索すると、関連したほかのキーワードを検索結果に表示してくれます。たとえばYahoo JAPAN で「イタリア料理」と検索すると、検索結果の上部に4個、下部に 10個、「イタリア料理」に関連したキーワードが表示されます。上部の4個は下部に含まれるので下部だけ確認すれば問題ありません。 すると、見つからなかった「イタリア料理 用語」という新たなキーワードが見つかりました。Googleも同様の機能があり最大で上部に5 個、 下部に 10 個キーワードの候補が表示されます。新たに発見したSEOキーワードはキーワード帳に コピーし ておきましょう 。

0

レイアウトの手法『レイアウトグリッド』

Webレイアウトを実践的に作成する際、レイアウトグリッドを利用することで部分の制作時間を短縮することができる。ここでは、 Webデザインにおけるクリッドシステムの概要と Webデザインへの適用方法を紹介します。

グリッドシステムとは
グリッドシステムは、文字と図版を二次元的な平面に配置するためのガイドラインである。タイポグラフィ(文字組)の分野に属するレイアウト手法だ。グリッドシステムが誕生した当時は紙メディアが対象であった。システムを形成する最小単位は活字1文字の大きさであり、行に含まれる文字数がユニットと見なされていた。 本文サイズ10 ポイントなら、 1行50文字のカラムは500 ポイント の幅をもつという具合である。 紙面のように文字と図版で画面を構成する Webサイトでも、グリッド、システムを活用した基本的な画面設計をするシーンが増えている。
1 文字のサイズと1行に入る文字の数を掛けた 値が幅の大きさになる。
たとえばこのように、文字の玉(最小グリッド)を利用して、ラフレイアウトをしたり、デザインを行う。ファーストビューをカラムで区切る。
クリッドシステムが活用されるようになった背景には、 Webページを表示するためのディスプレイが大型化したことがある。ディスプレイが幅800X 高さ 600 ピクセル程度と小型だった時代にお いて、 Webページが許容した文字カラムの数は最大でも3カラム 程度である。それ以上区切ると1行に含まれる文字数が少なす ぎ、情報が縦にあふれるおそれがある。 ところが現在のように幅 1024X 高さ 768 ピクセルの解像度が 標準環境になると、 Webページのファーストビューは幅 960 ピク セル程度に拡大。それに伴って並列可能なカラム数は最大で4 ~5へと増えることになった。 並列できるカラム数が増えたということは、おのずとカラム構成 は複雑になる。 1カラムの幅の比率を決定するのも大変な作業になるので、作業をサポートするガイドラインのような仕組みが求められた。そこで再評価されはじめたのがレイアウトグリッドだ。もち ろん、 Webの場合は紙と違い、文字サイズが表示環境により相対的に変化するため、グリッドの最小単位は文字サイズではない。 Webの場合、最初に決めたファーストビューのサイズを任意の均一に割って設定するという手順になる。

0

サイズの決め方

クリッドシステムを構成する 1カラムの幅は、まずファースト ビューをユニットで区切るのかと方針を固めることから始める。 Webぺージに素材を流し込むためのボックスの数が最大でも4つ程度の単純な構成を 採用するページの場合、ク”リッドシステムを構成するカラムは 12 個とするのが標準的だ。 6個のボックスが並列するような複雑な 設計の場合、 16 個のカラムを使ったグリッドシステムが使われる。 多くの Webページがこの 12 個か 16 個というカラム数を目安にし て画面を設計しており、いくつかの例外はあるものの、この数字は汎用性が高いと見なされます。 日本語によるページレイアウトの場合、英語と違い 1文字の幅 が広く、あまり細かいボックス構成が遁さないことから、 12 個のカラムが使われるケースが多い。また、他言語対応のように単語の長さや表示文字の多様性に対応する必要がある場合も、 12 個 のカラムで余裕のあるボックス構成を採用するとよい。

0

色について

われわれがふだんPCのディスプレイで見ている色は電磁波の一種である。具体的には電滋波の範囲を色として見ている。その範囲をスペクトルという。 色は物体に当たった光の一部が吸収され、吸収されなかった光は 物体の表面で反射し、その光が眼球から網膜に入ることで色を感じ 取っているのである。つまり、色とは光を媒介とした一種の感覚で あるということもできる。物体の表面色はある色で染められているからその色として見えるように思われるが、実際われわれの目にはその 物体を照明する光の性質によって異なった色として見えているので ある。