Webサイト制作科 忘筌

求職者支援訓練 Webサイト制作科 10月11日開講クラス補足メモ

HTML

カンプからコーディング

カンプからコーディング HTML Outliner 「Untitled Section」は、navタグ

企業系サイト:トップページ

2カラムページ設計 bodyの背景画像を設定する場合 headerの背景画像を設定する場合 定義 全体は、.conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50…

positionを使ったレイアウト- 実践

positionを使ったレイアウト 以下のサイトを作成しなさい logo.png(透過PNG 幅200px) <html lang="ja"> <head> <meta charset="utf-8"> <title>ドリンク | ペンギンカフェ</title> <link rel="stylesheet" href="../css/cafe.css"> </head> <body id="drink"> <div class="container"> <header class="header"> <h1></h1></header></div></body></html>

positionによるレイアウト

positionとは テキストP.146〜154 positionプロパティはボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、botto…

CSS Spritesの設定 - 背景画像の記述

HTMLの記述 <html lang="ja"> <head> <meta charset="utf-8"> <title>Penguin Cafe</title> <link rel="stylesheet" href="css/cafe.css"> </head> <body> <div class="container"> <header class="header"> <h1>ペンギン・カフェ</h1> <p>落ち着いた雰囲気の、おいしいコーヒーを楽しめるお店です。</p> </header> <p class="keyvisual"></p></div></body></html>

相対パスと絶対パス

相対パスと絶対パス 「パス」とは、「ファイルの場所」を示すための大切な仕組みです 相対パス relative path 今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを指定します 相対パスを記述 同じ階層内にあるファイル →ファイル名 で記述 同…

うちのにゃんこ - HTML Validatorで文法チェック

HTML Validatorで文法チェック <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header class="header"> <h1><span class="star">★</span>うちのにゃんこ<span class="star">★</span></h1> <p>我が家のアイドル、に…</p></header></div></body></html>

うちのにゃんこ - ワイヤーフレーム

うちのにゃんこ マークアップのポイント HTML5新要素で記述し文書構造を明確にする CSSで記述するために必要なクラス名を追記する div要素を使い「グループ化」されたブロックを積み重なる構造にする 例では、すべてを囲むグループの中に「header」「footer…

ナビゲションを含めて2カラムレイアウト - 基礎演習

ナビゲションを含めて2カラムレイアウト 「header」「footer」の横幅「100%」・高さ「100px」 間に「div」を、横幅「960px」 「div」内に「nav」「main」「aside」挿入 「main」は、左寄せ、高さ「300px」、横幅は適宜 「aside」は、右寄せ、高さ「300px」…

floatを使った回り込み

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

CSSでレイアウト - 基本

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

ページ構築の手順

CSSによるページ構築の手順 入力内容のチェック 入力内容(文法)チェックは、必須です W3C Markup Validation Service(HTMLのチェック) W3C CSS Validation Service(CSSのチェック) 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブ…

Adobe Brackets 入力時の使い方

Adobe Bracketsの入力時の使い方 プロジェクトのルート化 「Getting Started」をクリック 管理したいフォルダーを選択(例:「myName」自分の名前をつけたフォルダー) クイックエディット クイックエディットは主に4種類あります ショートカットは全て「Ctr…

floatを使ったレイアウト基礎

floatとは テキストP.104 浮く(浮動状態) floatは要素を横に並べたり、文字を回り込ませたいときに指定するプロパティ プロパティの指定 プロパティの指定 挙動 float: left; 指定した要素を左に浮き上がらせて寄せて、次の要素を左方向にあとに続いている…

1カラムレイアウト - 演習

CSS演習 テキストと授業内容の確認 幅 高さ margin padding 背景色 背景画像 文字色 文字サイズ line-height CSSで1カラムレイアウト 「CSSでレイアウト - 基本」を踏まえて設定する 最低限の記述に徹する 例題テキスト 宮沢賢治作品 いてふの実 そらのてっ…

縦ナビゲーション

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

CSS ★演習

演習 CSSの記述は、内部参照(embed)で記述 問題 CSS1 #1B888D #355584 <body> <h1>style要素</h1> <h2>style element</h2> <p>HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は不要 #91BC86 #BC908F #F5F5DB <body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン</p></body>…

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

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

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

HTML Hyper Text Markup Language の略 HTMLドキュメント 新規ドキュメント作成 拡張子を「.html」として保存する 基本構造を入力する 基本構造 入力は、必ず「開始タグ」→「終了タグ」という順序で入力する DOCTYPE宣言 文書が「HTML5「で記述したることを…

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 管理フォルダーを設定 「Getting Started」をクリックし、管理したいフォルダーを選択します 入力データを保存する準備 管理フォル…

制作環境を整えよう

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