タグ

webデザインに関するtomhiroのブックマーク (10)

  • HTML5 基礎知識 - web探検隊

    HTML5を書くための基礎知識をメモHTML5の雛形XHTML5ではなくてHTML5のマークアップについて html> head> title>HTML5 基礎知識title> meta charset="UTF-8"> head> body> body> html> HTML5の新要素 文章構造に関するものsection汎用的なセクション。文章のアウトラインを構成する。articleセクションの一種で、Webページから独立したコンテンツを表す。asideセクションの一種で、外側のセクションに対する補足情報を表す。navセクションの一種で、外側のセクションに対するナビゲーションメニューを表す。footerセクションのフッター。headerセクションのヘッダー。hgroup複数の見出し(h1-h6)をまとめる。 外部コンテンツの埋込みfigureキャプションを伴うような内容のものを文章中に埋

  • ハイパーテキストリンクのスタイル大全

    ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク(リンク)はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです

  • Adobeのブラウザ表示チェックサービスBrowserLabが凄い件 - よねのはてな

    Adobeさんが、クロスブラウザ表示テストサービス BrowserLabを開始したので使ってみました。 https://browserlab.adobe.com/index.html このサービスを使うと、以下のブラウザでの表示テストが可能です。 Windows XP Firefox 2.0(2.0.0.18) Firefox 3.0(3.0.13) Firefox 3.05(3.5.3) Internet Explorer 6.0(6.0.3790.3959) Internet Explorer 7.0(7.0.5730) Internet Explorer 8.0(8.0.6001.18702) Chrome 3.0(3.0.195.27) Mac OS X Safari 3.0(3.2.3) Safari 4.0(4.0.3) Firefox 2.0(2.0.0.18) Firefo

    Adobeのブラウザ表示チェックサービスBrowserLabが凄い件 - よねのはてな
  • フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 | De...

    フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 デザインに大きな影響を与えるフォント。様々なフォントがリリースされていますが、今回紹介するのはフリーで使えて、なおかつ、クオリティの高いフォントを集めたエントリー「50 First-class & New Downloadable Fonts For Professional Designs」を紹介したいと思います。 7 days スタンダードなものから、クリエイティブなものまで、様々な種類のフォントが全部で50種類紹介されています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Harabara ゴシックの堅いイメージを残しながらも、独特の加工で柔らかい印象もプラスしたフォント

    フリーで使えるプロフェッショナルなフォント集「50 First-class & New Downloadable Fonts For Professional Designs」 | De...
  • 「2009年のWeb制作情報のまとめ」のまとめ - かちびと.net

    復習用。探すのが面倒なので備忘録的 に2009年のまとめをまとめます。時間 がある時に見て自分の必要なものを 確認しようと思います。同じお思いの 方とシェアしようと思ってエントリー。 Web制作関連のみになっています。 かなり時間がかかりそうなので正月辺りにもチェックします。こういうのは一気にやりたい。 100 Best Photoshop Tutorials From 2009 Photoshopチュートリアルベスト100。膨大な量です。 100 Best Photoshop Tutorials From 2009 The Best Free Fonts of 2009 2009年のベストフリーフォント12個。50 Best Free Fonts From 2009も同サイトで発表されました。 The Best Free Fonts of 2009 The Best jQuery Plu

    「2009年のWeb制作情報のまとめ」のまとめ - かちびと.net
  • http://www.designwalker.com/2009/11/corporate-tutorial.html

    http://www.designwalker.com/2009/11/corporate-tutorial.html
  • Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト

    題名の通りですが、これから Webデザインに手を出そう、 という方の為に日語サイト で説明が凄く分かりやすい サイトと少しチュートリアル記事 の紹介です。 Webデザインを始めたいけどadobeのソフトは高額でなかなか手軽に始められません。まずはほぼ同等の機能を持ち、しかも無料で手に入るGimp(Photoshop代替ソフト)とInkscape(Illustrator代替ソフト)で様子見をしてみてはいかがでしょう。 使い方や実践チュートリアルを丁寧に説明してくれるサイトをご紹介します。「これなら触ってみよう」という気になれるかと思います。沢山あげられると選べずに萎えるので1,2サイトに絞りました。両ソフトのダウンロードもリンク先で出来ます。 プロも使ってるといわれるGimp。Webデザインをこれから始めようと思ってもなかなかとっつき難いかもしれません。ですので扉となってくれそうなサイトを

    Webデザイン事始め・まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト
  • 白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ

    最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ&シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw

    白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ
  • 2010年に備えて、知っておきたいウェブデザインのトレンド

    2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト

  • IE 6で泣かないための、9つのCSSハック (1/3) - @IT

    有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE(Internet Explore)のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー

  • 1