求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

HTML基礎

CSSでレイアウト - 基本

HTMLの基本構造 《Emmet入力》 ! 「tab」キーで展開 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> コンテンツ内容の入力 h1は、ページテーマの最優先見出し pは、テーマの内容 練習としては、「自分の好きな〇〇」を入力すること 「自分の好きな食べ物」「自分の好きな音楽」「自分の好…

CSS演習 - 1カラム 石垣島観光ガイド

1カラムレイアウト 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。 観光スポット 「 …

マークアップ演習

マークアップ演習 各課題をブラウザで、文書構造が表示されるよう記述しましょう タイトルは、適宜考えること Products デザインの話 物にはいろいろな形があります。歴史とともに多様なデザインが生まれてきました。物にはいろいろな形があります。歴史とと…

要素の入れ子(ネスト)と子孫関係

要素の入れ子(ネスト)と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…

リスト、表、画像挿入、リンク

リスト 箇条書き <ul> <ol> <dl> 1行で簡潔に伝える文章 Webの仕組みでは、リンクとして詳細の内容に遷移するために利用することが多い ul(unordered list) 順序が置き換わっても意味が伝わる並列な内容に使う。 行頭マークは「黒丸」が初期値 <ul> <li>私が好きな真っ赤なり</li></ul></dl></ol></ul>…

HTMLの基本構造のマークアップ

HTML基本構造のマークアップ 全てのHTMLドキュメントに必須 HTML5のDOCTYPE宣言 lang属性:ページの主要言語を指定する HTML5の文字コードセットは原則「UTF-8」 ページタイトル:30字から40字で重要な後から始める <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTMLの基本構造</title> </head> <body> </body> </html> CSSファイルの読…

HTMLの入力

入力練習の準備 管理フォルダーを作成(このとき、日本語使用不可) Cドライブ直下に「myName(自分の名前を英字で)」フォルダーを作り管理しなさい その中に「日付フォルダー」を作り、データを管理します(最初の段階では日付、後にプロジェクト名で管理…

テキストエディターで文字を入力する

テキストエディター 文字を入力するツール(基本的に、メモ帳以外を使用します) Adobe Brackets(ブラケッツ) brackets.io 授業全体の管理フォルダー作成 Cドライブ直下に「自分の名前(ローマ字)」という名前でフォルダーを作成 管理フォルダーを設定 「…

制作環境を整えよう

準備するもの 自宅学習用のパソコン ブラウザー(Google Chrome) テキストエディタ(Adobe Brakets) 画像編集ソフト(無料版、体験版、有料版のいずれか) ブラウザー Google Chrome テキストエディター 初期の段階で「HTML」を記述する練習には「メモ帳」…

まず文字を入力してみる

Code Drill Webで使用する文字の入力練習サイト www.code-drill.com 「文字列」ボタンをクリックして、練習を始めます ルーチン パソコンを起動したら、まず入力練習をおこなう できる限り「速く」入力できるように練習する タイピング練習 日本語入力の練習

縦ナビゲーション

ナビゲーション マウスクリックにより、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する …

1カラムレイアウト

1カラムレイアウト 背景画像の作成 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。鮮やかなコバルトブルーの海岸は、ダイバーやシュノーケリングを楽し…

要素の入れ子(ネスト)と子孫関係

要素の入れ子(ネスト)と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…

リスト、表、画像挿入、リンク

リスト 箇条書き <ul> <ol> <dl> 1行で簡潔に伝える文章 Webの仕組みでは、リンクとして詳細の内容に遷移するために利用することが多い ul(unordered list) 順序が置き換わっても意味が伝わる並列な内容に使う。 行頭マークは「黒丸」が初期値 <ul> <li>私が好きな真っ赤なり</li></ul></dl></ol></ul>…

HTMLを書く- 文書構造(ページの内容)

bodyの中に何を書くか ページのテーマ内容の「文書構造」を記述します パラグラフ・ライティング shouronbun.com 見出し heading(1〜6) 一般的には、「h1」〜「h4」までを使用します 段落(本文) paragraph パラグラフの最も重要なポイントは、先頭文を読…

HTMLを書く- 基本構造(ページの枠組み)

HTML Hyper Text Markup Language の略 HTMLドキュメント 新規ドキュメント作成 拡張子を「.html」として保存する 基本構造を入力する 基本構造 入力は、必ず「開始タグ」→「終了タグ」という順序で入力する DOCTYPE宣言 「!(エクスクラメーション)」を記…