ＨＴＭＬを使ったホームページの制作？はじめに？

Wed, 18 Jan 2012 16:44:30 +0900

まずホームページを制作する際には、HTML(HyperText Markup Language)という言語を使用します。インターネット上で情報を後悔・閲覧するにあたって必要な、環境や機種に依存せずに誰もが利用可能な情報発信ができる言語です。HTMLは「<」「>」といった半角英数の記号を用いるタグという書式に従って書かれます。タグは原則半角英数で記述し、<タグ名>〜(開始タグ〜終了タグ)という形で記述します。まず「ヘッダ」と呼ばれるとの間にホームページの内容や背景の色、文字の大きさ等、そのホームページを構築する為に必要な情報を記述します。ここで入力する情報の多くは実際のブラウザ上では直接表示されません。だからといって適当な事を入力するとエラー等の問題に繋がるので、しっかりと内容を考えてそのホームページに適した記述するようにしましょう。次はヘッダ内についての説明です。ヘッダ内に入れる重要な要素の一つにというタグがあります。これはホームページのタイトルバーと、ブックマークをした際にユーザーが解りやすいように表示される、そのホームページの名前のようなものです。SEO対策にも繋がるように工夫したタイトルをつけるのも効果的ですが、タイトルを長々しくしたり特殊な記号を使用したりして、色々な情報を一気に伝えようとしてしまうと、ユーザーはもちろんホームページの管理者からも解りにくくなってしまう事が多く、SEOの方面でも逆効果となってしまいます。ホームページを制作する際には自分やユーザーはもちろん、誰にでも解りやすいようにまとめる事がとても重要になります。次に大きな要素になる<body>の説明をします。<body>はホームページの文字の大きさや色、フォントの種類、背景の色や画像について使用します。body等のタグは基本的に「<要素名属性名=”属性値”></要素名>」といった形で記述します。要素名と属性名は半角スペースで区切り、属性値は「”」(ダブルクォーテーション)で囲む事が重要です。文字の大きさは<body font color=”○○”>など○の中に指定色を入力します。HTMLで使用する色の表記については、誰にでも同じ色に見えるようになるべくWebセーフカラー内の色を使用するようにしましょう。基本的にHTMLは英語表記がほとんどなので、色はcolor、大きさはsize、背景はbackground等、その部位に適したタグを使用しましょう。 </article> <article> <h1>ＨＴＭＬを使ったホームページの制作？やってはいけない事？</h1> <p>Tue, 17 Jan 2012 19:19:54 +0900</p> ホームページを制作するにあたって、一番重要なのはアクセス数を稼ぐ事やとにかく派手なページを作る事ではありません。誰にでも見やすく、どのパソコンからでも解りやすいページを作る事が最も重要となります、ページ全体の重さもそうですが、特にトップページはそのホームページの玄関とも言えるものなので、無駄なものを省き、表示のしやすく見やすいページを作る事を心がけましょう。トップページは一般的なホームページの場合、できれば５KB〜２０KB程度が理想といわれています。ページ全体をテーブルにする事も読み込みに時間がかかる原因の一つとなります。テーブルはキリの良い所でいったん終了させ、何段階かに分割しましょう。さらに表示をさまたげる大きな原因の一つに無駄な画像やサイズの大き過ぎる画像の挿入があります。トップで画像を使う場合、できるだけ使う数を少なくし、出来る限り圧縮する事もおすすめです。背景画像も大きな画像を一つ背景に載せるのではなく、小さな分割画像を並べて表示するようにするとページの読み込み時間の短縮に繋がります。音楽や動画などをむやみに乱用する事で読み込みが非常に遅くなる原因となります。また、音楽や動画を自動再生設定すると、訪問した人がびっくりしたり、不快感を与える場合もあるので、使用するメディアには充分に気をつけましょう。さらに画像や音楽、動画などには著作権が発生するので、絶対に無断転載や無断使用、無断加工はやめましょう。いくらフリー素材であれ、加工を許していない配布元もいるので勝手に自由に使ってしまうとトラブルの元となります。必ず配布元をきちんと確認し、正しい使い方を心がけましょう。背景の色やフォントの大きさ、色の組み合わせにも注意しましょう。フォントサイズもユーザーの環境によって小さ過ぎて見えなかったり、逆に大き過ぎてレイアウトが崩れたりする場合もあるので気をつけましょう。また、リンク先のURLが正しくなかったり、リンク切れをおこしている場合もユーザーに不快感を与えます。リンク先が外部のサイトの場合はURLが変更する恐れがあるので、定期的に確認するようにしておきましょう。間違ったリンクやリンク切れをおこしていると、ユーザーに不快感を与えるだけではなく、SEO対策としても逆効果となります。さらに、ユーザーのブラウザへの配慮も必要です。表示出来なかった場合の代替えテキストの記述や、一つのブラウザだけに頼ったデザインレイアウトなどにも気をつけ、必ず確認をするようにしましょう。 </article> <article> <h1>ＨＴＭＬを使ったホームページの制作？アクセスアップについて？</h1> <p>Tue, 17 Jan 2012 19:18:43 +0900</p> ホームページのアクセス数を増やすために重要になってくるものの一つにSEOという言葉があります。「Search Engine Optimization」の略で、意味は「検索エンジン最適化」といいます。SEOを行うと、同じ内容が掲載されているサイトでも、検索結果が大きく変わります。具体的に多い例が、titleタグでのミスです。せっかく良い内容を書いても、titleをきちんと記述しておかないと、検索エンジンで検索した際に上位に表示されなくなってしまいます。titleはGoogleやyahoo!等の検索エンジンの結果のサイト名にそのままま反映され、ユーザーがクリックする基準の大きな一つとなり、とても重要性の高いものとなります。そのため、安易に名前を考えず、シンプルかつ解りやすく記述する事が重要になってきます。また、サブタイトルをつける事も検索結果に強く反映されます。ただし、検索結果は全角３３文字を超えるとそれ以降は反映されないので注意しましょう。一般的に<h1>〜<h6>、<strong>、<em>、<li>など強調タグが検索した際にSEOに効果的と言われております。しかしこのタグを使用すれば必ずしも上位に表示されるわけではなく、ホームページ全体のバランスや内容の的確さ等が重要となってきます。そのため、強調タグを乱用する事は望ましくありません。あまりに必要のない部分で意味の無い文字を入れすぎたりすると、スパム好意として見なされてペナルティとして上位表示どころか今よりも下に表示されてしまうことになってしまいますので、注意して使いましょう。検索エンジンは基本的にキーワードに適しているサイトから順に結果に表示されます。ライバルの多いキーワードだと２０位以内であれば上位表示と呼ばれる事もあいます。また、アクセス数を増やすために効果的な方法の一つにリンクがあります。自分のサイトと同じジャンルや関連性のあるサイトとの相互リンクは非常に効果的ともいえます。必ずリンク先をきちんと確認した上でリンクを貼り、むやみやたらにリンクを貼る事はスパムやトラブルの元となりますのでやめましょう。検索結果だけにこだわらずに、サイト紹介文はなるべく簡潔かつ的確に記述し、キーワードも多く入れすぎないように、必ず訪問者やユーザーからの視点を忘れずにしましょう。 </article> <article> <h1>ＨＴＭＬを使ったホームページの制作？ＣＳＳについて？</h1> <p>Tue, 17 Jan 2012 19:16:21 +0900</p> ホームページを制作するにあたって、基本的にはHTMLでの記述がメインとなります。ですが、そこに加えてさらにページの見栄えを良くするためにCSSというものを使用します。CSSはホームページを人間に例えた時の指輪やネックレスなどの装飾品に近いものとなります。HTMLだけで同じように飾るとソースが非常に長くなり、ごちゃごちゃして見にくくなってしまう上に、ページの読み込みに時間がかかってしまいます。基本的な事はHTMLで記述し、その他の装飾はなるべくCSSで行うようにしましょう。CSSとは(Cascading Style Sheers)の略で、外部にホームページ内の装飾などに関する記述を行ったスタイルシートを作成し、そのスタイルシートをHTMLソースに添付することによって、ホームページに反映させるものです。HTMLでは<table>や<blockquote>などを駆使し構成しましたが、CSSではさらに簡単により細かい設定が可能になります。CSSには３種類あり、タグに挟まれた部分に適用する方法と、ページ全体に適用する方法、リンクを使って複数ページに適用する方法があります。まず、タグにスタイルを直接書き込む事をインラインで設定するといいます。インラインで設定する場合は<タグ style=”プロパティ:値; プロパティ：値; プロパティ:値;”>テキスト</タグ>といった形で記述し、フォントの色や形、背景色やサイズ、枠の太さや種類・色なども設定でき、簡単な見出しを作る事にも効果的です。次にページ全体に適用する方法ですが、この方法はHTMLファイルのヘッダーとフッダーの間に書き込む形になります。こうする事でファイル内の同じタグには全て同じスタイルが適用されることになります。タグなど頻繁に小見出しに使うものの設定等に向いており、ページに統一感を持たせる事が出来ます。最後にリンクを使って複数ページに適用する方法ですが、これはスタイルを適用したいHTMLファイルとは別にCSSファイルを作成し、そのシートに複数のページからリンクを貼る形となります。CSSファイルは.cssで保存する事でブラウザがCSSファイルとして認識します。CSSファイルができたら適用したいHTMLファイルからリンクを貼り、リンクには<link>タグを使用します。外部CSSが違うフォルダやディレクトリにある場合はHTMLと同様に<href=”フォルダ名/ファイル名”>で設定しましょう。この方法は同じレイアウトやデザインのページを複数作成する際に使用される事があります。 </article> <article> <h1>ＨＴＭＬを使ったホームページの制作？埋め込みタグについて？</h1> <p>Tue, 17 Jan 2012 19:14:34 +0900</p> HTML内にはさまざまなデータを埋め込み事ができます。しかしブラウザでこれらのデータを表示したり、再生したりするにはjavaスプリクとなどのプラグインが必要となります。現在のブラウザでは再生時に対応したプラグインが存在しない場合には、自動的にプラグインをダウンロードするか、またはその旨のダイアログ等が表示されます。データの埋め込みは画像の挿入と同じく「src=”○○”」属性を使用します。また、ここでは〜</embed>(埋め込み)を使用し、動画(.mpg、.mov)やFlash（.swf）、音声(.wav、.aif、.au、.midi、.ra)などを埋め込む際に使用します。〜</embed>はsrc属性で指定したファイルを読み込み、ブラウザに使いインストールされたプラグインソフトにデータを渡すことで、プラグインソフトによって実際に音や動画等を再生します。一般的に使われるプラグインソフトに「Adobe Flash Player」「Windows Media Player」「RealPlaye」「MidRadio Playe」「QuickTime」等があります。また、データによってはパネル表示やループ再生、自動再生等さらに細かな設定が可能で、これらは属性により指定できます。再生する際のプラグインソフトの表示サイズを指定するには、横「widht=”横のサイズ”」縦「height=”縦のサイズ”」の属性をそれぞれ追加し、サイズはピクセルでの指定となります。また、〜</embed>タグ使用する場合は、このタグに対応していないブラウザや機能をOFFに設定しているユーザーにも解りやすく表示するために、<nombed>〜</nombed>で代替え表示を記述しておきましょう。〜</embed>タグで埋め込むデータを再生する際にはプラグインが別途に必要となりますが、訪問者の中にはプラグインを組み込む方法や仕様がわからない方や、プラグインをインストールする環境にないユーザーもいますので、これらのファイルを埋め込む場合には、必要なプラグイン名を明確に表示し、配布元へのリンクを貼っておくなどの配慮をするようにしましょう。また、ユーザーによってはページを開いた時に音楽や動画等のデータが自動再生されると不快に感じる方も少なくない上に、データによってはページの表示が遅れてしまうので、使い所をきちんと考えて使用しましょう。 </article> </main></body></html>