HOMEへ戻る 柊優プレゼンツ
ウェブデザイン講座
HOMEウェブデザイン講座>横幅の使い方が1流と3流の分かれ目

横幅の使い方が1流と3流の分かれ目

横幅の使い方が下手なサイトを見る事があります。

例えば、文字部分の横幅レイアウトに関わって来るのですが、
<pタグ>のみで<br>タグは使用していないサイト。
この場合、非常に読みにくいサイトが出来上がってしまいます。

ちなみに、<p>タグと<br>タグの違いが分かっていない方にご説明しておくと、
<p>は段落、一つのまとまり、を示すものであって、<br>は改行を示します
逆に、<br>タグをぐだぐだと並べて、テキストの体裁を整えているところがありますが、
SEOの観点からは、<p>タグを重要視しますので、しっかり区別して下さい。

※一つの塊としてみなす<DIV>タグというのがありますが、
あるIT企業のサイト(関連会社含)で<DIV>の中に要素を詰め込み過ぎた事が原因で、
スパム認定された事があります。くれぐれも<DIV>の使用には気をつけて下さい。

このサイトは、ご覧の通り、<br>タグをかなり頻繁に使用しています。
グレーの文字色を使う事で、かなり読みやすさは上がっていますが、
そうではあっても、横まで詰め詰めのテキストでは疲れます
そのため、<br>で頻繁に改行する事で、見易さを追求した訳です。

ちなみに、横まで詰め詰めだとこんな感じ(↓)になります。物凄く読みにくいですよね、、、


ちなみに、<p>タグと<br>タグの違いが分かっていない方にご説明しておくと、<p>は段落、一つのまとまり、を示すものであって、<br>は改行を示します。逆に、<br>タグをぐだぐだと並べて、テキストの体裁を整えているところがありますが、SEOの観点からは、<p>タグを重要視しますので、しっかり区別して下さい。このサイトは、ご覧の通り、<br>タグをかなり頻繁に使用しています。グレーの文字色を使う事で、かなり読みやすさは上がっていますが、そうではあっても、横まで詰め詰めのテキストでは疲れます。そのため、<br>で頻繁に改行する事で、見易さを追求した訳です。

また、2カラム(このサイトのように、2段組のデザイン)、3カラム(3段組のデザイン)のサイトで、
それぞれのカラムの境界線があいまいなサイトがあります。
こういう事をしてしまうと、どこまでがそのカラムの中のテキストなのか分かりづらいです。
(これを避けるため、当サイトでは、右のカラムは丸枠囲いをしています


逆に、テキストデザイン、情報デザインをしっかりと考えているな、というところは、
この横幅の使い方が実に上手いのです。
特に、白の空間を間に入れる事で、読みやすさを演出しています
(テキストデザインの上手いサイトは、CSSの扱い方を良く知っている作成者の場合が多いです)

また、全体の横幅についても一言。
全体の横幅を全く指定せずに、サイト構成を行っているサイトは論外です。
大体、ウェブデザイン論として、横幅のサイズは以下の2点になります。
1.パーセンテージ指定
2.ピクセル指定

それぞれ一長一短がありますが、
パーセンテージ指定の場合は、見る人のディスプレイ環境によって
ブラウザ側が自動的に幅調整を行いますので、横幅をキッチリ指定しない場合は1。
逆に、当サイトのように、ぴったり一致しないと、
デザインが大きく崩れる場合は、2のピクセル指定を選ぶ事になります。

ウェブデザインを良く知っている人で、この横幅という事を重要視しない人はいません。
というより、デザインを行う上で、まず第一に決めなければならないのがこの横幅です。

もう一度、あなたのサイトの横幅、見直してみましょう。

次の講座は、

【CROSS-STYLEとは】
「ウェブデザインとインターネットマーケティングの繋がりを解説したサイトがこれまでにあっただろうか?」
CROSS-STYLEは、そんな小さな「?」から生まれた、クールなウェブデザイン講座とネットマーケティング・SEO講座をメインとしたサイトです。

【お役立ちツール一覧】

【Googleサイトマップを簡単に作る方法】
サイトマップラス(100ページ以下のサイトのみ)

Powered by SEO対策

500ページ以下のサイトは、Googleサイトマップの登場による、SEOの大変革の一番下に記載したGoogle Sitemap Generatorを活用下さい。


【外部リンク先を知る方法】
Yahoo!Site Explorer(yahoo.com)
Yahoo!でどこからリンクされているかを知る方法。
グーグルは、グーグルアカウントを取得し、ウェブマスターツール>サイト選択>サイトへのリンク、で外部リンクを確認出来ます。


【検索需要の総数を知る方法】
キーワードアドバイスツール(無料登録ドットコム)
オーバチュア(現在消滅)情報を元に、需要と供給の指数であるKEIを知るためのツール。
キーワード最適化ツール(グーグル)
グーグルによる「検索用語」についての情報を知るためのツール。


【超速で上位表示を可能にする魔法】
Yahoo!ビジネスエクスプレス
「ヤフカテ登録サイト」になれる!
クロスレコメンドJエントリー
カテゴリ登録申し込みをして、ウェブの更なる価値向上を!個人非営利サイトでもOK!


【オススメアフィリエイト】
A8.net(ジャンルの豊富さNo.1!)
バリューコマース(何故か成約率高し!)
リンクシェア・ジャパン(大手企業がズラリ)
アクセストレード(稼ぎ頭と言えばココ!)
バナーブリッジ(2ティアを狙うなら!)
アドリンク(ちょっとだけマニアック?)
インフォカート(情報商材を売るなら!)

【CROSS-STYLEの人気コンテンツ】
アフィリエイトでプラス10万円を目指す旅
自分の大切なウェブサイトが収入を生んでくれる、これ以上の興奮と感動はありません。あなたのウェブサイトを、収入を稼ぎ出すクールウェブに!

最終結論!ドメインとレンタルサーバの最適解!
世界に一つしかない、「あなただけのサイト」を持つためのアドバイス決定版!ドメイン取得の裏事情や、レンタルサーバを借りる際に考えるべきTipsを一挙大公開!

【オススメ本ジャンル別】
ウェブデザイン
HTML/CSS
インターネットマーケティング
SEO/SEM
ウェブサイト総論
アフィリエイト

【リンク集】
ホームページ作成に役立つリンク集
サイト作成のヒントは、きっとここにある!

相互リンク募集してます!
あなたのサイトとCROSS-STYLEを、相互リンクしましょう!ホームページ作成やアクセスアップ、SEOなどなど、インターネットに関わるサイトを大募集しています!

【メールはこちらまで】
「これの解説をもっと詳しく!」「これが分からない」「ここはこうしたら?」などなど、質問・感想・激励・叱咤・クレーム(笑)は、柊優にメールを!アドレスは、site(アットマーク)cross-style.comです。((アットマーク)の部分を@に直して送って下さい)

ワンポイント画像

更新が無いウイルス対策ソフトと言えば「ZERO」!
柊も使っているVaioTypeTがはソニースタイルで!
WebデザインにはAdobeソフトがオススメ!



クールなウェブデザインと圧倒的なマーケティングテクニックを手に入れる術、
全ては今、CROSS-STYLEから始まる・・・

Copyright (c) 2006-2008 CROSS-STYLE All Rights Reserved.