明るめ どっとコム【education版】

コンテンツ一覧

• 最新情報｜
• 配布資料

• HTML/CSS関連｜
• Web標準関連｜
• Webデザイン関連｜
• ソフトウェア関連｜
• ハードウェア環境

---

最新情報

明るめどっとコム（制作中ソース）

近日リニューアル予定。現在は外部リンクだけの内容となっていますが、オリジナルコンテンツを追加した上で、ラボラトリ活動の一環として今後も継続いたします。

• 明るめどっとコム【education版】制作中！！！！

製品版フォント集

• 改訂4版TrueTypeフォントパーフェクトコレクション
• FONT×FAN HYBRID（フォントファン ハイブリッド）
• DynaFont プラチナパック TrueType

個人向け事務用品・文具等の販売サイト

• 生活用品のネット通販：アスマル 明日のeマルシェ！あすまる (アスクル グループの個人向け通販サイト)

印刷および印刷用テンプレート関連

• 印刷のことなら印刷通販【プリントパック】
• テンプレートダウンロードサービス【プリントパック】
• ご利用ガイド【プリントパック】

名刺デザイン関連

• 名刺 作成・名刺 印刷は選んで作れるデザイン名刺! | デザイン百貨店
• 名刺の作成は名刺専門店で! 1000種以上の名刺デザイン | デザイン名刺.net

封筒デザイン関連

• 封筒デザインテンプレート 封筒.net
• 封筒印刷やオリジナル封筒デザイン作成（会社封筒、学園、病院や団体、役所関連封筒用）｜デザインサンプル
• 封筒デザイン一覧～封筒のデザイン by 名刺ハウス【Envelope House】
• あなたのオリジナル封筒デザインをコンペ開催！ 封筒デザイン・・クリエイティブ、デザイン系専門のコンペ情報サイト

ポートフォリオ作成

• ポートフォリオの作り方 - ウェブデザイナーになるには
• 具体的なポートフォリオの作り方の流れ - ウェブデザイナーになるには
• ポートフォリオ作りに参考になるクリエイター向けの6冊の本 - ウェブデザイナーになるには
• ポートフォリオ7の法則 | モノストック｜mono stock
• ポートフォリオとは | Webデザイン講座オシャレチップス
• ポートフォリオの作り方 | Webデザイン講座オシャレチップス

Power Point、OpenOffice Impress 関連

Power Pointの使い方

• パワーポイント１１９／パワーポイント使い方講座
• パワーポイントの使い方｜All About
• パワーポイント・PowerPointの使い方

OpenOffice Impressの使い方

• Open office.org 使い方　Impress 編
• Documentation/オープンオフィス3入門ガイド/Impress:OpenOffice.orgのプレゼンテーション機能

転職支援

• 転職・求人情報サイトのマイナビ転職
• 転職ノウハウ | 転職・求人情報サイトのマイナビ転職
• 履歴書・職務経歴書・作品集　応募書類のつくり方
• 職務経歴書の作り方｜マスコミ・広告・Webの求人情報・転職支援ならマスメディアン
• Webクリエイターのための転職力アップ法 － 転職ならDODA（デューダ）
• Webクリエイターのための“人事に響く”職務経歴書の書き方
• 転職マニュアル【完全版】

迷惑メール対策

• メールアドレスをスパム（迷惑メール）送信業者から守る方法
• HTMLエンティティ化

写真撮影（物撮り）関連

• 物撮りの基本　第１回　マグカップを撮る
• ネットオークションで勝てる物撮テクニック
• 澤口留美の　オークション物撮り講座　目次　～　はじめに　～
• 今日から始めるデジカメ撮影術 - ITmedia +D LifeSt
• ASCII.jp：プロが教えるデジカメ撮影テクニック

HTML／CSSテンプレート関連

• ホームページ無料テンプレート｜LUNA-WEB
• Web大好きどっとこむ//Webテンプレート,Webデザイン
• ホームページテンプレート無料配布 pondt
• 無料ホームページテンプレートのNikukyu-Punch
• 無料ホームページ作成・無料ホームページテンプレート提供　Design Template T&S

CSSハック関連

• CSS-only Filters Summary（英語）
• centricle : css filters (css hacks)（英語）
• Webブラウザ別CSSハック＆フィルタTips - ＠IT

TeraPad（テキストエディタ）関連

• 簡単で便利な検索と置換｜テキストエディタ(TeraPad)
• テキストエディタ「TeraPad」の使い方

Webプログラミング実習

• Webプログラミング実習時作成ファイル
• lightbox作成手順
• jQueryスライドショー作成用素材

Webクリエイター能力認定試験

• 試験実施概要
• 公認テキスト&問題集（公式ページ）
• 「Webクリエイター能力認定試験 公認テキスト&問題集」補足資料の提供について
• 受験者用リファレンス
• 【再ダウンロード用】模擬試験、過去問題データ

Lightbox関連

• Lightbox 2 公式サイト（英語）
• 別窓を開かずに、その場で拡大画像を表示！ - [ホームページ作成] All About
• LightBoxの使い方とカスタマイズ方法

jQuery本体関連

• jQuery公式サイト（英語）
• jQuery日本語リファレンス
• jQuery入門 (ver 1.3)
• Web制作の現場で使えるjQuery　UIデザイン入門

jQueryライブラリ関連

• jQuery Cycle Plugin（英語）
• jQuery Cycle Plugin - Beginner Demos（英語）
• jQuery Cycle Pluginの使い方
• jQuery Cycle Plugin　１枚の画像を次々と表示するjQueryのスライドショー

JavaScriptリファレンス＆サンプル関連

• 一撃必殺JavaScript日本語リファレンス
• JavaScriptリファレンス｜AllAbout
• JavaScriptで作るＨＰのテクニック [コンテンツ一覧]
• JAVAスクリプト＆DHTML サンプル
• JavaScript サンプル

JavaScript関連

• JavaScript入門｜初心者のためのホームページ作り
• JavaScript入門｜パズルネット 智慧（ソフィア）
• JavaScript入門｜AjaxTower.JP
• JavaScript入門＆サンプル集
• ささら庵：プログラム：JavaScript
• ささら庵：プログラム：JavaScript：日時を表示する
• ささら庵：プログラム：JavaScript：単月カレンダー

---

配布資料

• Webデザイナーのスキルチェックシート
• 明るめどっとコム【サンプルソース】
• 【参考用】メインメニューのサンプル
• IFC研修センター用Web制作ガイドライン【ver00-03】
• 【補足資料】CSSクラスタ
• グローバルメニュー素材
• CSSテキスト設定用サンプル（2カラム用）
• CSSレイアウトサンプル（2カラム用）
• ブロックレベル要素とインライン要素（HTMLクイックリファレンス）
• JavaScriptサンプル【カレンダー・日時・メニュー例】
• フェードプルダウンメニュー参考サイト
• ももタウンガイド【JavaScript素材】
• Flash配布素材
• Illustrator実践編11/30資料
• サイト企画概要
• サイト企画概要（記入例）
• ワイヤーフレーム用テンプレート（縦長）
• ワイヤーフレーム用テンプレート（欄外余白付・A4）
• カリキュラム＆制作スケジュール案

• 【追加】レイヤースタイル素材
• レイアウトデザインpsd素材
• 960 Grid System用psd素材
• カリキュラム日別計画表（修正版）
• 過去問題第1回自由問題
• 【Dreamweaver】制作ソース（11/12更新）
• HTML-Ⅱ（2カラムレイアウト編）
• HTML-Ⅱ（HTML文書構造編）
• HTML-Ⅰ&Ⅱ制作ソース
• HTMLサイト制作（１）

▲ページのトップへ戻る

---

HTML/CSS関連

(X)HTML関連

divタグの使いすぎに注意

• なんでもCSSで解決しようとする「CSS病」
• div要素 -- 汎用ブロックレベル要素

HTMLタグの意味

• HTMLタグの意味一覧
  ※要素名ごとに英語表記をご覧いただけます。（例） h1～h6：heading、見出し etc.
• HTMLタグの読み方辞典
  ※要素名ごとに読み方をご覧いただけます。（例） a：アンカー、anchor etc.

HTMLタグについて

• HTMLクイックリファレンス
• TAG index
• XHTML HTML辞典
• Web標準HTMLタグリファレンス ─ デザインハック＠IT
  ※Web標準に基づいたXHTMLタグの正しいマークアップ方法のリファレンス一覧です。「正しい記述でマークアップしたい」というニーズをお持ちの方にお勧めのレファレンスです。

HTML5関連

• HTML5 における HTML4 からの変更点
• HTML5.JP
• HTMLで図まで描ける！進化した「HTML5」ってどんなもの？

CSS関連

CSSでロールオーバーを作成

• CSSで実現するスマートなロールオーバー
• ロールオーバーをCSSで実現する

id名、class名の命名ルール

• id名やclass名に命名規則をつける
  ※現在、ベターな書き方といわれているのが「キャメルケース」を使う方法です。id="mainContent"のように、2つ目の単語の1文字目のみ、大文字で記述するパターン。これは動作上の問題が無く、また可読性も若干上がるため、最近多く見かける書き方です。
• CSSのid・class命名規則
  ※id名、class名の書き方だけでなく、下記についても注意したほうがよいと思われます。それぞれ具体例が示されています。
• Naming conventions table
  ※欧米圏でのid/classの調査結果です。具体例としてかなり参考になります。

CSSレイアウト講座

• CSSレイアウト実践講座
• CSSによる段組（マルチカラム）レイアウト講座
• 2Step CSS - リアルタイムCSSレイアウト講座

HTMLとXHTMLの違い

• HTMLとXHTMLの違いはなんだろう？

▲ページのトップへ戻る

---

Web標準関連

オンライン文法チェッカー

• W3C Validator
  ※W3C提供の文法チェックツール。HTMLまたはXHTMLの文法に照らしその妥当性をチェックします。
• CSS Validator
  ※W3C提供の文法チェックツール。CSSを検証します。
  CSS Validatorの使い方
• Another HTML-lint
  ※単に文法的な観点のみならず、実装上好ましくないとされる点についてもチェックし、またその結果を点数で表示。

ソフトウェア

• Fujitsu WebInspector
  ※JIS規格とFujitsu独自のアクセシビリティ基準に基づいて、Webサイトをチェックするツール

ブラウザ用プラグイン

• Web Developer
  ※FireFox 用のプラグインです。ウェブスタンダード準拠からユーザビリティ・アクセシビリティの確認作業などを行えます。
• HTML Validator
• Web Accessibility Toolbar
  ※IE用のプラグインです。FireFoxのWebDeveloperとほぼ同等のプラグインです。

Webアクセシビリティ解説

• ウェブコンテンツ・アクセシビリティ・ガイドライン 1.0 チェックポイント・チェックリスト
• ホームページ制作者のためのＷｅｂアクセシビリティ解説書
• 環境省ウェブサイト作成ガイドライン（第２版）
• ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン
• 嫌われる企業webサイト基礎項目チェック表（こんな企業サイトは嫌だベスト20より）

HTML/CSSガイドライン関連

• 株式会社アイグローブ Webサイト制作ガイドライン
• XHTML X CSSコーディングラボ　チェックシート（株式会社アイグローブ）
• XHTML+CSSガイドライン
• XHTML CSS ガイドライン Beta ver 0.6.7
• コーディング ガイドライン
• 制作ガイドライン
• Web制作現場の対立を解消する！(X)HTML+CSSガイドライン作り
  ※ガイドラインの必要性などが上手く解説されています。

▲ページのトップへ戻る

---

Webデザイン関連

Photoshopスライス関連

• スライスの操作
• スライス範囲を変更する
• スライス範囲を削除する
• スライスを指定数／指定ピクセル数で分割する

Webデザインチュートリアル

レイアウトデザインを効率よく行う考え方

• 960pxのグリッドを基準にサイトレイアウトをする考え方「960 Grid System」
• 960 Grid System ? 知っておきたい5つのこと
• 960 Grid System（12／16 Column Grid）

デザイン制作からコーディングまでの流れ

ひとつのサイトのPhotoshopデザイン制作からHTML&CSSコーディングまで解説されています。

• Create a Clean and Professional Web Design in Photoshop（英語）
• Coding a Clean and Professional Web Design（英語）
• Clean and Professional Web Design（完成デモサイト）

日本語チュートリアル

• Dynamite Design Blog
• Photoshop Vip
• 日本語チュートリアル限定、覚えておきたいフォトショップのテキストエフェクト18個
• フォトショップで水滴で出来た文字を５分で描く方法

英語チュートリアル

• 80 Fresh Photoshop Tutorials For Creating Awesome Websites（英語）
• 20 High Quality Photoshop Web Design Tutorials（英語）
• 16 Best Photoshop Tutorials for Creating Web Designs（英語）
• Web Graphics | PhotoshopStar（英語）
• Tutorials - Six Revisions（英語）

デザイントレンド関連

• 2009年の Web デザイントレンド1
• 2009年の Web デザイントレンド2
• 2010年上半期Webデザインのトレンドまとめ

レイヤースタイル関連

• WebLab
• Photoshop レイヤースタイル
• Photoshop ドロップシャドウ チュートリアル
• Photoshop レイアウトデザイン チュートリアル
• Ultimate Roundup of 750+ Free Photoshop Layer Styles（英語）
• Create a Clean and Effective Product Layout（英語）

ワイヤーフレーム関連

• Wireframe Showcase（英語）
• The ultimate source of inspiration and collection of resources for wireframes（英語）

ワイヤーフレームからデザインが仕上がっていく行程

• Redesigning the ExpressionEngine Site（英語）

Webデザインギャラリー

• いけてるサイト ドットコム
• Webデザインギャラリー | I/O 3000
• Webデザインリンク集・ソーシャルブックマーク
• Web Design Clip [WEBデザインのクリップ・リンク集]
• Webデザインのリンク集 Webデザインポータルサイト S5-Style
• デザインリンクデータベース
• WEBデザインリンク集・デザインサイト一覧（週刊ウェブデザイン）
• WEBデザインのヒントに！WebSite Color Index：WEBサイトリンク集
• ウェブネタ：ウェブデザインギャラリー

ロゴデザイン関連

• ロゴ作成で困ったときにアイデアをくれるウェブギャラリーサイト15個まとめ
• ロゴ作成のときに知っておきたい40個の作り方チュートリアルまとめ
• Logo Design: 40+ Must Have Tutorials（英語）
• Creating a crazy cool logo（英語）
• Logo Design Process Tutorial（英語）
• ロゴマーク作成所

色見本、配色ツール

• WEB色見本 - 色見本大辞典
• ColorBlender.com
• ColorMatch Remix
• Color Scheme Designer 3
• ウェブ配色ツール Ver2.0

▲ページのトップへ戻る

---

ソフトウェア関連

Flash参考サイト

• [Flash] All About
• ゼロからFlash！
• Flashの基本
• クリエイティブ初心者のためのFlash講座
• Flash CS3入門　基本からActionScriptまで
• Flashでやってしまいがちな16個の間違った使い方

動画コンテンツ（Adobe TV）

• Adobe TV トップページ
• Learn Photoshop CS4
• Learn Illustrator CS4
• Learn Dreamweaver CS4
• Learn Flash Professional CS4

Dreamweaver参考サイト

• Dreamweaver CS3例文辞典
• 入門！Dreamweaver使い方講座

Webブラウザ設定

• Internet Explorer 6 の起動時に、通常使用するブラウザを確認するように設定する方法を教えてください。
  ※Internet Explorer を規定のブラウザとされる方のみご確認ください。Firefoxなど他のブラウザを「規定のブラウザ」としてご利用になる方は、そのままでOKです。

参考サイト：富士通 AzbyClub

Mac環境におけるFTPソフトについて

• Fetch日本語版Ver.5
  ※定番ソフトのようです。
• Cyberduck
• Macfusion
• Fugu

参考サイト：Macのホームページ作成ガイド

Webブラウザ関連

• IETester（IE5.5～IE8表示確認ツール）
• Firefox（Webブラウザ、フリーウェア）

画面キャプチャ関連

Windows用

• PHARMACY（フリーウェア）
  ※Webページを画像(BMP/JPEG/PNG)にキャプチャして保存

Mac用

• Paparazzi!：ウェブページのスクリーンショットを撮るためのユーティリティ
• Netfixer（Webページ全体をスクリーンキャプチャする）｜わかばマークのMacの備忘録

その他フリーソフト

• FFFTP（FTPソフト、フリーウェア）
  ※ver1.96をご利用の方は、ver1.97へアップデートしておいてください。
• Lhaplus（圧縮／解凍、フリーウェア）

▲ページのトップへ戻る

---

ハードウェア環境

ディスプレイの調整

• ディスプレイの簡易設定
• bungen's gallery ?ディスプレイ調整コーナー?

▲ページのトップへ戻る

---

copyright(c) akarume.com all right reserved.