Basic Design NoteCLOSED This site has been closed. 当ブログは2022年12月30日をもって閉鎖しました。 開設から10年間、ご覧いただきありがとうございました。
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備 はじめにボタンと
モバイルサイトを作るときに参考になるサイト – creamu
Mashableで、モバイルサイトを作るときに参考になるサイトが紹介されています。 いくつかご紹介しますね。 Mippin RSSを使ってサイトのモバイル版が作れるサービス WPtouch WordPressをiPhoneやAndroid携帯に対応させてくれるプラグイン Mobify デバイスごとの表示をリアルタイムに確認しながらCSSを編集できる。A List Apartがこれで作られた iPhone Compatible CSS Layouts iPhoneに対応したCSSレイアウトを配布 Smashing Magazines’s Mobile Design Showcase 9月にSmashing Magazineがまとめた、iPhoneデザインまとめ CSSiPhone iPhoneサイトのCSSギャラリー A List Apartの例はとてもいいですね。 一度見てみてください。
Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト
題名の通りですが、これから Webデザインに手を出そう、 という方の為に日本語サイト で説明が凄く分かりやすい サイトと少しチュートリアル記事 の紹介です。 Webデザインを始めたいけどadobeのソフトは高額でなかなか手軽に始められません。まずはほぼ同等の機能を持ち、しかも無料で手に入るGimp（Photoshop代替ソフト）とInkscape（Illustrator代替ソフト）で様子見をしてみてはいかがでしょう。 使い方や実践チュートリアルを丁寧に説明してくれるサイトをご紹介します。「これなら触ってみよう」という気になれるかと思います。沢山あげられると選べずに萎えるので1，2サイトに絞りました。両ソフトのダウンロードもリンク先で出来ます。 プロも使ってるといわれるGimp。Webデザインをこれから始めようと思ってもなかなかとっつき難いかもしれません。ですので扉となってくれそうなサイトを
ロゴデザインをする時に参考になるサイト60+ – creamu
DESIGNM.AGで、ロゴデザインをする時に参考になるサイトが紹介されています。 4つのカテゴリーに分かれてたくさんありますね。いくつかご紹介します。 ロゴデザインのインスピレーションが得られるサイト » Logo Faves » LogoGala » Logo of the Day ロゴをテーマにしたブログ » Logo Design Love » David Airey » Logo Designer Blog ロゴデザインチュートリアル » Zeeのロゴをillustratorで作る方法 » オバマ大統領のOのロゴの作り方 » レインボーカラーのロゴを作るチュートリアル ロゴに関する記事やケーススタディー » Henri Ehrhartのブランドデザイン » Miskeetoのブランドデザイン » Butterfield Photographyのロゴデザインプロセス よくまとまって
山田 あかね [purprin] - エスカフラーチェLLC
私も執筆に参加させていただいた「現場のプロから学ぶXHTML+CSS」がついに発売されました！ 早速、打ち合わせの帰りに本屋さんに寄ってみたところ、ちゃんと置いてありました(o e o)人(o e o) 数が少ないのはきっと売れゆきが良いから・・・と良い方にとっておきます（笑） そこで今回は発売を記念しまして、日頃からこのブログをご覧いただいている方にプレゼントを企画しました。ご応募いただいた方から抽選で10名様に、「現場のプロから学ぶXHTML+CSS」をプレゼントいたします！こちらの企画は締め切りいたしました。ご応募いただいた方、ありがとうございました！ 現場のプロから学ぶXHTML+CSS プレゼント応募方法 下記の必要事項とアンケートにお答えいただいた上、2008年11月22日までに info@escafrace.co.jp宛にメールでご応募ください。こちらの企画は締め切りいたしま
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
ブログが続かないわけ | 初心者プログラマーが簡単なフォームを作るときにやりがちな6つのミス
お問い合わせフォーム、登録フォーム、キャンペーンの申込フォーム。 Webにはいろいろなフォームがある。 Webプログラマーであれば誰もが一度は作ったことがあると思う。 新人プログラマーの初めての実務がフォームであることも多いだろう。 新人が作っているというのにもかかわらず、技術的にも面白い部分がないせいか、正しい知識のある人がレビューすることが少ないと思われる。 単純さゆえにテストが不足しているということもあるかもしれない。 上記の理由は憶測にすぎないが、杜撰なフォームがたくさん出回っているのは事実だ。 もう、CAPTCHAの話とか以前の問題だ。 よく見かける悪い例を簡単にあげておく。新人が初めての実務に当たるときにこれを気にしてくれれば、世の中のフォームがだいぶ良くなると思う。 1. クライアントサイド(JavaScript)でのチェックのみ。 2. 選択肢式の入力欄に対するチェックの漏
これだけは押さえておきたいSEO対策 - livedoor ディレクター Blog
こんにちは、livedoor Blog担当の坪田です。 以前に「HTMLタグを使わないSEOの話」というエントリーがありましたが、今回は新規ウェブサイト立ち上げ時や、リニューアル時に押さえておきたいSEO対策をまとめてみました。 「SEO」は、多くのマーケティング担当者を魅了し、盲目にさせてきました。 私も何か有効な手段はないものかと、ティッカーに「SEO」の文字が表示される度にクリックしては、とりつかれた様にブックマークしていました。 経験のある方も多いと思いますが、SEO について調べると情報が膨大すぎて正しい答えが見つかりません。というよりもその時・サイトに応じてケースが異なるため、「どうすれば順位があがるのか？」という知りたいことの結論がでないのです。 私は、基本的な施策を忠実に行い地道な効果測定の繰り返しを行うことが、上位表示の秘訣だと考えています。ただ、SEO 対策は長期的な運
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
Ajaxのキソのキソまとめ - builder by ZDNet Japan
Ajaxパワーの活用方法 Ajaxは、ウェブアプリケーションの開発方法や利用方法を大きく変えた破壊的な技術だ。Ajaxによってインタラクティブなページの作成が可能になったのである。Ajaxは現在もウェブの流行の最先端を走り続けている。 Ajaxという用語は比較的最近生まれたものだが、Ajaxを支えている技術は以前から存在していた。ブラウザに送られたウェブページの内容をあとから変更する機能自体は、何年も前からあったのである。たとえば、JavaScriptでiframeのsrc属性を変更するのもそのような技術の一つだ。 しかし、XMLHttpRequestオブジェクトが主要なブラウザで実装され、GmailやGoogle Mapsが公開され始めると、開発者はそれをきっかけとしてウェブページの構築方法をもう一度考えるようになったのである。 XMLHttpRequestオブジェクト Ajaxを可能に
便利なモノにつきまとう不快さ：D・A・ノーマン氏にきく「配慮のある技術デザイン」
人間とコンピュータの相互作用の設計に通じた人物がいるとすれば、それはDon Norman氏だ。Norman氏はNorthwestern Universityの教授であり、「The Design of Future Things」の著者、またNielsen Norman Groupの共同創設者でもある。 Norman氏は、一流のテクノロジー企業と自動車メーカーに対するコンサルティングという現在の仕事に加え、大衆に訴えかける設計を行う能力で知られたAppleのAdvanced Technology Groupのバイスプレジデントも務めた。 Norman氏は忙しい中から時間を取り、CNET News.comのインタビューに答えて、デザイナーや開発者が正しく実践していることは何か、また見落としていることは何か、消費者は技術の将来に何を期待できるかなどについて考えを語ってくれた。 ―マウスが要らなく
2007年度のCSSデザインベスト50発表
CSSとFlashのデザインでインスピレーションを得るためのサイト「Best Web Gallery」が選んだ2007年度のCSSデザインベスト50が発表されています。どれもこれもなかなか秀逸なデザインなので、来年度の新しいデザインに向けて、今年度の総復習を行って新たなインスピレーションの糧を得たい人や、ウェブサイトやブログのデザインを新しくしたいので参考になるデザインを探している人に最適です。 というわけで、ベスト50は以下から。 Capture the Valley - A project to benefit Habitat for Humanity http://capturethevalley.com/ Squawk http://www.squawkdesign.com/ Emeril's Holiday to Go : Home http://www.emerils.com/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パスワード認証
HTML5, きちんと。
[CSS]使いやすいスタイリッシュなフォームを実装する17のチュートリアル | コリス
2007年11月度のweb製作者向けベストエントリ27個まとめ part6*ホームページを作る人のネタ帳
http://e0166nt.com/blog-entry-179.html
http://blog.fulltext-search.biz/articles/2007/09/03/gigazinize