efwerg
Moxbitさんが"僕がWebデザインの外観において気をつけている、使っている5つの技法"というのを書いていたので、それに触発されて全体的なデザインのテクニックを紹介したいと思います。

続きは以下からどうぞ。


記事の読み込み中...
読み込みが完了しない場合は、JavaScriptが有効になっているか確認してください。
01.リンクする部分は、とにかく大きく
we
Connect : は本日12月23日に現バージョン始まって以来のやや大規模なアップデートを実施しました。

それで重視したのが、
リンクする部分を、もっと広くする
ということです。

tech. 01の画像を見るとわかると思いますが、これまで以上にリンクできる場所を増やしました。最近流行(?)のタッチパネルで操作するスマートフォンでも押しやすくなる利点があります。Connect : では多少装飾をしています。以下サンプルです。

CSS
#test1 a{
width:100%;
display:block;
}
HTML
<div id="test1"><a href="#">適用される部分</a></div>

基本的にはサブカラム部分での利用を推奨します。
02.たかが1pxでも、美しさの1px。
hnkvjh]
アップデートによって変わった部分は1pxの追加もあります。たかが1pxでも、使いようによっては美しさの1pxになれるものです。リストの一項目の下に1px追加してみましょう。以下サンプルです。
CSS
ul#test2 li{
display:block;
border-bottom:1px solid #666666;
}
HTML
<ul id="test2">
<li>適用される部分</li>
</ul>

横一列のリストにする場合は
width:(任意);
float:left;
をお忘れなく。
03.なるべく画像を使わない
wefwef
CSSを覚え始めたときにすぐにCSS3に突き当たってしまった管理人のせいかもしれないですが、Connect : では一般サイトとくらべて画像がすごく少ないです。記事部分は別として。CSS3では文字に影をつける、枠線を丸くする等一通り画像でいままでやってきたことが実装されているので、それらを利用します。以下サンプルです。
CSS
#test3{
/* 文字に影をつける */
text-shadow:#666666 2px 2px 6px;
/* 枠に影をつける */
box-shadow:0px 0px 2px #666666; /* IE9,Opera */
-moz-box-shadow:0px 0px 2px #666666; / * Firefox,Camino */
-webkit-box-shadow:0px 0px 2px #666666; /* Safari,Chrome */
/* 枠をの角を丸くする */
border-radius:10px; /* IE9,Opera */
-moz-border-radius:10px; /* Firefox,Camino */
-webkit-border-radius:10px; /* Safari,Chrome */
}
HTML
<div id="test3">適用される部分</div>

結構便利なので是非使ってみてください!

border-radiusの部分指定についてはブラウザ別に指定手順が違ったりするのでググるなりして下さい。
04.visitedはいらない、hoverは大切。
dsewf
書いている通りConnect : では利用していないため、Googleのキャプチャを持ってきました。

あらかじめ読んだページを覚えておく必要があるか?という疑問に対し、たいていの人はノーと答えるでしょう。そして、多くのサイトでどうしても浮いてしまう配色がa:visitedには割り当てられています。もしa:visitedを利用するにしても、先ほど紹介したtext-shadow等の技で美しく表現していただきたいと思います。以下サンプルです。
CSS
#test4 a{
color:#666666;
}
#test4 a:hover{
color:#333333;
}
HTML
<div id="test4"><a href="#">適用される部分</a></div>
繰り返しですが、a:visitedを実装する場合は美しく!!
05.PC用をスマートフォンでも。
dwefwe
今現在、残念なことにConnect : には2つの顔があります。1つは普通のブログとして、2つは、スマートフォン用として。ぶっちゃけた話をすると、スマートフォンレイアウトがとても嫌いです。iPhoneのUIを意識しすぎなのと、実装したはいいが、利用するユーザーに編集権がない(livedoor,FC2等)など、運営者の都合で勝手に実装され編集権を持たせないという考えはどうかと思います。なのでhtml/cssレベルでの編集の実装をConnect : は要求しています。

近々Moxbitさんが2カラムでのスマートフォン対応を実施するそうなので、どのようなデザインになるか楽しみです!

では、takimuraでした。
今回紹介したサイト
僕がWebデザインの外観において気をつけている、使っている5つの技法 | Moxbit
http://www.moxbit.com/1012211
iPhoneページの最適化とアプリのアップデートについて : livedoor Blog 開発日誌
http://blog.livedoor.jp/staff/archives/51466938.html

Twitterにシェア


管理人takimuraのTwitterでは幅広い情報を提供しています。お気軽にフォローをどうぞ