http://commitlab.com 忘れっぽい駆け出しデザイナーのメモ帳 Thu, 06 Nov 2008 07:26:55 +0000 http://backend.userland.com/rss092 ja webサイトのページが下に長くなるにつれユーザービリティ(って使ってみたかった)への配慮として、直接ページの先頭に戻ってこれるように"ページトップへ戻る"なるボタンやリンクが必要になってきますよね。 で、それについてなんですが、サイトを作るたびに結構悩むんですよね。どう表記したら、より伝わりやすいのか？と。できるだけ多くの人に一目で理解してもらいたいですしね。 まぁサイト全体からみれば、とても小さな問題なんですけど。 たしか僕が一番最初に趣味で作ったサイトは、"TOP PAGEへ"と書いたボタンを使ってました。しかし、それを押してもサイトのトップに戻らず、そのページの先頭(トップ)に戻るだけです。それを押したほぼ全ての人が混乱したことでしょう。(実はその近くにHOMEというボタンもあった) まぁそんな話は置いておいて、とりあえず大手サイトがどのように表記しているかをゆるーく調べて見ました。 ページのトップへ系 top of page page top トップ ページ上部へ ページ上部へ戻る ページトップへ ページトップへ戻る ページの先頭へ ページ先頭へ ページトップへ戻る このページの最初へ このページのトップへ このページの先頭に戻る このページの先頭へ戻る 日本語恐るべし。たぶん「上へ」とか「上に戻る」など、まだまだありそうですね。 今現在、僕としては「ページの先頭に戻る」表記することが多いです。 http://commitlab.com/20081106/topofpage.html おまけでついてきたよっ！って言いたいだけです。 お久しぶりの更新で、あまりに酷い人の褌で相撲っぷりですが嬉しかったのでつい。 右のサンプルみたいな写真が500点ついてくるんで、僕のようなインドア派で手持ちの素材が少ない人にはピッタリですね！ 利用に当たっては、用途がwebサイトのデザインのみに限定されるものの、1380円で1000px前後の素材が500点もついてくるっておトクですね。今月号は紙のほうがオマケです。 こんな過疎サイトでアフィっても意味ないからアフィりませんが、気軽に使える素材が少ない人はamazonとかで買ってみたらいいんじゃないかな。 http://commitlab.com/20081104/webc12.html Firefoxのアドオン、web developerといえばサイト制作に便利な機能がてんこ盛りということで有名ですよね。もちろん私も日常的に使っています。そんななかweb developer(面倒だから以下wd)の"ツール"に三つほどのwebサービスを追加したので、忘れないように書いておきます。 "ツール"にwebサービスを追加すると何が良いかというと、いちいちお気に入りから利用したいwebサービスのサイトを開いて…という手間を省く事ができるのです。たぶん僕は死ぬまであと何回もこれを繰り返す事になるんで(まぁ明日生きてるかもわからないんだけど)、1秒でも早いとうれしいよね！ライフハックとかと同じノリだよ！ ではwdの"ツール"を開いて、"ツールを編集する"クリック。ウィンドウが開いたら、"追加"を押します。ツールタイプはURLを選択して、URL:の中に下にある利用したいサービスの http://～～= までを入れます。以上！ アクセシビリティチェック(HAREL) http://harel.nttdata.co.jp/check?uri= NTTデータが提供するサービス。採点形式でチェックしてくれます。 点数低っ！次作り直す時は頑張ります。 SEOアクセス解析(SEO TOOLS) http://www.seotools.jp/001_seoanalyze/?url= webサイトをSEO的観点から採点しくれるサービス。 ちなみにうちは26点でした。いやーお恥ずかしい。 SEO検索エンジン (Pythagoras) http://www.pythagoras.bz/index.php/default/detail?url= webサイトのキーワードや全体的なデータが見れるサービス。 見にくいですけど、このブログがまだwordpressのデフォルトのテーマ(classic)を使ってた頃の画像になってますね。 web戦闘力(影響力)測定(Web Scouter) http://ja.webscouter.net/info.phtml?u= 外部要因からサイトの戦闘力を算出するサービス。(ブックマークから簡単に計れますけどね) このブログは89。良く言えば一番最初に天下一武道会に出た悟空と同じくらいらしい。 FC2キーワードチェッカー http://seo.fc2.com/keywordrate/index.php?m=ct&optid=&url= FC2のキーワード専門のチェッカー。最適は5％的なアレですね。 とくにこだわった事がないので何も言えないです。 他に何かオススメがありましたらぜひ教えてください。 http://commitlab.com/20080929/wdhst.html 題名にはあまり意味は無いです。たぶん書いてる本には書いてると思います。なので正確には 「僕の持っている 教科書には書いてない　か、僕が見落としている XHTMLとCSS」 なのでニュアンス的にはちょっとした小技みたいな感じで受け取ってくれるとこちらも気が楽ですけど、いかがなものでしょうか。さて情けない逃げ口上もすんだことですので、本題に入ります。 テキストリンクのアンダーラインをボーダーで表現する リンクのアンダーラインを自分色で染めたい(調整・装飾したい)場合ってありますよね。そういうときはボーダーでアンダーラインを表現します。ですのでボーダーの幅やスタイル(実線、ドット、ダッシュ等)等で表現が可能です。(その他手書き風等のオリジナルの"飾り"を指定する場合は背景でやります) 1.が普通に指定したアンダーラインのあるリンク 2.飾りがnoneでボーダーの下が2pxのdotted 2.hoverの飾りがnoneでボーダーの下が2pxのsolid 文字と下のボーダーとの距離はline-heightかheightで調整します。その場合はdisplay: block;にする必要があるので少々クセがあります。 IEデフォルトのツールチップを表示させない html内に＜img＞で画像を表示させた場合は必ずaltを指定する必要があります。このブログはaltが適当なんでけしからんです！最近ではもっぱらユーザビリティやSEOの要素として扱われる事が多いですが、純粋にちゃんと書いてた方が後々ソースを見直したときにも理解が早いですよね。 しかし色んな人の思惑や意図が絡み合って、どうしてもaltが長くなってしまいツールチップの表示が邪魔になることがたまーにあります。 そんなときは＜img＞の中にtitle=""を入れましょう。そうすることでツールチップが表示されなくなります。ですが、本来の意味で考えると本末転倒になってしまうので積極的にはオススメできません。 DTDによる画像の下に出現する意図しない隙間を埋める 僕がサイトを作る場合、基本的にXHTML 1.0 Strictで作ります。そうなると右の画像のようにFirefoxでは画像の下に意図しない隙間が出来てしまいます。右の場合は特に問題ないのですが、装飾要素のある部位だとこれは致命的です。なのでそういうときはCSSでimgに対してvertical-align: bottom;を指定してあげます。こうすることで画像の下に表示されていた隙間は無くなります。 Fiirefoxの縦スクロールバーを常時表示させる Firefoxはサイト全体が画面内に収まる場合はスクロールバーを表示しません(IEは縦スクロールバー常時表示)。縦にスクロールの必要がある場合にのみスクロールバーが表示されるので、制作側の大きいモニタでは問題なくても、一度に表示できない小さいモニタとFirefoxを使ってサイトを見ている訪問者は、ページ移動の度にスクロールバーが表示・非表示と切り替わってしまいます。 そうなるとページ移動の度にスクロールバーの幅だけ横にズレてしまうので、見ている人に何とも言い難い不安定感を演出してしまいます。サイトの縦幅が全ページ同じなら気にすることもないのですが、なかなかそういう風にはいきません。ですのでそういうときにはCSSに html>/**/body { overflow-y:scroll;} を記述することによってFirefoxでの縦スクロールバーの常時表示が実現します。これはIE7以外のモダンブラウザに適用されるようにCSSハックを利用しています。そしてこのハックはW3CのCSS Validatorには通りませんので注意してください。そもそもoverflow-y自体がCSS2.1に存在しないので最初から通らないんですが。 頑張って作ったサイトは自分の作品ですから、できるだけ色んな人に綺麗な状態で見てもらいたいですよね。 またなんか思いついたら書いてみます。 http://commitlab.com/20080918/xhtmlcss1.html コリスさんのところで知ったのですが、IETesterがアップデートしましたね。最近ではIEでのチェックは全部IETesterでやってたのでうれしい限りです。いまいち安定していない所もあったし改善されていたら嬉しい。 そういえば知らなかったんですが、言語で日本語も選択出来るんですね。 http://commitlab.com/20080909/ietester23.html CNET JAPANのニュースにフォトレポート(リンク先は新型PSPのフォトレポート)という形式の記事があるんだけど、そこでは写真上ににカーソルが乗った瞬間に、「写真をクリックすると次へ移動します」みたいなのが写真の上に出てくるんです。で、それを見てたらふと「写真をクリックすると拡大します」みたいな感じでも使えるような気がしたので、真似したくなった。 コピック フォトレポートの画像周辺のソースをざっと見ただけなんではっきりとは言えないんだけど、＜a＞と＜img＞の間に空spanが入ってるんでなんとなくやり方がわかったようなわからないような。以前Web Designer WallでやってたCSS Decorative Galleryみたいなのの延長線上+αかなぁとは思うんだけど確証なし。でもまぁあんまり難しい事は出来ないので、簡易バージョンで再現してみました。 では、これの作り方ですが、まず という二枚の画像を用意します。はい、これでもう8割方終わりましたお疲れ様です。 もしかして･･･と思った方！そのとおりです！あとは一枚目の画像をaのbackgroundに指定して、a:hoverのbackgroundに二枚目のアナウンスが出てる方を指定して完成です。 いやー出来た出来た。なんか釈然としないけど。 [code lang="css"] a.ann { display: block; overflow: hidden; width: 230px; height: 142px; background-image: url(一枚目の画像); background-repeat: no-repeat; background-position: center center; text-indent: -999px; } a.ann:hover { background-image: url(二枚目の画像);} [/code] CSSでのロールオーバーの応用ですね。たぶん2枚の画像を上下なり左右なりに並べて一枚の画像にして、hoverでbackground-positionを一枚の長さ分指定しても出来ると思う。 でまぁ結論としては、text-indent:-999ってあんまり行儀がよくない気がするし、そもそも画像を編集するのも量が多いと面倒だし枚数分だけ個別にCSSを書いてやる必要があるので、大量に使うことがわかってるならこれでやらない方がいいですね。まぁこういう感じのをピンポイントで即座に求められた時にいかがでしょうか。 http://commitlab.com/20080907/cssde.html カンプ、またはモックアップ製作用のベースです。 IE7の中に10pxのグリッドが入ってます。「IEはいらねぇよ」って人もいるかと思いますが、まぁそう言わずに。 サイズは左から1100px, 1000px, 960px, 900px, 800px, 760px,と6種類が入ってます。あと縦は基本768pxなのですが、別レイヤー(初期不可視)で1200pxも用意してます。それをシフト押しながら上下に動かして好きな長さにしてください。ブラウザ無しのカンプでクライアントにOKを貰ったものの、実際作ってブラウザ上で見せたら「なんかイメージが違う」と言われたという経験は誰しも一度はあるんじゃないかと思います。まぁ私たちはブラウザを見慣れてるんで大丈夫なんですけどクライアントはそうとは限りませんし、イメージが違う原因は他にもある可能性は高いですが、視覚化できるものはしておいたほうが良いですよね。 私は最初からこれを元に作るってよりは、作ったものをこれに当てはめるって感じで使ってます。だいたいの人は自分用ライフハックみたいなのを用意してると思うので、まだの人は良かったらどうぞ。 レイヤー構成はこんな感じです。IE buttonフォルダは、ブラウザの左上にある"戻る・進む"ボタンが3パターン入ってるだけです。 iebasesize.zip(358 KB) http://commitlab.com/20080829/iebasesize.html お久しぶりです。なんか更新がとまってましたね。 何度か更新しようと思ったんですが、仕事の愚痴みたいな文章を書いては消してを繰り返してました。まぁとりあえず練習がてらに作ってたものからblogにのっけちゃいます。 お年寄りや、ブラウザの扱いに不慣れな人の為に、直接webページ内に”印刷する”ボタンを作ることもあると思います。今回そんな機会があったので数パターン作ってみた。 ぶっちゃけて言うとイメージソース(パクr…)はappleのサイトのアイコンを中心にその他諸々。でもやっぱ全然似てないんですね。てかこれプリンターに見える？大丈夫かな…ｗ　結構心配です。 使い方としては以前乗せた小さいPDFとかのアイコンみたいな使い方で な、感じを想定したサイズです。良かったら使ってください。 ちなみに上のロゴを変えました。今まではblogのテーマを画像を使わない縛りで作ってたんで、CSSでフォントをArial(たぶん)を指定してたんですが、blogや配布物等の全てのフォントをMyriadに統一しようかなって事で画像にしてみました。 まぁほとんど見た目は変わらないんだけどｗ 今使ってるwordpressのテーマは練習がてら&ベースとして作ったんですが、プラグインを調べて色々乗せていく間にミスって＜h1＞＜h2＞＜h3＞の次に＜h4＞を飛ばして＜h5＞が出てくるみたいな事になってるので、全部書き直したいんですけどね。 まぁ次は画像を上手につかって、もっと見栄えのするテーマが作れたらいいなと思っております。 http://commitlab.com/20080827/miniprinter.html yamadaさんのところで紹介してる奴を見て触発されて作ってみました。 なんかシャンプーハットに見えてきたけど、CDですよ。 なんか円の上らへんとかギザっちゃってるしもうあれなんですが放流。 下の段はなんか安いCD-Rみたいな感じの色ですね。 http://commitlab.com/20080810/clcd.html なんかFirefox2.0系のデフォルトスキンぽいのをイメージしたボタンと、ic○at風のアイコンです。 ich○t風というかなんというかの方は適当に中身を入れようかと思ったんですが、そうなると数種類用意しないといけないし逆に使い方が限られそうなので無地で。 必要に応じて各々で中身いれてください的な方針の方が、良いのかなと思ったり。 http://commitlab.com/20080809/clb.html