ウェブデザイン技能検定 学科 令和３年度 1回目（3級）
ウェブデザイン技能検定 学科 令和３年度の１回目（3級）の過去問解説を行っています。 前回に引き続き令和３年度の過去問のトライです！ 今回の課題では、通常通りアクセシビリティやユーザービリティに関する問題や、新しいところ […]
ウェブデザイン技能検定 学科 令和３年度 ２回目（3級）
ウェブデザイン技能検定 学科 令和３年度の２回目（3級）の過去問解説を行っています。 とても久しぶりの過去問トライ動画なので、その間にウエブデザイン技能検定の公式サイトもリニューアルされていました！ 今回の課題では、通常 […]
22 ホームページ制作基礎講座 Emmet!プラグインの使いかた(adobe Brackets 使って)
Yoshiko先生 爆速プラグイン「Emmet!」の紹介です。これを設定すると入力が非常に楽になります！ EmmetでHTMLのタグを入力してみようっっw Emment でHTMLのタグ（要素）を入力する場合は、要素名を […]
21 ホームページ制作基礎講座 フォトギャラリーを作る 続き
こちらはこの前のページ ２０ のフォギャラリーを作ろうの続編です。前のページは下記から参照されてください。 Photo GalleryのHTMLの全体コード <!DOCTYPE html> <html […]
20 ホームページ制作基礎講座 HTML編 フォトギャラリーを作る
Photo GalleryのHTMLの全体コード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> […]
02 レスポンシブホームページ基本講座 ブレイクポイント
レスポンシブホームページ基本講座2回目の講座です。今回はレスポンシブデザインでは、必須の「ブレイクポイント」を解説していますので、1回目はがまだの場合は、レスポンシブホームページ基礎講座1回目をご覧ください。 画面を可変 […]
10-2 HTMLとCSS講座 CSS編
そろそろ中級講座になってきましたホームページ作成講座です。 マークアップ言語HTML5でheader footer 設定がおわったあと、CSSでデザインを書いています。 前回の続きのCSSで、liner-gradient […]
10-1 ホームページ中級講座 CSSでグラデーション
外部スタイルシート HTML<head></head>内に記述する内包のスタイルシートとは違い、HTMLとは別のファイルを作成して、そのファイルの拡張子をcssとすることで、スタイルシートのファイ […]
09 ホームページ基礎講座 HTML編 header footer
<header><footer>要素 今回のマークアップは独自コンテンツようのarticle の他に、ページのヘッダー部分に設定する<header>要素 フッター部分専用の<foote […]
08 ホームページ基礎講座 CSS 角丸 border-radius
box-sizing:border-box; 今回の動画ではarticle にboder:2px solid と線を引いて、横幅700px padding:2em とした時、画面の横幅が700px + 2em になってい […]
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li
箇条書きの<ul> <li>要素 <ol><li>要素 <ul> は順不同型リスト <ol>は順序型リストで、ホームページの中で箇条書きをマークアップする時に使われる要素です。箇条書 […]
06 ホームページ基礎講座 CSS 幅のwidth 線のborder
横幅指定のwidth を使う HTMLの中に書くスタイルシート 内包スタイルシートを使って、CSSを適用していきます。今回はwidthを使うので、横幅が一定の距離で折り返すというところになります article{ wi […]
05 はじめてのホームページ HTMLとCSS
article要素 section要素 を設定 文章から基本のマークアップを行います。 article要素とは <artilce>という要素は、独自コンテンツと呼ばれる要素です。 ホームページのコンテンツ＝内容を囲 […]
04 はじめてのホームページ HTMLとCSS
HTMLのマークアップされたファイルにCSSを書いていきます HTMLファイルを開いたら、<title>エコロジー&環境問題<title>の直下に内包のスタイルシートを書いていきます。&l […]
03 はじめてのホームページ HTMLとCSS
基本のマークアップが終わりましたら、今回はHTMLで画像の設定を行います。画像は<img>要素を使います。 画像はインライン要素ですので、今回の動画は<p>要素の中に書いています <p><img […]
02 はじめてのホームページ HTMLとCSS
01のはじめてのホームページ HTMLとCSSでは、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素の<h1>を文章には、段落要素の<p>をマークアップしています。今回は […]
01 はじめてのホームページ HTMLとCSS
初心者の方むけのホームページ作成講座 はじめのHTML講座では、Adobe Brackets を使って文章にマークアップをおこなう手順を行います。 この講座では、Adobe Bracketsのプラグインemmet!を使っ […]
01 レスポンシブホームページ基本講座
レスポンシブホームページ基本講座1回目の講座です。前回レスポンシブで必要なデベロッパーツールを解説していますので、こちらの回がまだの場合は、初回講座をご覧ください。 meta viewportビューポートの設定 < […]
00 レスポンシブホームページ基本講座
レスポンシブホームページ制作講座の初回講座です。 レスポンシブとは、スマートフォン・タブレット・パソコン画面をHTMLはひとつで、CSSで見た目を可変するデザインのことです。 今回のレスポンシブホームページ基礎講座は、そ […]
19 ホームページ制作基礎講座 CSS編 footerを固定する
footer を含む 外側のdiv class="content" .content { width: 800px; margin: 0 auto; border-left: 5px solid #999; border […]
18 ホームページ制作基礎講座 CSS編 float
folatで画像が左、文章が右の周りこみ .l_float { float: left; margin-right: 1em; } folatで画像が右、文章が左の周りこみ .r_float { float: right […]
17 HTMLとCSS講座 CSS編 text-shadow
header 要素の中のh1をtext-shadow を使ってロゴ風に header h1 { font-size: 3em; padding: 1.5rem; font-weight: 800; text-shadow […]