タグ

webdesignに関するsnaka72のブックマーク (11)

  • GitHub - FortAwesome/Font-Awesome: The iconic SVG, font, and CSS toolkit

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - FortAwesome/Font-Awesome: The iconic SVG, font, and CSS toolkit
    snaka72
    snaka72 2012/06/18
    via MOONGIFT
  • アクセシブルで、美しいフォームを実装するためのチュートリアル集 | コリス

    アクセシブルで、美しいフォームを実装するためのチュートリアル集をnoupeから紹介します。 Beautiful Forms - Design, Style, & make it work with PHP &a [...]

  • メガメニュー、Webサイトデザインの新常識 | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 向こう半年の間でメガメニューがいたるWebサイトにあらわれるだろうという予測がSitePoint: Mega Menus: the Next Web Design Trendで紹介されている。予測のベースになっているのはJakob Nielsen氏が23日に公開したMega Drop-Down Navigation Menus Work Wellのようだ。Jakob Nielsen氏はNielsen Norman Groupの会長を務めるとともに、Webデザインユーザビリティの権威として名が通っている人物。 Mega Menus: the Next Web Design TrendではWebデザイナがナビゲーションをデザインする場合はたいだい次の

    snaka72
    snaka72 2009/08/08
    test
  • Design a Beautiful Website From Scratch | Envato Tuts+

    Have you ever wanted to design a beautiful website but just didn't know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I'm going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I wi

    Design a Beautiful Website From Scratch | Envato Tuts+
    snaka72
    snaka72 2009/04/30
    あとで読む
  • プロペパ君で作るオーソドックスなWebサイトのレイアウト(9パターン)

    春ですね。 「プロペパ君」(『キッズのための、紙で作るWebサイト(というかページ)設計』)の別バージョンを作ってみました。 少しパーツを増やしてみました。LEGOと一緒でパッケージになりすぎると想像力が刺激されなくなると思いつつも試しに増やしてみました。(そのうちpdfにするかもしれません)追記:しました。記事の終わりにあります。 地道にはさみでチョキチョキ・・・。 写真じゃわかりにくいですが、なんと今回はマグネットでペッタンコです。 では、Webでよく使うレイアウトをどこまで作れるかチャレンジ開始。(3カラムはやってません。第三の目で適当に右か左にナビゲーションを想像して追加してみるといいかもしれません。) ■トップページなどで多いオーソドックスなタイプ コンテンツ部分が広めで余りがち。トップはやはり配置するものがどうしても多くなるので、項目が多い場合は、あとでバナーをぺたぺた貼る羽目

    プロペパ君で作るオーソドックスなWebサイトのレイアウト(9パターン)
  • dustinbrewer.com - dustinbrewer リソースおよび情報

    dustinbrewer.com は、dustinbrewerに関する情報用の最新かつ最適なソースです。一般的興味の問題に関連するトピックもここから検索できます。お探しの内容が見つかることを願っています!

    snaka72
    snaka72 2009/04/09
    OSX, Windows, LinuxそれぞれのFontの対応表
  • タイポグラフィック・グリッド作成アプリケーション - lab

    http://lab.allianceport.jp/web-typography-app/web_typography/ 私が印刷とウェブのデザインの比較について興味を持ち始めたのは、まだ私が学生だった頃なので、もう 10年近くも前になります。当時、Josef Muler Blockmannの『Grid System』をもとに、ウェブデザインへのグリッドシステムの応用を考えていました。その頃から「メディアによる再現性の違いを理解し、一つの理論をそれぞれに展開する」という考えをベースに、実用的なツールをつくりたいと思っていました。 グラフィックデザインには、グリッド・システムというデザイン手法が存在します。グリッドシステムとは、書籍デザインにおいて、全ページを同じグリッド上で展開することで、ページ全体に統一性を持たせ、レイアウト上の判断を効率的に行うツールとして、全世界のデザイナーに使われ

  • 標準の日本語フォント / もうパンツはかない

    各環境でどんな日フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日フォントCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sonoma (14) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino S

    標準の日本語フォント / もうパンツはかない
    snaka72
    snaka72 2009/01/18
    各OSで使える日本語font-family
  • 送信ボタンの上にリンクがあればtabindex=-1に | ランサーズ社長日記

    いいね! 1 ツイート B! はてブ 86 Pocket 8 入力フォーム間の移動はマウスで行いますか?tabで移動しますか? 例えばtabでログインフォームを移動していて、IDとパスワードを入力して、送信ボタンを押そうとする時に、送信ボタンの上にリンクがあって、間違ってリンクを押してしまい、とてもストレスを感じたことはありませんか? 年始に興味がわくような話題ではないかもしれませんが、ちょっとしたTIPSに。。 ライブドアさんを例に出して申し訳ないのですが、ライブドアさんのログイン画面には「ID・パスワードを忘れた方」というリンクがあります。 パスワードを入力した後にtabを押すと、このリンクにカーソルが当たります。フォーム間の移動をtabで行い、最終フォームに来ると「tab + Enter」が癖になっている人に取って、このリンクを間違って押してしまうことが結構あります。リンク後に戻って

  • Webページをデザインするときにお世話になったサイト - これ僕.com:行動分析学マニアがおくる行動戦略

    いま、次のWebアプリを作ってて、画面デザインから作成しているのだけど、角丸や配色なんかでお世話になったサイトをメモ的にあげておこうと思う。 角丸 角丸ライブラリ - tikeda::Diary 最近角丸を作る機会が多かったので、今後の為に色々整理してたんですが、公開しておきます。使えそうだったらいじって使ってください。 これは最高にありがたい。角丸をさくっと作れるCSSとイメージファイルがセットで提供されています。 404 Not Found こちらもありがたい。色や高さ、幅を指定すると、角丸の画像を作成してくれます。デザインスキルがない(ソフトもない)から、こういうのは当に助かる。 配色 Design Meltdown § Top 20 Most Popular Blog Colors According to Technorati.com the follow blogs are

    Webページをデザインするときにお世話になったサイト - これ僕.com:行動分析学マニアがおくる行動戦略
  • 使いやすいタブ型ナビゲーションの5つのポイント

    The Usability Postのエントリーから、押さえておきたい、タブ型ナビゲーションの5つのポイントを紹介します。 5 Steps for the Perfect Tabbed Navigation Menu キャプチャ画像は、使いにくいタブ型ナビゲーションのサンプルです。 現在位置は「Site Details」と「Statistics」のどちらに見えますか? タブがより大きく、下のグレーと同じ色だから「Site Details」ですか? タブのすぐ下の白色が同じだから「Statistics」ですか? 下記は、使いやすいタブ型ナビゲーションを実装する5つのポイントです。 アクティブなタブとコンテンツの接点 アクティブなタブと他のタブの色 アクティブなタブのテキストの色 タブのリンクエリアの大きさ タブの来訪時の状態 アクティブなタブとコンテンツの接点 アクティブなタブは、そのコンテ

  • 1