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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新着一覧

  • 20 ホームページ中級講座 HTML編  フォトギャラリーを作る

    完成イメージ 下図のようなフォトギャラリーを作成してみましょう。h1のタイトル要素にはgoogle fontsのoswaldを適用しています。ギャラリーとなる場所は、figure要素を使います。写真は、Photoshop […]

    And More…..

  • 19 ホームページ中級講座  footerを下部に固定

    前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近のWebサイトは、スマホサイトの影響もあって、 […]

    And More…..

  • 18  ホームページ中級講座  floatを使った周り込み

    前回「17 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。 ここでは、cssの周り込みのプロパティ「float」を使った例を行なっています。 flo […]

    And More…..

  • 07ホームページ中級講座 CSSで作成するロゴ

    前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイルをコピーするか、コードを模写してから行いま […]

    And More…..

  • 06 ホームページ中級講座 便利なEmmet!

    16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 テキストにマークアップを行なっていきます 下記のテキストをコピーして、HTMLファイルとして保存しておき […]

    And More…..

  • 05 ホームページ中級講座   様々なセレクタ::隣接セレクタ

    前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.cssはファイル作成のみ行います。 CSSの作成 […]

    And More…..

  • 04 ホームページ中級講座  display:flex のおさらい

    下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作成(CSS) 今回は改めて、CSSのdispl […]

    And More…..

  • 03ホームページ中級講座  googleフォントを指定

    前回はホームページのヘッダー内に設置する「グローバルナビゲーション」のCSS設定「02ホームページ中級講座 ナビゲーションの作成(CSS)」を行なってきました。 前回の続きで、セクションにCSSの設定を行なったあと、Go […]

    And More…..

  • 02ホームページ中級講座 ナビゲーションの作成(CSS)

    前回01 ホームページ中級講座 ナビゲーションの作成(HTML)作成したHTMLファイルにCSSを記述しデザインを適応させていききます。 HTMLマークアップファイル マークアップされたHTMLは下記になります。また、C […]

    And More…..

  • 01 ホームページ中級講座 ナビゲーションの作成(HTML)

    ホームページ中級講座1回目では、下記の完成形をめざしてHTML/CSSを1回目と2回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホームページ中級というフォルダを作成し、そのフォルダ内に […]

    And More…..

  • 11 ホームページ基礎講座   box-shadow

    今回使うHTML/CSSファイルの準備 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成します。index.htmlファイルを開き下記の […]

    And More…..

  • 10  ホームページ基礎講座 外部スタイルシートとグラデーションCSS

    今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。 外部スタイルシート 今回は、今までのようなCSSの記述をhead要素 […]

    And More…..

  • 09 ホームページ基礎講座 HTML編 header footer

    header要素 とfooter要素の追加 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッターに設定するfooter要素を設置していきま […]

    And More…..

  • 08 ホームページ基礎講座 CSSのwidthとmargin

    前回07ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線(borderプロパティ)を中心としたデザインを設定しながら、線とその要素内にある文字列との余白をあ […]

    And More…..

  • 07 ホームページ基礎講座 HTML 箇条書き ul > li  ol > li

    07ホームページ基礎講座では、Webサイトの中で使う箇条書き要素について、HTMLのマークアップ練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバルナビゲーションと呼ばれる重要な場所で […]

    And More…..