カテゴリー「ウェブサイトテク」の8件の記事

2008年3月25日 (火)

海外英語圏用サイト

ユーザビリティ実践メモさんのエントリ-「そのサイトの「国籍」を明らかに」を見て英語圏で商品を販売しているネットショップは下記の対応を薦めています。

ユーザが異なる国のサイトへ流入する可能性があることを想定し、

  • ヘッダーエリアのロゴの近くに国名を挿入する
  • ヘッダーエリアの右の目立つ位置カントリーセレクター(国を指定することでその国のサイトへリンクできるプルダウン等)を配置し、そのサイトがどの国のものなのかを明確にする

のいずれかの対応を取ると良いでしょう。

そういえば「YouTube」の右上に国旗がありますね。

| | コメント (0)

サイトの横幅

ミクシィとYahoo!が950pxなので、950pxがスタンダードになったのかと思ってましたが960pxの方がベターっぽいです。

960pxを基準にする理由としては、下記の2つが挙げられています。

  • 最近のモニターは1024×768の解像度をサポートしており、960pxを表示するには十分である。
  • 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。

>>ページの幅960pxを基準にして、設計するグリッドデザイン | コリス

960pxの場合は約数が多いですし、950px÷2=475pxと切りが悪いですね。

[参照]デモページ
http://960.gs/demo.html
左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることができます。

| | コメント (0)

2008年2月20日 (水)

[CSS]3列レイアウトfloat:left

3カラム(列)のレイアウトを作りたかったのですがうまくいかず調べてみると、はじめに2つ(メイン+サイド)をくくらないといけないようです。

Cssfloat
>>小粋空間:3カラムレイアウトで中央カラムを(X)HTMLの最初に記述する

3column
>>3カラム(3段組)レイアウト

くくらなかったからうまく3列表示にならなかったのか。

| | コメント (0)

2008年2月18日 (月)

[background-image:url(相対パス)]CSS外部ファイル化による相対パスと絶対パス

[ファイル構成]
top.html
├css/style.css
└img/logo.gif

[top.html]には
<link type="text/css" rel="stylesheet"href="css/style.css">
と外部ファイル[style.css]を読み込むように設定します。

そこでCSSファイル[style.css]からbackground-imageでロゴ[logo.gif]を呼び出す場合、どうやら[top.html]でなく[style.css]から見た相対パスを指定しないといけないようです。

○background-image:url(../img/logo.gif);        //ピリオド2つ
×background-image:url(./img/logo.gif):                 //ピリオド1つ

絶対パスならhttp://-----.com/img/logo.gifのままですがのちのちサイト移動するときとかを考えると相対パスの方が良いと思います。

このエントリーを含むはてなブックマーク Firefoxアドオンの「Firebug」は見やすいのでCSS/HTMLチェックには便利です。

| | コメント (0)

2008年2月13日 (水)

[HTML]入力フォームのユーザビリティ

ウェブサイト入力フォームはヤフーJapanをはじめ多くの企業が会員ログイン、郵送先、URL送信に用いております。ただ申し込みの途中であきらめる人はアメリカでは平均して54%なんだそうです。
>>申し込みフォームに入力し始めた人の 54%が入力を途中でやめている

  • サイトのコンテンツ自体が足りない(価値の欠陥)
  • 価値のあるコンテンツが探しにくい(ナビゲーションが悪い)
  • 価値のあるコンテンツは見つかったがよくわからなかった(プレゼンテーションが悪い)
  • サイトに信頼がなかったために使うのをやめた(信頼性の欠陥)

なぜ途中であきらめるのかというと次の4つのどれかに当てはまるそうです。つまり「ウェブサイトの欠陥」なんです。

客観的に見て当たり前の話なので僕も「@kaigai」で早速取り入れました。

Ws000000
たしかにアドレスだけなのに「リセット」ボタンは必要ないですね。

Ws000002
このようにボタンが1つになり、よりユーザーに易しくシンプルになりました。

| | コメント (0)

CSSリセット

InternetExplorer、Opera、FirefoxとWebブラウザ間によって表示のズレが生じるが、CSSを初期値設定することで多少は解消されそうです。
>>1ピクセルのずれも許せないWebデザイナのためにResetting Again

CSSで指定する値の一斉初期化を提案している。1ピクセルたりともデザインがずれることが我慢ならないWebデザイナにとっては、まず出発点として CSSで指定する値の初期値を揃えてベースラインを整えることが大切というわけだ。初期値を揃えてしまえば、揃った分だけブラウザごとの奇っ怪なCSS設 定を減らせる。

以下画像を転載

/*--------------以下転載---------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
    margin:    0;
    padding:    0;
    borer:    0;
    outline:    0;
    font-size:    100%;
    vertical-align:    baseline;
    background:    transparent;
}
body{
    line-height:    1;
}
ol, ul{
    list-style:    none;
}
blockquote, q{
    quotes:    none;
}

/* remember to define focus styles! */
:focus{
    outline:    0;
}
/* remember to highlight inserts somehow! */
ins{
    text-decoration:    none;
}
del{
    text-decoration:    line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table{
    border-collapse:    collapse;
    border-spacing:    0;
}
/*--------------転載終了---------------------*/

もしかしたら転載ミスがありましたらコメントでお知らせ下さると助かります。このエントリーを含むはてなブックマーク

| | コメント (0)

2008年1月20日 (日)

[サイトリンク]google検索結果コンテンツ表示一覧

Ws000000_2

このようにGoogleの検索結果に表示することをサイトリンクというそうです。
>>検索結果の下に表示されるリンク リストを編集するにはどうすればよいですか

現時点では、サイトリンクは完全に自動化されています。Google ではサイトリンクのアルゴリズムを改善できるよう常に努力しており、将来は、ウェブマスターによる入力を取り入れる可能性もあります。

ウェブマスターツール(サイトマップ)から作っているのかな。

[追記リンク]
Googleウェブマスターツール完全マニュアル

| | コメント (0)

2007年11月24日 (土)

引用や参照などでCSSやPタグを使わず"HTMLタグ"blockquote"のstyle指定する方法

ブログを書いていていつも引用など"blockquote"タグを使うときに枠線や背景を指定したいと思って調べてみたら、ブログの玉手箱さんのところで紹介されていました。備忘録も兼ねてますので完コピですみませんm(_ _)m

<以下転載>
背景色をつけるだけなら、background-color属性で

<blockquote style="background-color:#e1f6dd;">背景色をつける</blockquote>

背景色の上下左右に余白をつけたいなら、padding属性で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;">背景色の上下左右に余白をつける</blockquote>

背景色の周りに線をつけたいなら、border属性で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border:1px solid #629666;">背景色の周りに線をつける</blockquote>

周りの線を丸点線の太線にするなら、dotted属性値で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border:5px dotted #629666;">周りの線を丸点線の太線にする</blockquote>

周りの線を角点線の太線にするなら、dashed属性値で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border:3px dashed #629666;">周りの線を角点線の太線にする</blockquote>

周りの線を影付き風にするなら、border-top,right,bottom,left属性で

<blockquote style="background-color:#e1f6dd;padding:15px 15px 15px 15px;border-top:1px solid #629666;border-left:1px solid #629666;border-right:3px solid #629666;border-bottom:3px solid #629666;">周りの線を影付き風にする</blockquote>

[アレンジ1]

<blockquote style="background-color:#FFCCFF;padding:15px 15px 15px 15px;border:5px dotted #FFB6C1;">周りの線を丸点線の太線にする#FFB6C1</blockquote>

[アレンジ2]

<blockquote style="background-color:#FFCCFF;padding:15px 15px 15px 15px;border:3px dashed #629666;">○○<br />■<u>特色</u><br />■<u>連結売上高</u>(2008//)<br />億円<br />■<u>時価総額</u>(2008//)<br />$ = 兆円(1$=100\)<br />■<u>株価</u><br />$</blockquote>

[アレンジ3]

<blockquote style="background-color:#FFCCFF;padding:15px 15px 15px 15px;border:3px dashed #629666;">○○<br />■<u>特色</u><br />■<u>連結売上高</u>(2008//)<br />億円<br />■<u>時価総額</u>(2008//)<br />億円<br />■<u>株価</u><br />円(単元株)<br /><img src="#" border="1" alt="" /></blockquote>

[追記]2009/1/11
世界四季報: 超ブログ術
CSSを使わずにblockquoteタグを装飾するstyle指定 | IT幕府

| | コメント (0)