タグ

webdesignに関するkeloinwellのブックマーク (75)

  • 「サイトの横幅」再論:950px時代のウェブデザイン[絵文録ことのは]2009/01/14

    以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論[絵文録ことのは]2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増

    keloinwell
    keloinwell 2009/01/14
    ブログ、リキッドレイアウトなんだよな。ちょっと考え直そうかな。
  • 段落の謎 - 池田信夫 blog

    非常につまらない話だけど・・・ 日の商用ウェブサイトに原稿を出すと、段落が改まるとき、このように空行を入れたうえで、段落の最初に1字、空白をあける。私の知っている限り、新聞社もCNETやASCII.jpなどもすべてそうなっているが、これは日だけの奇習である。海外のサイト(たとえばNYタイムズ)では、空行を入れるだけで、行頭に空白は入れない。当ブログもその方式だし、普通のブログもそれが多い。 空行を入れるのは、PCモニターでは行間が詰まっているのを読みやすくするためだが、これで段落が改まったことはわかるので、行頭に空白を入れるのは無意味である。しかもフォントの大きさがそろっていないと、何かレイアウトがずれたような印象を受ける。この「日の丸標準」はやめてはどうか。 追記:コメントでも出ているように、これは縦書きの「字下げ」のなごりだろう。この新聞や縦書きという奇習もやめてほしい

    keloinwell
    keloinwell 2008/03/30
    俺もブログでは空白を入れているけれど、入れないところもある。一概に言えない気もするな。要するに好みの問題なのかもしれない。
  • ウェブサイト作成に必要なPSDファイルの詰め合わせセット「Deluxive Creative Pack 001」 - GIGAZINE

    クリエイティブ・コモンズ・ライセンスで公開されており、自由に使うことが可能なPSDファイルの詰め合わせパックです。Web2.0っぽいデザインからオリジナルのデザインまで、いろいろなサイト作成やパーツ作成に応用できそうなものが山ほど詰め込まれており、かなり使えます。 ダウンロードは以下から。 Deluxive Creative Pack 001 by *Deluxive on deviantART 中に含まれているのは以下の通り。 バッジ キューブ カーテン カレンダー グリッドフレーム いろいろな文字入れができるパーツなど イラストいろいろ ポラロイド風の枠 世界地図とかお天気とか 付箋紙 押しピン シェルフ たばこ 星形のバッジ ぺらっとめくれる感じのステッカー 木の板 なお、ほかにもPhotoshopで利用できるパターンや壁紙も入っています。

    ウェブサイト作成に必要なPSDファイルの詰め合わせセット「Deluxive Creative Pack 001」 - GIGAZINE
  • IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル

    Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動

  • 今回のmixiのリニューアルについて - 専門家に聞く [All About プロファイル]

    Web制作・クリエイティブ どこがどう良くなったんでしょうか? 一見のパッと見た目は印象が良くなったかもしれませんが、長時間使い続けるユーザーからすると、見づらく疲れるデザインで、メリハリがないため、エリア視認性がとても悪く、情報把握が非常にしづらいのですが。 専門的にどうなのか詳しく解説していただきたいです。 質問者│サリエル・東京都・男性・35歳 はじめまして クロスウェーブの鈴木です 最初に画面が公開された時は期待したのですが、確かに見づらいものがありますよね。 CSSでのコーディングが中心になり、今後の機能追加でのデザイン追加等が容易になるなどのメリットが運営者側にはあったと思いますが、これではユーザー側のメリットがわかりづらいものがありますよね。 今後の修正に期待していますが・・・ 私の環境でも崩れる場面があり使いづらいです。 評価ありがとうございます 「CS

  • 色の名前が知りたいときに - DesignWalker

    色の名前が知りたいときに - DesignWalker
    keloinwell
    keloinwell 2007/09/06
    メモ。
  • Google マップの貼り付け用 HTML を valid にする

    Google マップをブログ等に貼り付ける「埋め込み HTML」の提供が開始されましたが、その HTML を valid にするスクリプトを公開します。 1.埋め込み HTML の利用方法 埋め込み HTML 自体の利用方法ですが、まず Google マップで任意の地図を表示させ、「このページへのリンク」をクリックします(スクリーンショット右上)。 リンクをクリックすると、HTMLコードがすぐ下に表示されます(下)ので、 「HTML を貼り付けてサイトに地図を埋め込みます」の下に表示されている、 <iframe width="425" height="350" ~ のコードをマウスコピーして、それをブログの投稿画面に貼り付ければOKです。 2.問題点 埋め込み HTML で使われている iframe タグは HTML4.01 Strict・XHTML1.0 Strict では未定義、XHT

    Google マップの貼り付け用 HTML を valid にする
  • ブログテンプレート作成ツールで簡単ブログデザイン! - CSSEZ

    Cssez : ผลบอล บอลวันนี้ วิเคราะห์บอล ข่าวฟุตบอล เราคือผู้นำของเว็บดูผลบอลสดออนไลน์ ผลบอลสดภาษาไทย 7m ข่าวฟุตบอล สรุปผลบอล ไฮไลท์ ที่สามารถเช็คผลบอลทั่วโลก มีทั้งภาษาไทย Livescore 7m 888 ผลบอลมีเสียงวันนี้ล่าสุด พรุ่งนี้ หรือเมื่อคืน รวบรวมเว็บผลบอลต่างๆมากมายมารวมไว้ที่เดียวเช่น livescore.com 7m.cn 888scoreonline.com thscore.cc และ spbo.com รวมทั้งมีวิเคราะห์บอล ตารางบอล คะแนนบอล และดูบอลสดออนไลน์

    keloinwell
    keloinwell 2007/07/28
    一応、メモ。
  • 好きな画像を机の上に散らばったポラロイド写真風にする「Polaroid Gallery」 - GIGAZINE

    クリエイティブ・コモンズのライセンスで提供されており、自分の好きな画像を机の上に散らばったポラロイド写真風に表示することができるFlashファイルです。画像はダブルクリックすると拡大されます。 使い方は至って簡単で、同梱のファイルに表示したい画像ファイル名と、説明文を書くだけ。あとは表示させたい画像を一緒にアップロードすれば自動的に読み込んでバラバラバラ~っと並べて見せてくれます。Flashで作られているのでやろうと思えば自分のブログに埋め込むなんてことも可能です。また、編集できるようにFlaファイルも提供されているので改造もできます。 ダウンロードは以下から。 Polaroid Gallery v.1.01 http://no3dfx.com/polaroid/ ダウンロードしたZIPファイルを解凍し、中にある「photos.xml」を編集するだけです。実際にどんな感じで書くかというのは

    好きな画像を机の上に散らばったポラロイド写真風にする「Polaroid Gallery」 - GIGAZINE
    keloinwell
    keloinwell 2007/07/26
    写真をポラロイド風にレイアウトしてくれるFlash。
  • ウノウラボ Unoh Labs: 携帯開発向けに便利な支援ツール/サイト

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

    keloinwell
    keloinwell 2007/06/21
    ケータイサイトを作る際に役立つツール。Firefoxの拡張は入れてみよう。
  • 画像を角丸にしたり影を付けたりできる「Corner.js」

    画像の角をまるっこくしたり、影を付けたりといったことが簡単にできる「Corner.js」というのが公開されたようです。これらを組み合わせることも可能なのでかなり応用の幅は広いかと。 実際のサンプルは以下の通り。 Corner.js http://www.netzgesta.de/corner/ これはノーマル状態 グラデーションシェードを付ける 影を付ける 角を丸くする へこんだ感じの影にする そしてそれらを全部組み合わせることも自由自在 これぐらいまるくすることも可能 オリジナルのアイディアは「reflection.js」から来ているようですが、それにしてもすごい。

    画像を角丸にしたり影を付けたりできる「Corner.js」
    keloinwell
    keloinwell 2007/04/22
    角丸みんな大好き。
  • Redefining The IMG Tag | TechCrunch

    britepic_id = “297898” britepic_src=”http://farm1.static.flickr.com/53/144942552_81a96c87cb_o.jpg”; britepic_keywords=”Laguna, dog, pets, cute, perfect”; britepic_show_ads=”1″; britepic_caption=”Laguna: Attack Dog”; britepic_width=”560″; The basic format for embedding images into a web page using the <img> tag has been around almost as long at HTML itself, since the first graphical web browser. It

    Redefining The IMG Tag | TechCrunch
    keloinwell
    keloinwell 2007/03/30
    画像を加工して表示してくれるWeb service.広告を導入する。
  • 最初に指定しておくと便利なCSS | Tech de Go

    keloinwell
    keloinwell 2007/03/12
    メモ。
  • サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE

    ページの見かけを決めるCSSについていろいろなデザインが今までありとあらゆる場所で検討されてきましたが、今度はそのCSSを時間帯によって切り替えるという方法です。朝なら朝っぽいCSSで、夜なら夜っぽいCSSを使うというようにして、いろいろと応用が利きそう。 詳細は以下の通り。 Katgal.com: New and Improved このアイディアをさらに延長したアイディアが以下にあります。 nicholasjon.com :: Time Sensitive {1/14/2007} 上記サイトでは以下のような感じで時間だけでなく、天気によっても変わっていけばおもしろいというように提案しています。 はれ くもり 夜

    サイトを訪問する時間帯によって読み込むCSSを切り替える方法 - GIGAZINE
    keloinwell
    keloinwell 2007/03/12
    メモ。
  • 東京オリンピック・パラリンピック招致 | GREEN TOKYO ガンダムプロジェクト

    送料は500円。1万円以上のご注文で送料無料です。 メールが届かない場合はラインにご連絡をお願いいたします。 LINE ID : sapurikan 現在、お振込みから配達まで1~2週間かかります。 下記の口座にお振込をお願いいたします。(先払い) 三菱UFJ銀行 新宿支店 店番:341 普通口座 口座番号 4947550 口座名義 アサノ クニアキ クレジットカード決済不可。お支払い方法は、銀行振り込み先払いのみとなります。 近年、携帯のメールアドレスを利用したご注文が増えていますが、入力ミスだけでなく、迷惑メール設定などが原因で、自動返信メールが届かないお客様が増えております。 お客様からの質問や注文などに使えるLINEのアカウントを用意しましたので、LINEが使える方はお友達登録してLINEでご連絡いただくと確実です。 LINE ID:sapurikan LINEで見積り/注文/問合

    keloinwell
    keloinwell 2007/02/20
    ワラタ
  • NameBright - Domain Expired

    If this is your domain name you must renew it immediately before it is deleted and permanently removed from your account. To renew this domain name visit NameBright.com

    keloinwell
    keloinwell 2007/01/04
    Web2.0風なロゴを作ってくれるサービス。
  • ステルス・ウェブ・デザイン - Ringo's Weblog 2006年12月16日 アーカイブ

    ステルス・ウェブ・デザイン ステルス・デザインの方法というがある。(Webテキスト) このでは、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て

    keloinwell
    keloinwell 2006/12/21
    面白い考え方だと思う。でも、結論があって、そこに理論を当てはめていっているだけのような気もする。
  • The Last Order Icons

    ×Browse IconsNewest PacksSVG Icon PacksPopular PacksRandom PacksLicense: Commercial free PacksCategoriesAdobe IconsAlphabet IconsAnimal IconsApple IconsApplication IconsArt IconsAvatar IconsBuildings IconsBusiness IconsCartoon IconsChristmas IconsComputer IconsCulture IconsDrive IconsEaster IconsEmo IconsEmoji IconsFlag IconsFolder IconsFood IconsFunny IconsGame IconsHalloween IconsHand-Drawn Icon

    The Last Order Icons
  • TRANS [hatena] - 印刷用CSSをまとめてみた。

    以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

    TRANS [hatena] - 印刷用CSSをまとめてみた。
  • Japanese Traditional Colors

    桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお

    keloinwell
    keloinwell 2006/12/02
    こちらも参考に → http://www.colordic.org/w/  微妙に色が違うんだよな。