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

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

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

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

ポートフォリオとは?必要なコンテンツを載せて作成していきましょう
Webデザイナーに必要な資格

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

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

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

5回目からはIllustratorを使ったバナー作成。サイズ設定から書き出しまで。
更新記事一覧
-
ウェブデザイン技能検定 学科 令和3年度 2回目(3級)
ウェブデザイン技能検定 学科 令和3年度の2回目(3級)の過去問解説を行っています。 ウエブデザイン技能検定 「学科令和3年度の2回目(3級)」の課題では、通常… -
Webデザイナーがおすすめするレンタルサーバー・比較
Webデザインを行う上で、レンタルサーバーの選択は非常に重要です。使い安く良いレンタルサーバーを選ぶことで、サイトの速度や安定性、セキュリティなど、様々な面でメ… -
WebデザイナーがおすすめするWordPress 無料&有料テーマ
Webデザイン会社や多くのユーザーに人気の高いCMS「Wordpress 」そのWordPressにはデザイン性の高い「テーマ」(テンプレート)が数多く用意されており、テーマは管理画… -
Visual Studio Codeのインストールとセットアップ
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用でき… -
ポートフォリオ「デザインカンプ」の作成
ポートフォリオのデザインカンプを作成する際には、以下のステップになります。 目的を明確にする:ポートフォリオの目的は何か、何を伝えたいのかを明確にすることが重… -
ポートフォリオ・制作実績講座[0]ゼロ Canvaを使って作成してみよう!
【ポートフォリオとは?】 分野や業界によって意味が違ってくるのですが、ここで言うポートフォリオとは、【自分をアピールする為の作品集】になります。クリエイティブ… -
ポートフォリオサイトの作り方
ポートフォリオとは、自分をアピールするためのプロフィールや、今まで作成した制作実績や課題などを掲載したWEBサイトのことです。就活やフリーランスで活動する場合は… -
ウェブデザイン技能検定3級の実技を通してやってみました!
ウェブデザイン技能検定は、学科と実技の課題を受検します。 ウェブデザイン技能検定は、実技検定があるので、受検を受ける際は、パソコンのWindowsですか?Macですか?… -
05 バナー作成講座 バナーをIllustratorで作ってみた
【在宅・フリーランスになるためのバナー作成講座・イラレ編】 5回目のバナー作成講座は、Illustratorで、バナーを作成してみよう〜となります。上記のようなバナーを作… -
07ホームページ中級講座 CSSで作成するロゴ
前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイル… -
ホームページ中級講座 Table要素を使って表組作成
ホームページ内で表組みを作成する場合はtable要素を使います。 ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今… -
19 ホームページ中級講座 footerを下部に固定
前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最… -
08 ホームページ基礎講座 CSSのwidthとmargin
前回07ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線(borderプロパティ)を中心としたデザインを設定し… -
はじめてのホームページ基礎講座(HTMLとCSS)
【初心者の方むけのホームページ作成講座】 はじめてのホームページ基礎講座では、HTMLを、Adobe Brackets を使って文章にマークアップをおこなう手順を行います。 Adob… -
11 ホームページ基礎講座 box-shadow
【今回使うHTML/CSSファイルの準備】 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成します。index.h… -
06 ホームページ基礎講座 CSSで横幅のwidthと線指定
前回の05はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定… -
04 ホームページ中級講座 display:flex のおさらい
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの… -
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.cssはファイル作成のみ… -
01 ホームページ中級講座 ナビゲーションの作成(HTML)
ホームページ中級講座1回目では、下記の完成形をめざしてHTML/CSSを1回目と2回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホ… -
02ホームページ中級講座 ナビゲーションの作成(CSS)
前回01 ホームページ中級講座 ナビゲーションの作成(HTML)作成したHTMLファイルにCSSを記述しデザインを適応させていききます。 【HTMLマークアップファイル】 マークア… -
03ホームページ中級講座 googleフォントを指定
前回はホームページのヘッダー内に設置する「グローバルナビゲーション」のCSS設定「02ホームページ中級講座 ナビゲーションの作成(CSS)」を行なってきました。 前回の… -
ウェブデザイン技能検定 学科 令和3年度 1回目(3級)
ウェブデザイン技能検定 学科 令和3年度の1回目(3級)の過去問解説を行っています。 前回に引き続き令和3年度の過去問のトライです! 今回の課題では、通常通りア… -
学科 令話元年 1回目(3級) ウェブデザイン技能検定
ウェブデザイン技能検定 学科 令話元年 1回目(3級) ウェブデザイン技能検定3級 学科講座です。過去問より令話元年1回目(3級)の過去問題をといて解説しています… -
03 バナー作成講座 背景に写真・さくら吹雪のブラシ
【在宅・フリーランスになるためのバナー作成講座】 Webサイト制作で必要な要素のひとつ「バナー」今回は、Photoshop バナーで、背景に写真やイラストを設置してみます…