「web_design」タグアーカイブ

正しい“copyright”の書き方

サイトの下の方なんかにある“©copyright 200x なんちゃら. All right reserved.”って表記。

何となく他のサイトなんかで見るのを真似てたんだけど、今さらながら「これって正しいのか?©の後にcopyrightって、なんか同じこと2回言ってね?」とか何とか気になって、ちょっと調べてみました。

続きを読む 正しい“copyright”の書き方

このエントリーをはてなブックマークに追加
はてなブックマーク - 正しい“copyright”の書き方
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

html内に余計な記述をせず、floatを解除するcss

cssのtipsでは久々に目から鱗だったので、自分メモ。よくある左にナビゲーション左に本文を(または逆に)配置するレイアウト。左右に寄せたい要素float:left;またはfloat:right;を指定した場合、背景が消えたり、内容より短い高さになってしまう。flotで寄せた内容は親要素に含まれず、親要素にhightを指定していないとfloatした小要素より短くなってしまう仕様によるもの。

今までは、clear:both;を指定した<br />や空の<div></div>を最下部に入れて処理してたけど、空のdivやら意味のない要素をhtml内に記述するのはなんだか気が引ける。そう思って探してみたら、html内には余計な空要素等を追加することなく、cssだけで処理する方法が紹介されてました。

clearfixでfloatを解除 | d-spica

続きを読む html内に余計な記述をせず、floatを解除するcss

このエントリーをはてなブックマークに追加
はてなブックマーク - html内に余計な記述をせず、floatを解除するcss
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

CSSとpng画像1つだけで作るグラーデーションテキストエフェクト

これはなかなかいいアイデア。あくまでもテキストはテキストデータとして保持したまま、見た目だけグラデーション。 CSS見れば、「ああ、なるほど」って感じで複雑な事はしていない。発想がキラリです。

続きを読む CSSとpng画像1つだけで作るグラーデーションテキストエフェクト

このエントリーをはてなブックマークに追加
はてなブックマーク - CSSとpng画像1つだけで作るグラーデーションテキストエフェクト
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

ボックス要素のサイズを表示するブックマークレット“XRAY”

xray_t.png

久々に便利そうなブックマークレットを発見。調べたいページで登録したブックマークレットをクリックするとのボックス要素の、表示位置、サイズや、margin、padding、borderの上下左右の幅、positionやfloatの状態を表示。

XRAY :: for web developers

続きを読む ボックス要素のサイズを表示するブックマークレット“XRAY”

このエントリーをはてなブックマークに追加
はてなブックマーク - ボックス要素のサイズを表示するブックマークレット“XRAY”
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

タータンチェック柄の背景画像を生成できるサイト

Tartan Maker ストライプの背景画像を作成できるサイトStripe Generatorの作者がタータンチェックを生成できるサイトを立ち上げてます。古めかし雰囲気ですがしっかりajaxなインターフェイスで手軽にタータンチェックのタイル画像を作れます。

Tartan Maker – tartan pattern background ajax generator designer

web2.0っぽいサイトの定番となったストライプ画像は、あまりにどこでも使われてて今ひとつ使う気になれなかったんだけど、これはサイズや色で結構バリエーションに差が出ます。ギャラリーで公開されているパターンを見ると、懐かしい柄ばかりでもなく、色次第で今っぽい感じやサイバー(?)な感じもつくれるんだなと。

このエントリーをはてなブックマークに追加
はてなブックマーク - タータンチェック柄の背景画像を生成できるサイト
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

JQuery1.1.3リリース。が、ThickBoxがIE6では不具合?

JQuery_logo1_t.png

今月頭に「800%高速」とのうたい文句でリリースされたJQuery1.1.3。早速入れてみました。確かに早い、いままではページ読み込み後JQueryの処理が終わって操作が出来るようになるまでちょっと間があって、例えばこのブログのトップページの右サイドバーの折りたたみなんかも表示後折り畳まれるまで少しぎこちない感じがしたけど、JQuery1.1.3にしたら結構早い感じ。読み込み後速やかにスチャっと折り畳まれる。

ただ、ThickBoxと利用する場合ちょっと不具合があるみたい。IE6だけThickBoxの表示がおかしなことになってしまうのです。

追記: 

ThickBoxのフォーラムに投稿された内容を参考に、7月16日の記事に解決方法を掲載しました。

続きを読む JQuery1.1.3リリース。が、ThickBoxがIE6では不具合?

このエントリーをはてなブックマークに追加
はてなブックマーク - JQuery1.1.3リリース。が、ThickBoxがIE6では不具合?
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

画面ではなくブラウザのレンダリングサイズで統計:BROWSIZE.ORG

scroll_arrow_1.png

webサイトがらみの作業で、常々頭の隅に引っかかって気になってるのが「サイトのサイズ(横幅&縦の長さ)をどうするべきか?」
アクセス解析見れば画面サイズの統計はあるものの、これはあくまで画面=ディスプレーのサイズ。自分自身ブラウザのウィンドウを画面いっぱいに広げることはまずない。もちろん画面いっぱいフルスクリーン派もいるだろうけど、みんながそうではないわけだし、うちの嫁の姉貴がそうなんだけど、お気に入りのサイドバー出しっ放しの人もいるだろうし。やはり安牌は800×600なのか…。

そんなことに頭を悩ませていたら、画面サイズではなく実際にサイトが描画されるブラウザのレンダリングサイズを統計してくれるサービスを発見。

BROWSIZE.ORG

続きを読む 画面ではなくブラウザのレンダリングサイズで統計:BROWSIZE.ORG

このエントリーをはてなブックマークに追加
はてなブックマーク - 画面ではなくブラウザのレンダリングサイズで統計:BROWSIZE.ORG
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

今どきWebなロゴにサイト使われてるフォント『The Logos of Web 2.0 >> The FontShop』

Helvetica_1.png

Web3.0なんて言葉もちらほら聞こえ始めて早くも今さら感がなくもないweb2.0、に代表されるサイトのロゴを使われているフォント名とともにあげています。やっぱ、今っぽいってことになるとサンセリフなんですかね。40個中セリフ体は2つしかないです。サンセリフにしてもすっきりしたデザインのモノが多いです。構成としてはどれもシンプル、色使いも全体的に同じ方向性な感じ、明かり色でビビッドすぎず、透明感のある色が多い。

デザイン的に狙っての「シンプル」なのか、コンテンツに重きを置いて結果簡単にすませたのか(いや、そんなとこはないか)は分かりませんが、web用に今っぽいロゴが必要になったときは参考になるかな。

The Logos of Web 2.0 – The FontShop FontFeed

このエントリーをはてなブックマークに追加
はてなブックマーク - 今どきWebなロゴにサイト使われてるフォント『The Logos of Web 2.0 />> The FontShop』
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

kuler:カラーテーマ作成webアプリ 

kuler_1.png

カラーパレットを作って閲覧するサイトは以前からありますが、最近Adobe Labがリリースしたkuler。作ったカラーパレットを保存しておけるのは以前から他でもあったけど、タグ付けによる分類やキーワードによる検索などいわゆるWeb2.0的なウェブアプリ。何よりインターフェイスが操作してて気持ちいい。わかりやすいし。見た目の雰囲気はLightroomににた感じでUIの細かいとこまでちゃんとできてて関心。

kuler

いいと思ったのはカラーサンプルがでかい!やっぱ色見るのにちっちゃい四角のサンプルじゃイメージ湧かないもの。上のでかいカラーサンプルをクリックするとさらに画面下までのびて帯状になります。

このエントリーをはてなブックマークに追加
はてなブックマーク - kuler:カラーテーマ作成webアプリ 
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

Google Analytics 誰でもすぐ利用可能に

Google_Analytics.png今日からでしょうか。Googleが提供する「Google Analytics」が申し込めばすぐ使えるようになりました。今まではアカウントを申し込んでから招待されるまでひたすら待つしかなかったんですが、もう待たずに使えます。

このエントリーをはてなブックマークに追加
はてなブックマーク - Google Analytics 誰でもすぐ利用可能に
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]

winIE 5.5/6 で透過pngを表示する(2)

linkablePNG.png 前回、windows IE 5.5 / 6 でもアルファチャンネル付きpngファイルを透過表示する方法を取り上げました。

IEに実装されているフィルター機能alphaImageLorderを利用して、winIEでも半透明のpngを表示できるのですが、この方法で背景画像を貼り込んだブロック要素内ではリンクがクリックできない状態になってしまいます。 続きを読む winIE 5.5/6 で透過pngを表示する(2)

このエントリーをはてなブックマークに追加
はてなブックマーク - winIE 5.5/6 で透過pngを表示する(2)
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed
[`tweetmeme` not found]