Temper
ダウンロードはコチラから→http://www.ex-designz.net/template/tempdetail.asp?temp_id=737
スクロールバー領域は常に確保するべき？
ページコンテンツを中央揃えにして表示するとき、もちろんセンタリングするわけだけど、この時、ページコンテンツが短いと、右スクロールが無く、コンテンツが長いと、右スクロールの入る。
これによって、時によってページ全体の位置が左右にポコポコ動いてしまうわけ。この動きが気にならないページ時もあるが、サイトによっては顕著に現れてしまって、気になる事がある。
この問題の解決方法としては2種類ある。ｊQuerｙなどをすでに読み込んでいる場合には、JavaScriotにて解決。もう一つの方法は、CSSの
overflow-y: scroll;
による方法。このプロパティによって、スクロールバーが常に表示されるようになって、解決する。
もともと、overflow-yはIE用のプロパティだけれども、CSS3にて採用される予定なので、モダンブラウザにはしっかり採用されている為、普通に使えるね。
home_fitness_stretching_spe016
ダウンロードはコチラ→http://www.leadcamp.com/content/2009/08/26/home-fitness-stretching-free-wordpress-template-themes/
JavaScriptをoffに設定しているユーザーについて考える
まず、JavaScriptをOffにするユーザーっていったいどんな人かを考える。まず、一番に考えられるのは、Web閲覧を通して何かを改ざんされるのが怖いからOffというセキュリティーを考えるユーザー。二番目に考えられるのは、サクサクと早い動作・表示を好むユーザー。ま、この他にも理由はあるだろうけど、この２つが最も多いと考えられる。これらを考えると、ページに何かの効果を追加する場合に、JSで簡単に実装できるものをわざわざ入れ組んだHTML＋CSSで作るよりは、JSで手儀座良く解決したらどうだろう。これによって、最終的にはコード的にもオプティマイズされたものが出来上がるのではないだろうか？
まず、理由として、セキュリティー優先ユーザーに対しては、JSをOffにしているユーザーへのメッセージを出すことによって、ON \OFFの選択権を与えることができるし、あえてそこでOffを選ぶユーザーの事を考え、JSを廃止し、無駄に肥大化したHTML＋CSSベースのページを全ユーザーに割り当てるのは、元も子もない気がする。それに、速さ優先ユーザーは、むしろ、この無駄な読み込みや、動作を省いたページを読ませることによって彼らのスタイルに合った表示をさせる事ができるわけ。どうだろう。。。
カラフルにスッキリとした感じ
ダウンロードはコチラ→http://www.rickyswebtemplates.com/tfm/new_templates/webtemplates194.zip
グラデーションをＣＳＳで
今日は面白いサイトを見つけたので紹介。グラデーションをＣＳＳで実現しようってもの。これは、ＣＳＳ3で実装されるかも？って機能だけど、それをちょっとＪＳとかの力を借りながら、実現する方法を詳しく紹介しているよ。但し、英語・・・。Speed Up with CSS3 Gradients
Free Template #03
http://www.zymic.com/free-templates/5/live-preview/
404errerに対応しよう
一般ユーザーだと、エラーページの出た瞬間にビビってしまって、以前閲覧していたサイトに戻ろうなどと思う人はまだそんなに多くないと思う。
404エラーなんて、単にページが見つからないわけだから、何もそこまでユーザーをドキっとさせる必要もない。適当なページを用意して、サイトマップや、ＴＯＰページに誘導してあげるのが一番だろう。大抵の場合は、ドメインのルートディレクトリ内の.htaccessファイルをいじるだけ。(ない場合は作成してね。)
細かい説明はこちら→.htaccessを用いて404エラーのページをオリジナル化する設定例
Gold temptation paradise
http://www.openwebdesign.org/viewdesign.phtml?id=5401&referer=%2F
overflowプロパティでもっと便利に。
つい最近になって私もoverflowプロパティが便利な事に気がついた。今日はとっても勉強になる記事の紹介。とっても使えるoverflowプロパティ。その使い方色々。｜CSS HappyLifeコード簡潔になるのはいっつも歓迎！！
Dog Club
http://www.mytemplatebox.com/livepreview/27/CSS-Templates/1/Pet/14/Dog-Club.html
フォームを使いやすくする。
フォームを使うとき、ラジオボタンや、チェックボックスなんか特にそうだけど、ボタンの部分だけじゃなくて、そのボタンに該当するテキスト部分をクリックしても、チェックが入るようにしたり、テキストエリアなど、その他ユーザーが記入をする部分も、その題名をクリックしたときに、カーソルが自動にボックスの中に現れるようにすると、ユーザーフレンドリーだよね。
これには、label要素を使う。label要素の使い方には２種類あって、
暗示的ラベル付けと呼ばれている物は、入力または選択コントロールのあるものを、ラベルタグ<label>で囲む物、明示的ラベル付けと呼ばれるものがある。
明示的ラベル付けの場合は、以下のようになる。
<input type="text" name="tel" id="tel" /><label for="tel">電話番号</label>
一般に、暗示的ラベル付けはＩＥに有効じゃないから、明示的なラベル付けが一般的。
Darkforest
http://www.mytemplatebox.com/livepreview/534/CSS-Templates/1/Personal-blog/13/Darkforest.html
いろんなlightboxおよびイメージギャラリー
今日は、いろんなlightboxおよびイメージギャラリーをまとめて紹介してくれているサイトをご紹介。
57+ Free Image Gallery, Slideshow And Lightbox Solutions
いやあ、こういうのって探し出すときりがないよね。中には知ってる。うんうんっていうのもあったけど、おお！！って思うのもあって、なかなかいいよ。
templates 4945
http://www.freewebtemplates.com/download/templates/4945
HTMLもCSSも書いたのに画面に何も表示されない？
最近新人教育を担当しているんだけど、私達では思いもよらない所に引っかかってにっちもさっちも行かなくて、困っちゃっていた人がいたので、ちょとした紹介。同じ現象が起きたら、ちゃんとチェックしてね。
まず、floatなどでカラムを作らないと思った彼は、ＨＴＭＬのタグを作成後、ＣＳＳを作成。ブラザでチェックしたところ、何にも表示されない！！彼は、それぞれのカラムに背景色をしていしていたから、それぞれの背景色がカラムと一緒に現れるはずだと思っていて、きちんと書いたのに・・・と半泣き。。。だって君、ＨＴＭＬ側のタグの中身が空なんだよ:) ブラウザは、中身がないから、何にも表示しなかったんだよ。せめてtestだけでも良いから記入しないとね。それか、実験的にＣＳＳでheightをしてあげるとかね。つまり、一生懸命ＨＴＭＬのタグを書いても、ＨＴＭＬの中身が空だと、なんも表示されないよね。気をつけて。
template14
ダウンロードはコチラから→http://www.2createawebsite.com/freetemplates/template14.zip
カラーチャート表
コーダーといえば、一応デザインはデザイナーさんに任せる事がほとんどだけど、修正案件とかだと、あ、適当にお願いします！って事も結構多い(汗)
一応ながらも、カラーコーディネーターとっといて良かったと思うけど、やっぱ便利なツールは使っとかないとね。今日はColor Scheme Designer 3の紹介。かなり使えるよ。
Business web template #26
IE6に困ったときの条件分岐
ＩＥ6はどうしても他のブラウザーと比べて手のかかることが多い。ここで、ＩＥ6にのみＪａｖａＳｃｒｉｐｔを読ませたり、ＨＴＭＬ自身を違う物を読ませたい時がある。ここで便利なのが、ＨＴＭＬ上の条件分岐。参考になるサイトは以下。
Internet Explorerの条件分岐コメント | 謎解きウェブ | BLOG × WORLD ENDING
IE の条件分岐を使ってブラウザが IE だった場合の処理を記述する
ちなみに、これと、ＣＳＳハックを合わせれば、かなりの問題は解決できるのでは？？
Friday, June 4
7