タグ

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

  • 独学でWebデザイナーの必須スキルを身につける方法 - DESIGNMAP

    この記事は2010年に書いた記事です。2015年に書いた増補改訂版があります。 「Illustrator、デザイン - まったくのゼロから、独学でWebデザイナーになるためのロードマップ【Vol. 1】」(2015年3月) 大まかな身につけるステップだが、まず、基スキル(Illustrator、Photoshop、HTMLCSS、デザインルール)を学んでいき、プラスアルファでスキルを積んでいくとよい。 の選び方のコツ、チュートリアル形式のからはじめよう 独学でを選ぶ時は完全なチュートリアル形式(ひとつのウェブページをゼロからつくっていく形式が理想)になっているかどうかを確認しよう。できれば屋にいってチュートリアル形式かどうかを確認したほうがよいだろう。手順にそってに従いながら時間をつくって勉強していこう。実はこの形式のは作るのがめんどうなので数は少ない。 リファレンス形式

    parakoba
    parakoba 2011/06/26
    webデザインを学ぶにあたって必要な基本項目が書かれている。参考書はここに書かれている本を選んでみるのも良さそう。
  • HTMLの外部ファイル化

  • WEB色見本 原色大辞典 - HTMLカラーコード

    原色大辞典とは 原色大辞典は1997年にオープンしたネットの色見サイトです。 9種類の色見と色に関する各種サービスから構成されています。 色見コンテンツは ブラウザで定義されているHTMLカラーネーム、 日の伝統色、 世界の伝統色、 Webセーフカラー、 パステルカラー、 ビビッドカラー、 モノトーン、 地下鉄のシンボルカラー、 国鉄制定の塗装色 の9つから構成され、特に日の伝統色は古来伝わる先人の色彩感覚を現代に伝えるものとして多くの方々から支持をいただいています。 文字列と背景色の組み合わせを試せる配色大辞典、 規則性のある組み合わせから色を選べる配色パターン。 色見の他にも、今日のラッキーカラー、 コトバから色を解析して調合する成分解析、 ストライプを生成するストライプメーカー、 グラデーションを生成するグラデーションメーカー、 あなたの好きな色と色を調合する色調合、 サ

    WEB色見本 原色大辞典 - HTMLカラーコード
  • 見出しの装飾

    見出しを枠線で装飾しよう ホームページは、見出しが正しく記述されていると訪問者にとって快適に閲覧することができます。見出しを見てどんな内容が記述されているのか、だいたい検討がつきます。見出しを定義するタグには<h1>〜<h6>があります。このタグに囲まれた部分は太字で、前後に空白が作られます。<h1>は一番上位の大きな見出しでページ内のタイトルを指定するのが一般的です。数字が大きくなるとレベルも下がります。 正しく見出しを記述しておけば検索エンジンにもとても有効になります。このページでは、HTMLだけでは表現できないいろいろな装飾をスタイルシートを使って<h1>に取り入れ、アクセントのある見出しを作ります。 スタイルシートでのボックスについて スタイルシートで h1 に装飾を指定する前に、スタイルシートでのボックス(箱)について知っていると分かりやすいと思います。今回は下の図にある青い枠線

  • CSSデザインテンプレート

    CSSデザインテンプレートでは、HTML+CSSを利用したホームページ用テンプレートを配布しています。このサイトのCSSテンプレートを見るにはレイアウトを、配色を考えている人は配色ツールをご覧ください。 このページの下部でCSSテンプレートの配布サイト・参考サイトへリンクしています。どれも参考になるサイトばかりですのでCSSを学ばれる方は、ぜひ足を運んでみてください。新しい発見がありますように。 ホームページ作成関連ツール 文字サイズ・行間 確認用ツール 配色ツール CSSテンプレート配布サイト CSSのみでレイアウト Webデザインテンプレート集 〓ダブルバキバキ〓ホームページ作成高速化計画 読み物がおもしろい。 てんぷれの天ぷら アフィリエイト用のテンプレートを配布 HTML+CSSテンプレート配布サイト table要素+CSSでレイアウト WEB MAGIC ホームページフリー素材

  • ウェブデザインにおける効果的なコミュニケーションの取り方

    ウェブデザインにおける明確で効果的なコミュニケーションの取り方をSmashing Magazineから紹介します。 Clear And Effective Communication In Web Design 下記は、簡潔に意訳したものです。 1. コミュニケーションのアプローチ方法 ウェブサイトの来訪者とコミュニケーションを取るためのアプローチ方法をいくつか紹介します。 テキスト 見出しやコンテンツ内にかかわらず、来訪者はテキストをメッセージとして受け取ります。コミュニケーションにおいて、極めて重要な要素です。 画像 画像は、テキストよりもすばやくメッセージを伝えるときがあります。画像を作成する際は、メッセージを魅力的に伝えられるようにします。 タイトルとヘッダ タイトルとヘッダは、来訪者に主要なポイントと考えを伝える重要で効果的なものです。 アイコン アイコンはウェブデザインの特徴的

  • ウェブデザイナーの作業を助ける12のオンラインツール

    カラースキームの作成、フォントの作成・選択、画像編集などウェブデザイナーの作業を助ける12のオンラインツールをSix Revisionsから紹介します。 12 Useful Web Tools for Designers

  • SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳

    これ、ちょっといいかもですね。FormFiftyFiveではメインの記事以外がデフォルトでは薄暗くなっています。マウスオーバーするとはっきり見える、という仕組みですね。 ↑ 普通はこう。 ↑ 右側のサブのコンテンツにマウスオーバーするとちゃんと見えます。 メインのコンテンツに集中してもらいたいときに良いかもですね。 » FormFiftyFive – Design inspiration from around the world » Blog Archive » Campbell Hay

    SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳
  • 1