WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが1ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう?という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
GX - Full-Featured Javascript Animations Framework JSでアニメーションするならコレかもというぐらい多機能な「GX」ライブラリ。 jQueryと組み合わせて使うアニメーションライブラリです。 jQueryやscript.aculo.usにもアニメーション機能は備わっているけど、ここまでではないというアニメーションに特化したアドオンです。 勿論、jQuery単体でも、組み合わせて実現できるのかもしれませんがアニメーションに特化している分簡単に出来ます。 以下でその凄さが分かるはず $('#el1').gx({'width': 200, 'height': 200, 'border-width': 8}, 2000, 'Linear', function(el) { el.html('Completed!'); });
これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」 2009年03月12日- jQuery Context Menu Plugin これでサイトに独自の右クリックメニュー実装は誰でも簡単「jQuery Context Menu Plugin」。 ちょっと前までだと独自の右クリックメニューを作るのはすごく大変でした。特にクロスブラウザで動作することなんかを考慮すると本当に大変でした。 が、このライブラリを使えば簡単に実装できてしまいます。 特定のエレメント上のみに右クリックメニューを設定できるという、柔軟なつくりになっています。 どのアイテム上でクリックしたかっていうのがイベントハンドラで受けられるところも汎用的になっていていいです。 このライブラリ1つとってみても、jQueryを使う意味が出てきそうです。 jQueryは本当にデフ
モバイルデザインアーカイブとは? 携帯サイトを制作する上で、「ケータイサイトを参考にしたいけど、仕事に役に立つケータイサイト集ないかなー?」と思っているデザイナーの方へ向けて公開させていただきました。 そんなモバイルデザイナーのモバイルデザイナーによるモバイルデザイナーのための国内最大の携帯サイト集です。 モバイルサイト制作を請け負ったけど、「なかなかデザインがまとまらない」「洗練 された携帯サイトのデザインを参考にしたい」といった方のために、優れたデザインの ケータイサイトを集めました。 デザインに優れた携帯サイトはもちろん、技術的に優れた携帯サイト、そして現在のウェブトレンドを捉えた携帯サイトを掲載しています。
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、オークション事業部のさかいです。 ネットサーフィンに慣れている techblog 読者のみなさんの中には、あちこち見て回っているうちに重いページに行き当たり、イライラしながら応答を待ったり、容赦なくバックスペースキーで前のページに戻ったり…という経験をされた方が多くいらっしゃると思います。 そういったストレスのないレスポンスが行えるよう、バックエンドのプログラムの最適化や、サーバーのチューニングを行うのは私たち技術者の仕事のひとつです。 しかし、あるウェブサイトにアクセスして、そのサイトを閲覧できる状態になるまでの時間のうち、そういったバックエンドでの処理に必要な時間は 1〜2 割でしかないというデータがあります。残り
検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入(URLの正規化) Google、Yahoo!、Microsoft3社が rel="canonical" (正規化、canonicalization )をサポート。クローラが適切な(canonical)サイトを見つける手がかりに。rel="canonical" はページの head の中に記述すること。 公開日時:2009年02月13日 15:37 Google、Yahoo!、Microsoftの3社は2009年2月12日、共同で新しいタグ「 rel="canonical"」のサポートを開始した。rel="canonical"(属性)は、検索エンジンに正しいサイトのURLを認識(正規化、canonicalization)させるために使用される。 同じサイト(ドメイン)でも、たとえば www.sem-r.com、se
EmChart | Aloe Studios Blog Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser.CSSのem指定のサイズが一発でわかっちゃう「EmChart」 基本のサイズが24ピクセルで、9px にしたい場合、0.375emにすればよい、というのが簡単に分かるようになっています。 これはなかなか便利そうですね。チャートのダウンロードも可能です。 関連エントリ サイト上でCSSによるフォントスタイルを確認できる便利ツール サイトに使用するフォントのCSSを選ぶ際に役立つ「CSSTYPE」
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか? ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを2つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
36 Must Have Backgrounds and Patterns Resources for all Designers : Speckyboy - Web Design, Web Development and Graphic Design Resources デザイナーが知っておくべき背景画像のリソースサイト集。 背景画像のダウンロードやWEB上で動作するジェネレーターがまとまっていました。 背景画像リソース集 Huge Magazine - Desktop Patterns and Tiles 綺麗orおしゃれな背景画像パターン多数 Barracuda Backgrounds 地味だけど汎用に使えそうな背景画像 HYBRID GENESIS カラフルだけどこちらも汎用性がありそうな背景集 DinPattern ちょっと個性的なパターン集 ジェネレーター Tiled Back
まず、はじめに僕が書いた100個のブログを作った。のブクマコメントを拝読していたら、「クリック率1%は高いのでは?」という感じのご意見が、チラホラとあった。恐らく、クリック率が低い人っていうのは、「目の動線」を意識して広告配置をしていないんだろう、と思う。 前回の記事では、「間違えてクリックさせる」と書いたわけだけれど、「広告だと分かった上で、読ませて、クリックしてもらう」という言葉に今回は、言い換えてみようかな。いずれにせよ、必要なのは「目の動線への意識」だ。 悪い例記事のタイトルの下に、広告を配置するのは、「間違えてクリックさせる」手法。読み手からすると、記事を読もうと思っている場所に広告があったら「うざい」だけ。 また、記事の最後に広告を挿入するやり方は、そこまで不快には当たらないにせよ、記事を読み終われば人は満足するし、そもそもブログ形式の場合だと、記事ごとの最後に広告があると、広
ウェブページのレイアウトでは、ヘッダーやサイドバー、コンテンツなどをどのように配置するかがポイントとなる。現在、配置のコントロールにはfloatやpositionプロパティを利用するのが一般的だが、CSS 3の「Advanced Layout Module」という草案では、新しいレイアウト手法が提案されている。 このレイアウト手法は「行と列のレイアウト」や「ボックスレイアウト」と呼ばれ、FirefoxとSafari、Google Chromeが対応している。 ボックスレイアウトの機能を利用すれば、これまでのfloatやpositionプロパティでは困難だった「段の高さを揃えた段組み」なども簡単に作成できるようになる。 そこで今回は、floatプロパティとボックスレイアウトを利用した段組みを比較していく。また、CSS 3で段組みのレイアウトを実現する「Multi Column」との違いも確認
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1: とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
これで、とうとう3度目の小さいサイズのアイコンシリーズです。 『リストに使える小さいサイズのアイコン Part2』でもご紹介しております。その前の記事はリンク先からどうぞ…。 小さいサイズのアイコンは、リストに使ったり、タイトルの横に添えてみたりと使い道はいろいろありますね。 今回は、幅広いデザインに対応できそうなシンプルなアイコンをまとめてみました。 mIcons – Kostenlose Icons 種類も豊富で、なにかと使えそうなアイコンが公開されています。 bwpx.icns : Paul Armstrong Designs こちらもモノクロのアイコンがいっぱいですね。色を付けて使っても良いかもしれませんね。 Bitcons | SOME RANDOM DUDE 赤がきれいなアイコンいろいろです。 ShopDev Website Design Blog ショッピングサイトに使えそう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く