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

Thumbnail of post image 071

Visual Studio Codeとは、Microsoft Azureが開発している様々なOS(Windows/Mac)上で動くコードエディターです。そもそもエディターという ...

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

Thumbnail of post image 015

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

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

Thumbnail of post image 185

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

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

Thumbnail of post image 043

ウェブデザイン技能検定 学科 令和3年度の2回目(3級)の過去問解説を行っています。 ウエブデザイン技能検定 「学科令和3年度の2回目(3級)」の課題では、通常通りアクセシビリ ...

Webサイト制作,デザイン講座,レスポンシブ基礎講座

Thumbnail of post image 047

レスポンシブホームページ基本講座2回目の講座です。今回はレスポンシブデザインでは、必須の「ブレイクポイント」を解説していますので、1回目はがまだの場合は、レスポンシブホームペー ...

Webサイト制作,レスポンシブ基礎講座

Thumbnail of post image 121

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

Webサイト制作,レスポンシブ基礎講座

Thumbnail of post image 059

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

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

Thumbnail of post image 193

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

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

Thumbnail of post image 046

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

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

Thumbnail of post image 059

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

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

Thumbnail of post image 104

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

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

Thumbnail of post image 013

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

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

Thumbnail of post image 104

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

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

Thumbnail of post image 100

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

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

Thumbnail of post image 157

下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML)02ホームページ中級講座 ナビゲーションの作成( ...

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

Thumbnail of post image 112

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

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

Thumbnail of post image 085

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

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

Thumbnail of post image 048

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

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

Thumbnail of post image 056

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

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

Thumbnail of post image 061

今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。 <!DOCTYPE ...

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

Thumbnail of post image 144

header要素 とfooter要素の追加 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッタ ...

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

Thumbnail of post image 125

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