mosi_mosiのブックマーク (223)

  • JavaScript で、画像本来のサイズ(幅, 高さ)を取得する方法 - latest log

    Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像来のサイズを取得する方法をご紹介します。 Firefox, Safari, Google Chrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。

    mosi_mosi
    mosi_mosi 2009/06/04
    Web開発
  • [CSS]たった一行のスタイルシートでグリッドレイアウトを実装するフレームワーク

    <textarea name="code" class="css" cols="60" rows="5"> .dp50{width:50%;float:left;display:inline;*margin-right:-1px;} </textarea>

    mosi_mosi
    mosi_mosi 2009/06/04
    スタイルシート
  • Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum

    今日は、Webサイトを作ったらまずやるべきことのチェックリストを紹介しましょう。サイトは作るまでも大切だけど、作ってからのアクションも同じかそれ以上に大切。 すでにサイトを運営している人は、やってないものがないか確認してみましょう。 サイト運営日記をスタートする(変更点を日付と一緒にメモしていく)XMLサイトマップを作って更新内容が含まれるようにするGoogleウェブマスターツールにサイトを登録する → https://www.google.com/webmasters/sitemaps/XMLサイトマップを登録するURLのwwwあり/なしの統一を指定するサイトリンクの表示をチェックして調整(以降随時)Yahoo!サイトエクスプローラーにサイトを登録してXMLサイトマップを登録する → http://siteexplorer.search.yahoo.co.jp/live Webmaste

    Webサイトを作ったらまずやるべきことチェックリスト | Web担当者Forum
    mosi_mosi
    mosi_mosi 2009/06/04
    Web開発
  • Flash Lite入門講座 第1回 日本のFlashLiteの仕様 | デベロッパーセンター

    はじめに このアドビデベロッパーセンターを見ている方は、PCでのFlash開発は慣れていると思いますが、「携帯Flashは制限が多くて作りにくい」というイメージを持っているのではないでしょうか? 連載では、そうした方々に向けて、日での携帯Flashコンテンツ開発について解説していきます。第1回目は、ざっくりとしたFlash Lite制作ガイドラインを記していきたいと思います。 日では勝手が違う Flash Lite開発環境 「Flash Lite」とはモバイル用のFlash Playerのことで、これまでにバージョン1~3がリリースされています。Flash Liteの各バージョンは、PC向けFlash Playerのバージョンと比較すると、以下の関係となります。ただし、該当するFlash Playerバージョンの全機能をサポートしているわけではありません。 Flash Lite

    mosi_mosi
    mosi_mosi 2009/05/30
    Web開発
  • デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。

    こんばんは、最近ホルモン焼きにハマっているishidaです。 WEBサイト制作時、formは必ずといってもいいぐらい存在します。 お問い合わせフォームや会員登録フォームなどがすぐに思いつきますよね。 デザインをがっつりフォーム部分で作り込んでも、CSSのみでは、 実現できなかったりすることもよくあります。 そんなクセのあるformを、よりリッチに!かつ操作性を向上!できるjQueryプラグインの数々をご紹介します。 デザイナーの方は、フォームのデザインの参考に。 コーダーの方は、ページ作成時間の短縮に手助けになればと思います。 jQuery plugin: Validation フォームの入力チェック(バリデーション)が簡単にできるプラグイン。 エラーメッセージはlocalizationディレクトリ内に18言語用意されています。 日語用は別途作成し、使用することが可能です。 jQuery

    デザイナー・コーダー必見!使えるform関連jQueryプラグインの数々 | バシャログ。
    mosi_mosi
    mosi_mosi 2009/05/29
  • 第97回 これだけは押さえておきたいエクセルの知識  前編 - bingo_nakanishiの他言語出身者のためのPerl入門

    新社会人になって、業務を与えられるようになると エクセルをガシガシ使っていくことになると思います。 今回は、これだけは押さえておきたいエクセルの知識です。 その1. 絶対参照 と 相対参照 絶対参照と相対参照を理解するには、 九九の表をつくってみると良いでしょう。 1*1 = 1 ... 9*9 = 81と小学生のときに必死に覚えたアレです。 右上の、数式バーに注目してください。 =C$2*$B3となっています。$は、固定をあらわしています。 なんで $ なの?? 「Sに縦棒が刺さって、固定しているみたいに見えるから$」 と、私は強引に覚えてみました。 この$が使いこなせるとエクセルを使うのが楽になります。 絶対参照とは セルをフィルで選択してコピーしても、同じ場所を指していること 相対参照とは セルをフィルで選択してコピーすると、指しているところが変わっちゃうこと(インクリメンタル、デク

    第97回 これだけは押さえておきたいエクセルの知識  前編 - bingo_nakanishiの他言語出身者のためのPerl入門
    mosi_mosi
    mosi_mosi 2009/05/21
  • きれいなソースコードを書くために必要な、たったひとつの単純な事 - よくわかりません

    「構造のきれいなプログラムを書けるようになるためにはどうすればいいのか?」という質問を受けたので、「はて?どうしているだろうか?」と考えてみました。あ、形式知にきちんとなっているようなテクニックみたいなもんじゃなくて、モノローグなので、あまり凝ったものは期待しないように。 http://blog.shibu.jp/article/28983162.html 自分なりにもっと凝縮版を。渋川さんが言っている事全体もその通りとは思うけど*1、もっと簡単で、しかも射程が広い、と自分が思っている事。 渋川さんはちょろっと触れてるだけだけど、自分はこれが最も基的で汎用的、かつ、ソースをきれいにする原動力となる上にバグをも減らしてコードの汎用性まであげる、コーディングのエンジンみたいなものと思ってる。それは、 「すべてに正しい名前を付けて、そして、正しい名前であることを維持する」という鉄の意志 クラス

    きれいなソースコードを書くために必要な、たったひとつの単純な事 - よくわかりません
    mosi_mosi
    mosi_mosi 2009/05/17
  • 旧・Macの手書き説明書 - FC2 BLOG パスワード認証

    ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.

    mosi_mosi
    mosi_mosi 2009/05/13
    Mac
  • ウェブ制作に役立つウェブデザイナーのための検索サイト集

    各種チュートリアルをはじめ、写真画像やベクター素材、アイコン、フォント、カラーなどウェブ制作に役立つウェブデザイナーのための検索サイトを紹介します。

    mosi_mosi
    mosi_mosi 2009/05/12
  • いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0

    が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け(制作者に関係する要件)と、Webブラウザを作る人向け(実装要件についての要件)ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ

    いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
    mosi_mosi
    mosi_mosi 2009/05/08
  • Web 開発者の責任 (翻訳): Days on the Moon

    John Resig 氏による A Web Developer's Responsibility という記事が素晴しかったので、著者の許可を得てここに日語訳を掲載します。 Web 開発者の最大の負担は、ブラウザのバグと非互換性への対応に膨大な時間を費やすことであるといって間違いないでしょう。それゆえに、それらへの対応に不満をいうのは、Web 開発者全員の常となっていました。ブラウザのバグは迷惑でいらだたしく、仕事を大幅に難しくします。 ブラウザのバグはとてもいらだたしく、通常の開発における最大の負担です。ですから、開発対象のブラウザが、自身のバグを見つけ修正できるようにしてやるのは、すべての Web 開発者にとっての責任です。自分が見つけたバグに対して責任を持ち、「ほかの誰かがこれを見つけるだろう」とは思わないことで、ブラウザの進歩の速度は加速していくでしょう。 ブラウザを支援する解決策

    mosi_mosi
    mosi_mosi 2009/05/07
  • ウェブデザインにおいてすべきこと、すべきでないことをまとめた『Web Do’s and Don’ts』 | 100SHIKI

    ウェブデザインにおいてのベストプラクティスと、逆に一般的にやるべきでないことを簡潔にまとめたのがWeb Do’s and Don’tsだ。 わかりやすいようにDo’s and Don’tsが左右に並べられているので、ウェブ系の人はざっと眺めてみるといいだろう。 もちろんデザインに絶対はないので「そりゃ、逆じゃね?」という主張もあるが、多くの人の主張を眺めるのは勉強になるものだ。 なお、それぞれの項目には参考リンクがつけられているので「む、どういうこと?」というときは原文をあたるといいだろう。 ここらへんを仕事にしている人はたまに覗いてみるといいですね。

    ウェブデザインにおいてすべきこと、すべきでないことをまとめた『Web Do’s and Don’ts』 | 100SHIKI
    mosi_mosi
    mosi_mosi 2009/05/06
  • JavaScriptでHTMLフォームの劇的ビフォアアフター「Jqtransform」:phpspot開発日誌

    Opensource - AJAX - Jqtransform - jQuery form plugin JavaScriptHTMLフォームの劇的ビフォアアフター「Jqtransform」。 jqTransformを使えば、味気ないフォームも以下のとおり、1行で綺麗に整形することが可能です。 ↓↓↓↓↓↓↓↓ 必要なライブラリを読み込んだら、1行で整形 $('form').jqTransform({imgPath:'/img/'}); ↓↓↓↓↓↓↓↓

    mosi_mosi
    mosi_mosi 2009/04/23
  • http://www.designwalker.com/2009/04/wireframe-2.html

    http://www.designwalker.com/2009/04/wireframe-2.html
    mosi_mosi
    mosi_mosi 2009/04/23
  • ウェブデザインのクオリティをアップする7つのポイント | コリス

    ウェブデザインのクオリティをアップする7つのポイントをFunction Web Design & Developmentから紹介します。 How to Spot Quality within Web Design: Examples & Tips 以下、その意訳です。 1. Spacing スペースは、デザインされたエレメントの間に使用される巧妙なテクニックです。素晴らしいイメージを配置することも大切ですが、そのエレメントにどのようにスペースを与えるか充分に考慮する必要があります。 充分なスペース

    mosi_mosi
    mosi_mosi 2009/04/17
  • 無料のオンラインスキルアップサイトTOP10 | ライフハッカー・ジャパン

    インターネットはそもそも学者や研究者が知識やデータをやりとりするために始まりました。つまり、ウェブには知識を広げる可能性が無限大にある、ということです。ということで、今回は無料のオンライン教育を10個、紹介します。 1. プログラミングを学ぶ ウェブでもデスクトップでも、コーディングのスキルは身につけていて損しないスキルです。さらに、ウェブの世界ではプログラミングのスキルを教えたい、見せたいという人がたくさんいます。これを活かしてオンライン上で学びましょう。学びたいことがFirefox extensionでもプログラミング言語でも、屋で分厚いを買う必要はありません。例えば「Google Codeユニバーシティ」では、CSEプログラムというプログラムをおこなっており、コーディングについてかなり深いところまで学べます。米ライフハッカー編集部ではこの他にもウェブで学べるサイトを集めたので、好

    無料のオンラインスキルアップサイトTOP10 | ライフハッカー・ジャパン
    mosi_mosi
    mosi_mosi 2009/04/10
  • [CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer

    手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、

    mosi_mosi
    mosi_mosi 2009/04/08
    Web開発
  • | ^^ |秒刊SUNDAY | やる夫でも判るSEO対策10項目

    2009年04月07日 やる夫でも判るSEO対策10項目 カテゴリ:WEBデザイン SEO対策として現在コレが正しいといえるものはございませんが、一般的なセオリーとして、妥当だと思われている項目をチェックしておきましょう。 ◆1:タイトルは正しく記述 現在SEOで最も重要とされており、どのセミナーに参加してもかならず書けといわれるのがタイトルです。 タイトルの無いHPなど立ち上げる価値が無い というセミナーの講師もいました。言い過ぎかもしれませんが、検索エンジンがまずタイトルを走査するというのが一般セオリーです。 ちなみに、企業サイトであれば、業務名・商品名の後に会社名が効果的です。これは会社名で検索するよりも、業務内容や、地域名、商品名で検索するのが一般的だからです。例えば、名古屋の風俗だったら <title>名古屋のキャバクラ|秒刊</title> という感じであれば、名古屋+キャバ

    mosi_mosi
    mosi_mosi 2009/04/08
    Web開発
  • あとで読みたいサイトを次々にスクラップしていけるサイト「I Need to Read This」*二十歳街道まっしぐら(FC2ブログ時代)

    「I Need to Read This」は後で読みたい記事をスクラップできるサイトです。 日のサイトで言うと「あとで読む」のような感じです。 ブックマークレットがあり、ポチっとクリックするだけで、表示しているサイトをスクラップできます。 スクラップしたサイトを後から閲覧すると、一覧からは自動的に消える仕組みになっています。 以下に使ってみた様子を載せておきます。

    mosi_mosi
    mosi_mosi 2009/04/08
  • 単色で構成された、デザインが秀逸なアイデア溢れるロゴのデザイン集

    単色で構成された、デザインが秀逸なアイデア溢れるロゴをAbduzeedoから紹介します。 Ultimate One Color Logos Inspiration Comedy Club HUGE!_

    mosi_mosi
    mosi_mosi 2009/04/08