コーディングの基礎は入力しながら覚える!

HTML/CSSを使ってWebサイト(ホームページ)が作成できるようになるためには、コーディング力を上げる必要があります。まずはコードを模写コーディングしながら、目でコードに慣れましょう。コードに慣れてからコードの内容を覚えて、どんなコードも書けるように練習しましょう!

はじめてのホームページ基礎講座(HTMLとCSS)

基礎講座では、HTMLマークアップを中心にコードを模写していきます。[初心者向け] まずは1回目から>>>

ホームページ中級講座(HTMLとCSS)

中級講座では、全体のコードを外部スタイルシートに記述[中級者向け] まずは、01 ホームページ中級講座 ナビゲーションの作成(HTML)

レスポンシブウェブサイトの練習

レスポンシブなWebサイト練習では、デベロッパーツールを使って、メディアクエリを理解します。

ポートフォリオとは?作成するための手順

ポートフォリオとは?必要なコンテンツを載せて作成していきましょう

Webデザイナーに必要な資格

ウェブデザイン技能検定を受験しよ

Webデザイン業界で、唯一の国家資格と呼ばれる、ウェブデザイン技能検定とは?学科と実技の受験概要から理解しよう

この講座をマスターすれば実技は合格可能!

ウェブデザイン技能検定では学科と実技を受験します。実技と学科をこの動画からしっかりと傾向と対策をおさえよう!

副業のために必要なデザイン講座

バナー作成講座 まずは基本のサイズとフォント設定

Photoshopを使ったバナー作成講座。作成の際に必要なサイズ設定から、ガイド線を使った作成。書き出しまで1回から4回まで

バナーをIllustratorで作ってみる 設定から

5回目からはIllustratorを使ったバナー作成。サイズ設定から書き出しまで。

新着一覧

  • 02 イラストレーター曼荼羅模様 リフレクトを使ってリーフ

    リース模様を作る オブジェクトを作成後、パスファインダーの交差 オブジェクトツールより楕円をクリックして100px*100pxの正円を作成します。 option(WindowsはAlt)キーを押したまま、ドラッグして右に […]

    And More…..

  • 01 イラストレーター曼荼羅模様 まずは基本の回転ツール

    イラストレーターで曼陀羅模様を作ろう! Illustratorで、回転ツールを使って曼陀羅模様を作る工程です。ここでは、オブジェクトを書くことと、そのオブジェクトを変形させ、基準点を変更した回転ツールを使って、オブジェク […]

    And More…..

  • 02 レスポンシブホームページ基本講座 ブレイクポイント

    レスポンシブホームページ基本講座2回目の講座です。今回はレスポンシブデザインでは、必須の「ブレイクポイント」を解説していますので、1回目はがまだの場合は、レスポンシブホームページ基礎講座1回目をご覧ください。 画面を可変 […]

    And More…..

  • 01 レスポンシブホームページ基本講座

    レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。 meta viewportビューポートの設定は必須 V […]

    And More…..

  • 00 レスポンシブホームページ講座 (検証ツール)

    レスポンシブホームページ制作講座の初回講座です。 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。 今回のレスポンシブホームページ基礎講座は、そ […]

    And More…..

  • Photoshopを使った横長簡単バナー作成2

    10分で簡単バナー作成 Photoshopを使って写真サイズ変更後、切り抜きツールを使い細長いバナーを作成します。作業時間はおよそ10分です。 今回の写真は、下記のskuawk.comさんからカテゴリー>food からカ […]

    And More…..

  • Photoshop を使って簡単バナー作成1

    5分でできる簡単バナー作成 Photoshop を使って簡単なバナー作成を行います。使うツールは、 範囲選択のクィック選択ツールとレイヤーマスク レイヤースタイルのグラデーションオーバーレイ ブラシツール(キラキラブラシ […]

    And More…..

  • ポートフォリオ・制作実績講座(転職・フリーランス・在宅)

    ポートフォリオとは? 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブな業種の採用には、必ずと言っていいほど求められるでしょう。履歴書や […]

    And More…..

  • 06 バナー作成講座 バナーをIllustratorで作って書き出し

    在宅・フリーランスになるためのバナー作成講座・イラレ編 6回目のバナー作成講座は、5回目からの引き続き下半分のデザインをIllustratorで作成していきます。上記のようにSALE 詳細はこちらの文字をアピアランスで、 […]

    And More…..

  • 05 バナー作成講座 バナーをIllustratorで作ってみた 

    在宅・フリーランスになるためのバナー作成講座・イラレ編 5回目のバナー作成講座は、Illustratorで、バナーを作成してみよう〜となります。上記のようなバナーを作成しますので、Illustratorの機能もいくつか紹 […]

    And More…..

  • 04 バナー作成講座 PSDファイルからの書き出し

    在宅・フリーランスになるためのバナー作成講座 アートボードを使って、もう一つバナーを作ってみよう 上記のように画面に複数のバナーなどを配置することが可能です。今回は同じサイズですが、異なるサイズでもOKです。 Phtos […]

    And More…..

  • 03 バナー作成講座 背景に写真・さくら吹雪のブラシ

    在宅・フリーランスになるためのバナー作成講座 バナーの背景向きな写真 バナーの背景写真は、上記のサイトにあるように真ん中に必ずテキスト文字が入るので、フレームのようによけて左・右端にあるものがベストです。今回の動画もフレ […]

    And More…..

  • 02 バナー作成講座 コピー文をバナーらしく載せる

    在宅・フリーランスになるためのバナー作成講座 キャッチコピーの選抜 バナーに入れる効果的な文字列 まずは手書きでだされたお題に合わせて効果的な「キャッチコピー」を考えます。 クラウドソーシングやバナー単体で、バナー作成の […]

    And More…..

  • 01 バナー作成講座 まずは基本のサイズとフォント設定

    在宅・フリーランスになるためのバナー作成講座 バナー作成するための準備 バナーを作成するアプリは、特にこれでないとダメ!と決まりがあるわけではありません。使いやすい、慣れたプログラムでもかまいません 但し、Webデザイン […]

    And More…..

  • コードが爆速で入力できる。 Emmet!プラグインの使い方

    模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 EmmetでHTMLのタグを入力してみようっっw […]

    And More…..