効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ
作成：2014/01/6 更新：2014/11/01 Webデザイン > Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配色 ９．Illustratorの使い方 １０．Photoshopの使い方 １１．バナー作成 １２．ボタン作成 フロントエンドエンジニア １３．HTML5 １４．CSS3／Sass １５．javascript １６．jQuery １７．WordPressテー
WordPressテーマ制作チュートリアル
この記事は、はじめてブログ用のオリジナル WordPress テーマを制作される方向けに書いたチュートリアル記事です。 なぜこの記事を書いたかというと、「WordPress でブログを作ってみたい、でも作り方がわからない」とおっしゃっている方が想像以上に多いことと、私が Webデザインスクールで WordPress ブログテーマの作り方を教えていると、想像以上にテーマ制作の基礎を理解していただくのが難しかったからです。 おそらく、HTML+CSS コーディングができる方であれば、この記事を読めばブログ用のWordPressテーマを制作できるようになるはずです。 このチュートリアルでできるテーマのサンプルファイルも以下からダウンロードできます。 実際のファイルを見ながら（あるいは作りこみながら）読むと理解が深まると思います。 WordPressのインストール まだレンタルサーバを借りていない
[CSS]3ステップでマスターする、スマートフォンやデスクトップなど異なるサイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアル
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に（主に）縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>～</head>に下記を記述します。 <meta
ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！ | バンクーバーのうぇぶ屋
WEB制作のチュートリアルって本当に多いですよね。 でも、本当に役に立っている、制作に生かせてるチュートリアルって少なくないですか？チュートリアルの過程が中途半端だったり、途中からついていけなくなったり。はたまた、続きは有料なんて物も今までありました。 しかし！僕の短いWEB屋人生ですが、年に2、3は『お、おぉぉ！マジテンション上がるWA！』と叫びたくなるチュートリアルに出会うことが稀にあります。そんな感銘を受けたチュートリアルは速攻でFacebookにアップしているのですが、今回は今日まで見てきた中で、余りにクオリティが高かったり、確実に自分や周りのスキル、そしてテンションを上げたチュートリアルを厳選してご紹介！ 英語記事メインですが、デザインよりならステップbyステップなのでなんとかなります！コードなら、Demoとか多いので見ながらついていけば理解できます！是非参考までに流し読みして見
WordPressのオリジナルテーマ作成フロー・基本マニュアル
初めてWordPressオリジナルテーマの作成にトライしたい、という方向けの基本のマニュアルです。マニュアルというほど大袈裟なものではありませんけど、ある程度敷居が低くなると嬉しいなぁという思いを込めて記事にします。 この記事の内容はあくまで基本中の基本で、初心者・ノンプログラマー向けとなっていますので応用的な情報は殆どありません。また、説明の仕方も分かりやすさ重視で、厳密的にはちょっと違う点もあります。 初心者さん向けに、もう少し情報があってもいいかなと思って、書いてみることにしました。僕もまだまだ初級レベルなので一緒に学んでいきましょう。初級者レベルでこんな記事書くなって話ですけども。 目次 目次です。各セクションで必要と思う場所から見るようにしてください。 はじめに 作成するWebサイトの目的と構造 テーマ作成前に用意するものと環境 テーマの構造を（触り程度だけでも）理解する HTM
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
オリジナルテーマの作り方 3.0+
2014年8月22日 Wordpress WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者には少し難しいWordpressのカスタムデザイン。Wordpressのテーマがどのように動くのか、スタティックのHTMLテンプレートにどうやってWordpressの機能をつけるのかを説明していきます。PHPの知識は必要ありませんが（もちろんあった方が楽ですが）、自分でデザインをするためのPhotoshopとCSSの知識は必要です。 ↑私が10年以上利用している会計ソフト！ WordPress オリジナルテーマの作り方 3.0+ WordPress オリジナルテーマ作成 完璧ガイド WordPressをローカルにインストールする WordPress オリ
[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル
階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス） レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could
twitter facebook hatena google pocket 長谷川恭久（@yhassy）さんのブログcouldで使用されているscriptがよかったので紹介します。 なお、コンテンツも非常に読み応えがあるので、購読をお勧めします。 さて、couldでは、記事詳細を読み進め、ある位置までくると上からソーシャルブックマーク系が降りてきます。 記事後半まで読んでくれた意欲の高い人に対しアピールが出来、ソーシャルメディア上の伝播がより期待できます。 購入ボタンやお問合せボタンなどを置いてもいいかもしれません。 わりとシンプルな記述なので、苦労なく導入できると思います。 sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 ■JavaScriptの記述 <script type="text/javascript" src="jquery-1.4.2.m
![[チュートリアル]jQueryでページの所定位置まで来たら要素表示 via could](https://cdn-ak-scissors.b.st-hatena.com/image/square/11ca1ab33e936fcf16e770dfbd7067653fbb7d52/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F09%2FjslideBox-thumb-300x200-514.jpg)
無料ですさまじく使い勝手が良く参考にもなるPSDファイルのウェブデザインテンプレート10種類
ネット上には時として「こんな高品質なものが無料でよいのか？」というオドロキがありますが、まさに今回のPSDファイルはそれです。実際に使うのも良し、デザインの参考にするのも良し、非常に価値あるものとなっています。 ダウンロードは以下から。 10 Beautiful PSD Web Templates Of July 2010 For Free Download ◆その1：FreePSDTheme >> Free “Black Eve” PSD 以下の6種類で構成されています。 about.psd blog.psd contact.psd index.psd media.psd services.psd ◆その2：FreePSDTheme >> Free “PixelStudio” PSD themeforest_pixelstudio.psdが1つあり、その中に全部入っています。 ◆その3：
60個のソースが無料でダウンロードできるFlash 3Dの学習サンプル集 | ClockMaker Blog
当ブログではFlashの3Dに関する記事を数多く書いていますが、この度それらの記事をこの1ページにまとめてみました。系統別にまとめたので、目的とする解説やサンプルが探しやすくなったのではないかと思います。それぞれの記事でソースファイルをダウンロードできますので、学習の理解にお役立てください。 Flashの3Dエンジンで最もメジャーな「Papervision3D」を中心にブログ記事を書いています。 Papervision3D – チュートリアル クリックで再生できます フレームア クションで覚える PV3D チュートリアル Vol.01 フ レームアクションで覚える PV3D チュートリアル Vol.01 (補足) フ レームアクションで覚える PV3D Vol.02 : Primitiveを理解する フ レームアクションで覚える PV3D Vol.03 : Materialを理解する フ
WordPressのマルチサイト機能で複数のブログを管理する
ちょんまげ英語塾 > WEB制作TIPS > WordPressのマルチサイト機能で複数のブログを管理する WordPress(ワードプレス)のマルチサイト機能とは ※WordPress の解説及びインストール方法については、WordPressをxreaにインストールするで解説していますので、まずはこちらをお読みください。 WordPress 3.0 から、いままで WordPress MU でのみ提供されていた一つの WordPress で複数のブログを管理する機能(マルチサイト機能)が統合されました。このページではデジロック社が運営している xrea や coreserver といったレンタルサーバにインストールされた WordPress でマルチサイト機能を使って複数のブログを管理・運営する方法を解説します。※他社のサーバを使ってる方へ 一言でマルチサイト機能と言ってもブログの公開U
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
facebookページとは／企業Facebookページ制作マニュアル：18個の手順 【タイムライン対応・制作編＆集客編】 | Facebookページ活用 実践ガイド
IBM Developer
IEにも対応！10分でできるWebフォント実装法 (1/3)
xml+FlashのギャラリーをWordPressテーマ化し、更新出来るようにする為の作成チュートリアル
実践！iPhone＆Androidサイト制作ガイド
【ネタ帳】HTML5に関するチュートリアルやTipsなどのまとめ + 25記事*二十歳街道まっしぐら（FC2ブログ時代）