[連載]Webデザイン入門（1日目） | Stocker.jp / diary
本日から新たに、「Webデザイン入門」というタイトルで連載を始めます。 9月からWebスクールの講師をさせていただいているのですが、そこでカリキュラムとして渡されたテキストには「Photoshop や Dreamweaver 等のソフトの操作説明」しかされておらず、ソフトの操作方法を習得しただけではWebデザイナーとして就職し、仕事していくのは少々厳しいのではないかと思いました。 そこで、ソフトの操作方法と平行して「Webデザインそのもの」について考える時間を設けたいと思い、オリジナルのカリキュラムを作ることにしました。 ここでは、そのカリキュラムの一部をブログ形式にして掲載しています。 既にWebデザインの仕事をされている方はご存知のことばかりかもしれませんが、これからWebデザイナーになりたい方や、今はプログラミングなどデザイン以外の仕事をされていて、これからデザインも手がけてみたいと
![[連載]Webデザイン入門（1日目） | Stocker.jp / diary](https://cdn-ak-scissors.b.st-hatena.com/image/square/8aeba51f4329633993f3f50c3007e124fe9a30ab/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2Fb433d63ba5e7a465dbac23082f36bb7f-500x375-1.png%3Ffit%3D500%252C375%26ssl%3D1)
色覚障がい者に配慮したWebサイトの作り方
2017年4月11日 Webサイト制作, アクセシビリティ, 色彩 今持ってるプロジェクトの中で、視覚・色覚障がい者にも配慮したWebサイトの制作があります。視覚障がい者向けのサイト制作についてはいくつか記事を発見できたのですが、色覚障がい者に向けたWebサイト制作についてはなかなかヒットしなかったので、断片的に読んだものを記事にまとめました。参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 追記: 一部表記の仕方を変更しました。 色覚障がいについて 目の、色を認識する細胞の変異で、色の識別が異なることを「色覚障がい」「色覚異常」と呼びます。色覚障がいといってもいろいろな種類があり、ここでは人口の多い赤系統や緑系統の色の識別が困難な、赤緑色覚異常の場合について書いてみます。 困難な点としては 灰色だと思ったらピンクのシャツだった 焼肉の際、生肉と焼けている肉の区別がつきに
cssの情報・まとめ - かちびと.net
cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツール オンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版 RoundedCornr / 角丸のHTML・CSSコードを生成してくれる CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認 CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる CSS Builder / オンラインでスタイルを生成可能 Spiffy Box / cssによる角丸を簡単に生成 The
WordPressを利用している良デザインな日本のサイトいろいろ - かちびと.net
日本語で運営されているサイトで WordPressを使った良デザインの サイトをご紹介します。僕が知っている 範囲ですので「こんなサイトもあるよ！」 と言ったお勧めサイトがありましたら 教えて頂けると嬉しいです。 一応テンプレ等を使用していないと思われるサイトに絞っていますが「テンプレだよ」というサイトがあったらごめんなさい。配布テーマでもしっかりカスタマイズしたものは有りの方向です。以前書いた記事の第２弾的なエントリーです。以前も記事内にもWPを使ったサイト多目でした。以前の記事で紹介したサイトは割愛しています。 UMLAND レッドカラーが凄いインパクトです。所々にもjsを使った表現をされています。 UMLAND mono-lab シンプルでかなり見やすいです。フッターも素敵ですよ。テーマも配布してくれています。 mono-lab Brooklyn Parlor かなりハイクオリティで
おすすめのデザイン本「ロゴデザインのアイデア!」: DesignWorks Archive
毎回、注目のデザイン書籍や写真集、おすすめの本を紹介します。 今回は「ロゴデザインのアイデア!」です。 さまざまな分野の国内ロゴを784個収録、ロゴ作成のアイデアをぎっしりと詰め込んだデザイナーには嬉しい一冊となっています。 詳しくは以下 企業やブランドの顔ともなる"ロゴ"、デザインの分野でも一つのジャンルとして確立されている程、その重要性は高く、アイデアを生み出すデザイナーが頭を悩ませることも多いのではないでしょうか？この本では、ロゴを作成する際のアイデアソースとなる情報がたくさん紹介されており、ロゴを作る際に必ず役に立つ心強い一冊になるのではないかと思います。 配色やロゴの形、テイスト、デザインのテーマなどさまざまな角度から、求められるロゴとはどんなものかを既存のロゴを使って分類・紹介。ロゴ一覧は、デザインの資料として多いに活用できるのではないでしょうか？ロゴデザインで悩んでいる方は一
画像を自在に差し替える·Transm.js MOONGIFT
Transm.jsはJavaScript製のフリーウェア（ソースコードは公開されている）。Webサイトでヘッダーの画像が定期的に入れ替わったり、写真のスライドショーのように切り替わる表示方式がある。ただ入れ替わるだけでは面白くなく、そこにイフェクトが加わってこそ意味があるだろう。 黒目の部分だけ入れ替わる そんなイフェクトが110種類を越えて利用でき、さらに画像の透過処理を使って一部だけで差し替えもできるライブラリがTransm.jsだ。非商用であればフリー、商用利用のライセンスも用意されているソフトウェアだ。 Transm.jsを知るにはサンプルを見るのが一番早いだろう。フェードアウトしたり、上下左右から新しい画像が出てきたりと様々なイフェクトが可能だ。画像の中央から円形に沿って表示が切り替わる、HTML5を使った効果も多数あるので、対応していないブラウザもある。 Transm.jsの紹
すくいぬ WEBデザイン詳しい暇な人ちょっとニートを助けて
2024 07 ≪ 12345678910111213141516171819202122232425262728293031≫ 2024 09 1 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/11/24(火) 11:47:13.45 ID:ZAwq5sRE0 ちょっとカンプとかいうの作ったんで見て(´･.ゝ･`) 根本からダメなのはわかるけど完成だけはさせたいんで アドバイスおくれ(´･.ゝ・`) 見出しの中身・・・ 3 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/11/24(火) 11:52:02.96 ID:ZAwq5sRE0 こねえ(； ･`д･´) 4 名前：以下、名無しにかわりましてVIPがお送りします[] 投稿日：2009/11/24(火) 11:53:31.47 ID:ZAwq5sRE0 ぬ・・・ そうか、甘え
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
見るだけでも一見の価値あり！絵画のような美しいサイトデザイン集:phpspot開発日誌
Most beautiful websites of 2008 | CrazyLeaf Design Blog 見るだけでも一見の価値あり！絵画のような美しいサイトデザイン集ということで美しいサイトが多数紹介されていました。 単にサイトというには惜しい芸術作品ばかりで見るだけでも楽しめます。 Saizen Media Nem Studio Efingo Project Vino Kavoon Belvedere Inc Quality XHTML Avalon Star Level 2D mediaBOOM Sensi Soft Five Cent Stand Blogsolid Dana’s Garden OLDesign Trickeries FortySeven Media A.viary Kulturbanause Noe Design Studio 20CM Records 全部
ロゴデザインの際に参考にできるリソース集:phpspot開発日誌
The Ultimate List of the Top Best Logo Design Resources Below you will find galleries of logo designs for logo design inspiration. ロゴデザインの際に参考にできるリソース集。 Logo Of The Day 投票機能付きでどういうロゴが評価を得るか、という点も参考になります。 タグ検索機能付き Logo Pond クオリティの高い多数のロゴが見れる Fave Up こちらも投票機能付き。比較的大きいロゴ画像を一覧でシンプルに見れる Logo Sauce サムネイルで一覧表示。検索機能付きのロゴデザインまとめサイト Identity Archives 製品のロゴなどを検索できます。coke とか wii とかを検索してみましょう。 Logo Faves ロゴにカー
自分のページやサイトが各ブラウザでどのように見えるか確認できる便利なサイトいろいろ - GIGAZINE
サイトのレイアウトを変更したり、新しくデザインする際に使えるのがこのクロスブラウザテスト、要するに「それぞれのOSのそれぞれのブラウザで自サイトは正しく見えているのか？」をチェックするサイトです。予算と時間が潤沢であれば、自分で各種OSを揃え、各種ブラウザを導入してチェックできるのですが、あまりにも非現実的な場合が多いため、この手のテストサイトは非常に重宝します。 というわけで、デザインやレイアウトのチェックに使えるクロスブラウザテストのサイト一覧は以下から。 10 Helpful Resources for Cross Browser Testing Browsershots http://browsershots.org/ 見てのとおり、現時点ではほぼ最強に最も近い定番クロスブラウザテストサイトが「Browsershots」です。Linux・Windows・Mac OS・BSDの各種ブ
WordPress › WordPress Themes
Layout Grid Layout One Column Two Columns Three Columns Four Columns Left Sidebar Right Sidebar Wide Blocks Features Accessibility Ready Block Editor Patterns Block Editor Styles BuddyPress Custom Background Custom Colors Custom Header Custom Logo Custom Menu Editor Style Featured Image Header Featured Images Flexible Header Footer Widgets Front Page Posting Full Site Editing Full Width Template M
プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」:phpspot開発日誌
Free online web template generator プロレベルのWEBデザインをオンラインで簡単生成「doTemplate」。 doTemplateでは、基本となるテンプレートが12種類用意されており、「CUSTOMIZE」をクリックすることで自由にテンプレートをカスタマイズすることが出来ます。 カスタマイズを押すと、次のようなパネルが表示され、背景、コンテナ、タイトル、バナー、ナビゲーションなどの部分の色や各種サイズについてのCSSをカスタマイズすることが出来ます。 DOWNLOADボタンを押せばそのままテンプレートをダウンロードすることも可能。 ＺＩＰ形式でダウンロードでき、HTMLとCSS、画像が含まれたアーカイブを入手できます。 カッコよくデザインされたサイトを手軽に作るには非常に便利なツールですね。
ページ送り部分のデザイン研究:phpspot開発日誌
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine ページ送り部分のデザイン研究。 SmashingMagazine にて様々なサイトのページ送り部分を色々とまとめたエントリが公開されました。 なるほど、ページ送りといえど様々なデザイン方法があるようで、勉強になります。 色々なサンプルを見るうちに、自分のサイトのページャーはどんなのが合うか？といったことも分かってきそうです。 PHPでページャーを作る場合は、「PEAR :: Package :: Pager」を使えば簡単に作れます。
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
「最速インターフェースの研究と実践」メモ - 最速チュパカブラ研究会
昨日のSIGHCIのメモです。 最速インターフェースの研究と実践： ライブドア mala氏 まず、自己紹介を兼ねて概論 ブログ「最速インターフェース研究会」 WebのUIの進歩の停滞に対する批判を込めて名付けた 自分の肩書きは「インターフェースエンジニア」 よいUIを作るために「実体験に基づいたチューニングをしている」 自分で使ってみる ユーザの反応を見る 欲望に忠実に作る 作業としては、perl, html, jsの記述 「実のところ、プログラミングに詳しいと言える自信はないし、デザインのことも深くはわからないが、一人で一通りこなせる（完成品を作れる）という点は自分の強み。 よいUIを作るための作業は横断的。割り当てられた仕事をするだけの人ではダメ。」 作品紹介 2ch最速検索 キーボード操作だけでスレッド検索 まだAjaxは使っていない 「めくり型」UIの実験 スクロールしながら読むよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
I/O 3000
新着記事
IDEA * IDEA
スチーム速報 ＶＩＰ
