Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 030

ホームページ内で表組みを作成する場合はtable要素を使います。 ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今のTable要 ...

ウェブデザイン技能検定,技能検定(学科)

Thumbnail of post image 064

ウェブデザイン技能検定 学科 令和3年度の1回目(3級)の過去問解説を行っています。 前回に引き続き令和3年度の過去問のトライです! ウェブデザイン技能検定 今回の課題では、通 ...

ウェブデザイン技能検定,技能検定(学科)

Thumbnail of post image 196

ウェブデザイン技能検定 学科 令和3年度の2回目(3級)の過去問解説を行っています。 とても久しぶりの過去問トライ動画なので、その間にウエブデザイン技能検定の公式サイトもリニュ ...

Webサイト制作,ホームページ中級講座,ホームページ基礎講座,動画

Thumbnail of post image 129

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 044

今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います <figure>? ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 013

前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近の ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 059

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

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 058

前回の16 ホームページ中級講座 便利なEmmet!の続きになります。 HTMLは前回のマークアップされた下記のHTMLファイルを使います。cssは外部スタイルシートになるので ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 112

16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 パソコン画像とグラフ画像ファイルは別途準備ください。 テキス ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 035

前回の14 ホームページ中級講座 display:flex のおさらいの続きになりますので、HTMLとCSSファイルは引き続き同じファイルを使っていきます。 隣接セレクタ + ...

Webサイト制作,ホームページ中級講座

Thumbnail of post image 168

 12  ナビゲーションの作成(CSS)でナビゲーションの横並びの記述で使ったCSSのdisplayプロパティのflexについておさらいのコード模写を行いま ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 036

前回はホームページのヘッダー内に設置する「グローバルナビゲーション」を設置する12ナビゲーションのCSSを行なってきました。 前回の続きで、ヘッダー以下のマークアップに基づき、 ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 004

前回 11 ホームページ中級講座 ナビゲーションの作成(HTML)で作成したHTMLファイルを使って、CSSを設置していきましょう。 マークアップされたHTMLは下記になります ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 190

11回目と次の12回目で、下記のようなナビゲーションといわれる「目次」部分が挿入されたコード模写を行なっていきましょう。 まずは、HTMLのマークアップから行いますので、下記の ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 109

今回は、前回10-1ホームページ中級講座・外部スタイルシート編で作成をしたHTML/CSSファイルをアレンジしていきます。 今回使うHTML/CSSファイルの準備 HTMLファ ...

Webサイト制作,ホームページ中級講座,動画

Thumbnail of post image 159

前回の09ホームページ基礎講座から中級に上がってきました!中級からは、CSSを記述することが多くなりますので、CSSの行数も多くなります。ここからは、CSSの部分だけ、別ファイ ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 020

<header><footer>要素 今回のマークアップは独自コンテンツようのarticle要素とsection要素の他に、ページのヘッダー部分に設定す ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 096

前回07ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線(borderプロパティ)を中心としたデザインをあれこれ ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 075

箇条書きの<ul> <li>要素  <ol><li>要素 ul要素は順不同型リスト ol要素は順序型リストで、ホームページの中で ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 059

前回の05はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にwidthプロパティを使って横幅指定を行います ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 019

前回の04はじめてのホームページでは、cssのプロパティを使って、要素に背景色などの色指定などを行いました。今回は、htmlにあるマークアップの中でもグループを分ける作業を行い ...

Webサイト制作,ホームページ基礎講座,動画

Thumbnail of post image 085

前回の03はじめてのホームページでは「画像要素」の設置を行いました。 今回は、HTMLでマークアップされたファイルにCSSを使って、背景色の設定や、線で枠を設置したり、行の中で ...