Visual Studio Codeのインストールとセットアップ
Visual Studio Codeとは、Microsoft Azureが開発している様々なOS(Windows/Mac）上で動くコードエディターです。そもそもエディターという ...
ホームページ中級講座 Table要素を使って表組作成
ホームページ内で表組みを作成する場合はtable要素を使います。 ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今のTable要 ...
ウェブデザイン技能検定 学科 令和３年度 1回目（3級）
ウェブデザイン技能検定 学科 令和３年度の１回目（3級）の過去問解説を行っています。 前回に引き続き令和３年度の過去問のトライです！ ウェブデザイン技能検定 今回の課題では、通 ...
ウェブデザイン技能検定 学科 令和３年度 ２回目（3級）
ウェブデザイン技能検定 学科 令和３年度の２回目（3級）の過去問解説を行っています。 ウエブデザイン技能検定 「学科令和３年度の２回目（3級）」の課題では、通常通りアクセシビリ ...
02 レスポンシブホームページ基本講座 ブレイクポイント
レスポンシブホームページ基本講座2回目の講座です。今回はレスポンシブデザインでは、必須の「ブレイクポイント」を解説していますので、1回目はがまだの場合は、レスポンシブホームペー ...
01 レスポンシブホームページ基本講座
レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。 meta ...
00 レスポンシブホームページ講座 (検証ツール)
レスポンシブホームページ制作講座の初回講座です。 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。 ...
コードが爆速で入力できる。 Emmet!プラグインの使い方
模写コーディングを行う際は、少しでも速く、効率良く入力を練習する必要があります。 何度か紹介してきたプラグイン「Emmet!」を再度解説した動画です。確認してみましょう。 Em ...
20 ホームページ中級講座 HTML編 フォトギャラリーを作る
今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。<figure>という要素を使います <figure>？ ...
19 ホームページ中級講座 footerを下部に固定
前回の18ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近の ...
18 ホームページ中級講座 floatを使った周り込み
前回「17 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。 ここでは、cssの周り込みのプロパティ「fl ...
07ホームページ中級講座 CSSで作成するロゴ
前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイ ...
06 ホームページ中級講座 便利なEmmet!
16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 パソコン画像とグラフ画像ファイルは別途準備ください。 テキス ...
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.css ...
04 ホームページ中級講座 display:flex のおさらい
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML)02ホームページ中級講座 ナビゲーションの作成( ...
03ホームページ中級講座 googleフォントを指定
前回はホームページのヘッダー内に設置する「グローバルナビゲーション」のCSS設定「02ホームページ中級講座 ナビゲーションの作成(CSS)」を行なってきました。 前回の続きで、 ...
02ホームページ中級講座 ナビゲーションの作成(CSS)
前回01 ホームページ中級講座 ナビゲーションの作成(HTML)作成したHTMLファイルにCSSを記述しデザインを適応させていききます。 HTMLマークアップファイル マークア ...
01 ホームページ中級講座 ナビゲーションの作成(HTML)
ホームページ中級講座１回目では、下記の完成形をめざしてHTML/CSSを１回目と２回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホームページ ...
11 ホームページ基礎講座 box-shadow
今回使うHTML/CSSファイルの準備 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成しま ...
10 ホームページ基礎講座 外部スタイルシートとグラデーションCSS
今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。 <!DOCTYPE ...
09 ホームページ基礎講座 HTML編 header footer
header要素 とfooter要素の追加 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッタ ...
08 ホームページ基礎講座 CSSのwidthとmargin
前回０７ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線（borderプロパティ）を中心としたデザインを設定しな ...