タグ

ブックマーク / labs.unoh.net (5)

  • ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

    yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか?  「エラスティック(elastic)」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ

  • ウノウラボ Unoh Labs: Webデザインする上でFireworksがステキな12のポイント

    Webデザイナとして仕事をする上で、ここ数年、個人的にFireworksが手放せないツールになっています。 twitterで某人に「書いて」と言われたのもあるのですが(笑)、Web画像を作るのによいソフトをさがしている人、これから画像編集のためのソフトを選ぼうとしている人の参考に、ということで、個人的にFireworksの気に入っている点など一通りまとめてみようと思います。 ベクター画像とビットマップ画像が等しく扱えるので作業がスムーズ Fireworksは、ベクター画像とビットマップ画像を同時に扱えます。ベクターでちょっとしたアイコンを作るとか、ビットマップ画像を読み込んで編集するとか、すべてが一つのソフトの中で完結できます。IllustratorとPhotoshopを行き来したりするような手間は不要ですし、また複数のソフトを同時起動しなくていいのでマシンにも優しいです。 ビットマ

  • ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方

    yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<

    simsons
    simsons 2007/07/13
  • ウノウラボ Unoh Labs: 携帯開発向けに便利な支援ツール/サイト

    どーも8makiです。 ウノウでは携帯サイトの開発も行っています。 携帯サイトの開発ってPC用のものと比べて制限が多かったり、面倒くさいことが目白押しです。そこで開発に便利なツール・サイトをリンク集的にまとめてみました。 ~~~~~~ツール編~~~~~~ ■必須ツールi 絵文字 ドコモの絵文字が入力/表示できるようになります。 User Agent Switcher (Firefox 拡張) User Agentを書き換えて携帯になりきることができます。 インポート用の各種端末のUser Agentリストを作成していただいたので皆さんもご利用ください。 useragentswitcher.xml ■あると便利なツールiモードHTMLシミュレータIIiモードHTMLシミュレータOpenwave SDK(au) ウェブコンテンツビューア(ソフトバンク)MediaCoder .

  • ウノウラボ Unoh Labs: ウェブデザインに不可欠なツールサイトの紹介

    naoyaです。 今日は最近見つけました”ウェブデザインに不可欠なツールサイト”を紹介します。その名前も「Web Design Tools - thePeoplesToolbox」です。このサイトはウェブデザインの使われるさまざまなサイトをまとめたサイトです。 それでは、さっそく使ってみることにしましょう。 まず、最初にユーザ登録した方が自分のツールボックスにできるので登録してみましょう。 登録するには、右上の"login"リンクから、必要な情報を入力するだけでその場で登録完了となります。"Enter Code"には、"Authentication Code"と同じ文字を入力します。 ウェブデザインサイト1 posted by (C) フォト蔵 ログイン後、"home"リンクからトップページを表示すると、ウェブデザインに使えるサイトの一覧がカテゴリ別に表示されています。 この中から

  • 1